🙋🏽‍♂️ Wanted comics section on dashboard

2022-03-03 14:57:22 -08:00
parent 9ec5040bd7
commit 103cc7fa91
7 changed files with 193 additions and 70 deletions
--- a/src/client/actions/fileops.actions.tsx
+++ b/src/client/actions/fileops.actions.tsx
@@ -12,6 +12,7 @@ import {
  IMS_COMIC_BOOK_GROUPS_CALL_IN_PROGRESS,
  IMS_COMIC_BOOK_GROUPS_CALL_FAILED,
  IMS_RECENT_COMICS_FETCHED,
+  IMS_WANTED_COMICS_FETCHED,
  CV_API_CALL_IN_PROGRESS,
  CV_SEARCH_SUCCESS,
  CV_CLEANUP,
@@ -83,21 +84,33 @@ export const fetchComicBookMetadata = (options) => async (dispatch) => {
 };

 export const getComicBooks = (options) => async (dispatch) => {
-  const { paginationOptions } = options;
-  return axios
-    .request({
-      url: `${LIBRARY_SERVICE_BASE_URI}/getComicBooks`,
-      method: "POST",
-      data: {
-        paginationOptions,
-      },
-    })
-    .then((response) => {
+  const { paginationOptions, predicate, comicStatus } = options;
+
+  const response = await axios.request({
+    url: `${LIBRARY_SERVICE_BASE_URI}/getComicBooks`,
+    method: "POST",
+    data: {
+      paginationOptions,
+      predicate,
+    },
+  });
+
+  switch (comicStatus) {
+    case "recent":
      dispatch({
        type: IMS_RECENT_COMICS_FETCHED,
        data: response.data,
      });
-    });
+      break;
+    case "wanted":
+      dispatch({
+        type: IMS_WANTED_COMICS_FETCHED,
+        data: response.data.docs,
+      });
+      break;
+    default:
+      console.log("Unrecognized comic status.");
+  }
 };

 export const importToDB = (payload?: any) => (dispatch) => {
@@ -111,6 +124,7 @@ export const importToDB = (payload?: any) => (dispatch) => {
        },
      },
      sourcedMetadata: { comicvine: payload || null },
+      acquisition: { wanted: true },
    };
    dispatch({
      type: IMS_CV_METADATA_IMPORT_CALL_IN_PROGRESS,
@@ -136,37 +150,30 @@ export const importToDB = (payload?: any) => (dispatch) => {
    });
  }
 };
-export const fetchVolumeGroups = () => (dispatch) => {
+export const fetchVolumeGroups = () => async (dispatch) => {
  try {
    dispatch({
      type: IMS_COMIC_BOOK_GROUPS_CALL_IN_PROGRESS,
    });
-    axios
-      .request({
-        url: `${LIBRARY_SERVICE_BASE_URI}/getComicBookGroups`,
-        method: "GET",
-      })
-      .then((data) => {
-        dispatch({
-          type: IMS_COMIC_BOOK_GROUPS_FETCHED,
-          data: data.data,
-        });
-      });
-  } catch (error) {
-    dispatch({
-      type: IMS_COMIC_BOOK_GROUPS_CALL_FAILED,
-      error,
+    const response = await axios.request({
+      url: `${LIBRARY_SERVICE_BASE_URI}/getComicBookGroups`,
+      method: "GET",
    });
+
+    dispatch({
+      type: IMS_COMIC_BOOK_GROUPS_FETCHED,
+      data: response.data,
+    });
+  } catch (error) {
+    console.log(error);
  }
 };
 export const fetchComicVineMatches =
-  (searchPayload, issueSearchQuery, seriesSearchQuery?) => (dispatch) => {
+  (searchPayload, issueSearchQuery, seriesSearchQuery?) => async (dispatch) => {
    try {
      dispatch({
        type: CV_API_CALL_IN_PROGRESS,
      });
-      console.log(issueSearchQuery);
-      console.log(seriesSearchQuery);
      axios
        .request({
          url: `${COMICVINE_SERVICE_URI}/volumeBasedSearch`,
--- a/src/client/components/ComicDetail.tsx
+++ b/src/client/components/ComicDetail.tsx
@@ -4,7 +4,6 @@ import { useParams } from "react-router-dom";
 import Card from "./Carda";
 import { ComicVineMatchPanel } from "./ComicDetail/ComicVineMatchPanel";
 import { VolumeInformation } from "./ComicDetail/Tabs/VolumeInformation";
-import { ComicVineDetails } from "./ComicDetail/ComicVineDetails";
 import { RawFileDetails } from "./ComicDetail/RawFileDetails";
 import { ArchiveOperations } from "./ComicDetail/Tabs/ArchiveOperations";
 import AcquisitionPanel from "./ComicDetail/AcquisitionPanel";
--- a/src/client/components/Dashboard/Dashboard.tsx
+++ b/src/client/components/Dashboard/Dashboard.tsx
@@ -2,16 +2,21 @@ import React, { ReactElement, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import ZeroState from "./ZeroState";
 import { RecentlyImported } from "./RecentlyImported";
+import { WantedComicsList } from "./WantedComicsList";
 import { VolumeGroups } from "./VolumeGroups";
 import { PullList } from "./PullList";
-import { getComicBooks } from "../../actions/fileops.actions";
+import {
+  fetchVolumeGroups,
+  getComicBooks,
+} from "../../actions/fileops.actions";
 import { getLibraryStatistics } from "../../actions/comicinfo.actions";
-import { isEmpty, isNil, isUndefined, map } from "lodash";
+import { isEmpty, isUndefined, map } from "lodash";
 import prettyBytes from "pretty-bytes";

 export const Dashboard = (): ReactElement => {
  const dispatch = useDispatch();
  useEffect(() => {
+    dispatch(fetchVolumeGroups());
    dispatch(
      getComicBooks({
        paginationOptions: {
@@ -19,13 +24,30 @@ export const Dashboard = (): ReactElement => {
          limit: 5,
          sort: { updatedAt: "-1" },
        },
+        predicate: { "acquisition.wanted": false },
+        comicStatus: "recent",
+      }),
+    );
+    dispatch(
+      getComicBooks({
+        paginationOptions: {
+          page: 0,
+          limit: 5,
+          sort: { updatedAt: "-1" },
+        },
+        predicate: { "acquisition.wanted": true },
+        comicStatus: "wanted",
      }),
    );
    dispatch(getLibraryStatistics());
-  }, [dispatch]);
+  }, []);
+
  const recentComics = useSelector(
    (state: RootState) => state.fileOps.recentComics,
  );
+  const wantedComics = useSelector(
+    (state: RootState) => state.fileOps.wantedComics,
+  );
  const volumeGroups = useSelector(
    (state: RootState) => state.fileOps.comicVolumeGroups,
  );
@@ -153,8 +175,9 @@ export const Dashboard = (): ReactElement => {
                </dl>
              </div>
            </div>
+            <WantedComicsList comics={wantedComics} />
            <RecentlyImported comicBookCovers={recentComics} />
-            {!isNil(volumeGroups) ? <VolumeGroups /> : null}
+            <VolumeGroups volumeGroups={volumeGroups} />
          </>
        ) : (
          <ZeroState
--- a/src/client/components/Dashboard/VolumeGroups.tsx
+++ b/src/client/components/Dashboard/VolumeGroups.tsx
@@ -1,25 +1,16 @@
-import { isNil, map } from "lodash";
-import React, { ReactElement, useEffect } from "react";
-import { useSelector, useDispatch } from "react-redux";
+import { map } from "lodash";
+import React, { ReactElement } from "react";
 import ellipsize from "ellipsize";
 import { Link } from "react-router-dom";
-import { fetchVolumeGroups } from "../../actions/fileops.actions";
 import Masonry from "react-masonry-css";

-export const VolumeGroups = (): ReactElement => {
+export const VolumeGroups = (props): ReactElement => {
  const breakpointColumnsObj = {
    default: 5,
    1100: 4,
    700: 2,
    500: 1,
  };
-  const dispatch = useDispatch();
-  useEffect(() => {
-    dispatch(fetchVolumeGroups());
-  }, [dispatch]);
-  const volumeGroups = useSelector(
-    (state: RootState) => state.fileOps.comicVolumeGroups,
-  );
  return (
    <section className="volumes-container mt-4">
      <div className="content">
@@ -31,32 +22,30 @@ export const VolumeGroups = (): ReactElement => {
        className="volumes-grid"
        columnClassName="volumes-grid-column"
      >
-        {!isNil(volumeGroups) &&
-          volumeGroups &&
-          map(volumeGroups, (group) => {
-            if (!isNil(group._id)) {
-              return (
-                <div className="stack" key={group._id.id}>
-                  <img src={group.data[0].image.small_url} />
-                  <div className="content">
-                    <div className="stack-title is-size-8">
-                      <Link to={`/volume/details/${group.comicBookObjectId}`}>
-                        {ellipsize(group.data[0].name, 18)}
-                      </Link>
-                    </div>
-                    <div className="control">
-                      <span className="tags has-addons">
-                        <span className="tag is-primary is-light">Issues</span>
-                        <span className="tag">
-                          {group.data[0].count_of_issues}
-                        </span>
+        {map(props.volumeGroups, (data) => {
+          return map(data.data, (group) => {
+            return (
+              <div className="stack" key={group.id}>
+                <img src={group.volume.image.small_url} />
+                <div className="content">
+                  <div className="stack-title is-size-8">
+                    <Link to={`/volume/details/${group.id}`}>
+                      {ellipsize(group.volume.name, 18)}
+                    </Link>
+                  </div>
+                  <div className="control">
+                    <span className="tags has-addons">
+                      <span className="tag is-primary is-light">Issues</span>
+                      <span className="tag">
+                        {group.volume.count_of_issues}
                      </span>
-                    </div>
+                    </span>
                  </div>
                </div>
-              );
-            }
-          })}
+              </div>
+            );
+          });
+        })}
      </Masonry>
    </section>
  );
--- a/src/client/components/Dashboard/WantedComicsList.tsx
+++ b/src/client/components/Dashboard/WantedComicsList.tsx
@@ -0,0 +1,93 @@
+import React, { ReactElement } from "react";
+import Card from "../Carda";
+import { Link } from "react-router-dom";
+import ellipsize from "ellipsize";
+import { isEmpty, isNil, isUndefined, map } from "lodash";
+import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
+import Masonry from "react-masonry-css";
+
+type WantedComicsListProps = {
+  comics: any;
+};
+
+export const WantedComicsList = ({
+  comics,
+}: WantedComicsListProps): ReactElement => {
+  const breakpointColumnsObj = {
+    default: 5,
+    1100: 4,
+    700: 2,
+    600: 2,
+  };
+
+  return (
+    <>
+      <div className="content">
+        <h4 className="title is-4">Wanted Comics</h4>
+        <p className="subtitle is-7">
+          Comics marked as wanted from various sources.
+        </p>
+      </div>
+      <Masonry
+        breakpointCols={breakpointColumnsObj}
+        className="recent-comics-container"
+        columnClassName="recent-comics-column"
+      >
+        {map(comics, ({ _id, rawFileDetails, sourcedMetadata }) => {
+          const isComicBookMetadataAvailable =
+            sourcedMetadata &&
+            !isUndefined(sourcedMetadata.comicvine) &&
+            !isUndefined(sourcedMetadata.comicvine.volumeInformation) &&
+            !isEmpty(sourcedMetadata);
+          let imagePath = "";
+          let comicName = "";
+          if (isComicBookMetadataAvailable) {
+            imagePath = sourcedMetadata.comicvine.image.small_url;
+            comicName = sourcedMetadata.comicvine.name;
+          }
+          const titleElement = (
+            <Link to={"/comic/details/" + _id}>{ellipsize(comicName, 20)}</Link>
+          );
+          return (
+            <Card
+              key={_id}
+              orientation={"vertical"}
+              imageUrl={imagePath}
+              hasDetails
+              title={comicName ? titleElement : <span>No Name</span>}
+            >
+              <div className="content is-flex is-flex-direction-row">
+                {isComicBookMetadataAvailable && (
+                  <span className="icon custom-icon is-small">
+                    <img src="/img/cvlogo.svg" />
+                  </span>
+                )}
+                {/* Raw file presence  */}
+                {isEmpty(rawFileDetails.cover) && (
+                  <span className="icon custom-icon is-small has-text-danger mr-2">
+                    <img src="/img/missing-file.svg" />
+                  </span>
+                )}
+                {/* Issue type */}
+                {isComicBookMetadataAvailable &&
+                !isNil(
+                  detectIssueTypes(
+                    sourcedMetadata.comicvine.volumeInformation.description,
+                  ),
+                ) ? (
+                  <span className="tag is-warning">
+                    {
+                      detectIssueTypes(
+                        sourcedMetadata.comicvine.volumeInformation.description,
+                      ).displayName
+                    }
+                  </span>
+                ) : null}
+              </div>
+            </Card>
+          );
+        })}
+      </Masonry>
+    </>
+  );
+};
--- a/src/client/constants/action-types.ts
+++ b/src/client/constants/action-types.ts
@@ -41,6 +41,9 @@ export const IMS_COMIC_BOOK_DB_OBJECT_CALL_IN_PROGRESS =
 export const IMS_COMIC_BOOK_DB_OBJECT_CALL_FAILED =
  "IMS_COMIC_BOOK_DB_OBJECT_CALL_FAILED";

+// wanted comics from CV, LoCG and other sources
+export const IMS_WANTED_COMICS_FETCHED = "IMS_WANTED_COMICS_FETCHED";
+
 // volume groups
 export const IMS_COMIC_BOOK_GROUPS_FETCHED = "IMS_COMIC_BOOK_GROUPS_FETCHED";
 export const IMS_COMIC_BOOK_GROUPS_CALL_IN_PROGRESS =
--- a/src/client/reducers/fileops.reducer.ts
+++ b/src/client/reducers/fileops.reducer.ts
@@ -5,6 +5,7 @@ import {
  IMS_RAW_IMPORT_SUCCESSFUL,
  IMS_RAW_IMPORT_FAILED,
  IMS_RECENT_COMICS_FETCHED,
+  IMS_WANTED_COMICS_FETCHED,
  IMS_CV_METADATA_IMPORT_SUCCESSFUL,
  IMS_CV_METADATA_IMPORT_FAILED,
  IMS_CV_METADATA_IMPORT_CALL_IN_PROGRESS,
@@ -32,6 +33,8 @@ const initialState = {
  comicVineMetadataImportError: {},
  rawImportError: {},
  extractedComicBookArchive: [],
+  recentComics: [],
+  wantedComics: [],
 };

 function fileOpsReducer(state = initialState, action) {
@@ -65,6 +68,12 @@ function fileOpsReducer(state = initialState, action) {
        ...state,
        recentComics: action.data,
      };
+    case IMS_WANTED_COMICS_FETCHED:
+      console.log(action.data);
+      return {
+        ...state,
+        wantedComics: action.data,
+      };
    case IMS_CV_METADATA_IMPORT_SUCCESSFUL:
      return {
        ...state,