🚛 Massive refactor of dashboard

src/client/components/Carda.tsx

@@ -25,7 +25,7 @@ const renderCard = (props): ReactElement => {
                 <img
                   src={props.imageUrl}
                   alt="Placeholder image"
-                  className="image"
+                  className="cropped-image"
                 />
               </div>
               {props.hasDetails && (
@@ -34,9 +34,6 @@ const renderCard = (props): ReactElement => {
             </div>
           </div>
         </div>
-
-
-
       );
     case "vertical":
       return (

src/client/components/ComicDetail/AcquisitionPanel.tsx

@@ -19,12 +19,15 @@ import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
 interface IAcquisitionPanelProps {
   query: any;
   comicObjectid: any;
+  comicObject: any;
+  userSettings: any;
 }
 
 export const AcquisitionPanel = (
   props: IAcquisitionPanelProps,
 ): ReactElement => {
-  const issueName = props.query.issue.name;
+  const issueName = props.query.issue.name || "";
+  const { userSettings } = props;
   const sanitizedIssueName = issueName.replace(/[^a-zA-Z0-9 ]/g, " ");
 
   // Selectors for picking state
@@ -41,11 +44,11 @@ export const AcquisitionPanel = (
     (state: RootState) => state.airdcpp.searchInstance,
   );
 
-  const userSettings = useSelector((state: RootState) => state.settings.data);
+  // const userSettings = useSelector((state: RootState) => state.settings.data);
   const { ADCPPSocket } = useContext(AirDCPPSocketContext);
   const dispatch = useDispatch();
   const [dcppQuery, setDcppQuery] = useState({});
-
+  console.log(ADCPPSocket);
   useEffect(() => {
     if (!isNil(userSettings.directConnect)) {
       // AirDC++ search query
@@ -89,12 +92,13 @@ export const AcquisitionPanel = (
 
   // download via AirDC++
   const downloadDCPPResult = useCallback(
-    (searchInstanceId, resultId, comicBookObjectId) => {
+    (searchInstanceId, resultId, comicBookObjectId, comicObject) => {
       dispatch(
         downloadAirDCPPItem(
           searchInstanceId,
           resultId,
           comicBookObjectId,
+          comicObject,
           ADCPPSocket,
           {
             username: `${userSettings.directConnect.client.host.username}`,
@@ -293,6 +297,7 @@ export const AcquisitionPanel = (
                               searchInstance.id,
                               result.id,
                               props.comicObjectid,
+                              props.comicObject,
                             )
                           }
                         >

src/client/components/ComicDetail/ComicDetail.tsx

@@ -31,9 +31,6 @@ import SlidingPane from "react-sliding-pane";
 import Modal from "react-modal";
 import ComicViewer from "react-comic-viewer";
 
-import { getSettings } from "../../actions/settings.actions";
-import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
-import AirDCPPSocket from "../../services/DcppSearchService";
 import { extractComicArchive } from "../../actions/fileops.actions";
 import { determineCoverFile } from "../../shared/utils/metadata.utils";
 
@@ -68,8 +65,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     (state: RootState) => state.fileOps.extractedComicBookArchive,
   );
   const { comicObjectId } = useParams<{ comicObjectId: string }>();
-  const userSettings = useSelector((state: RootState) => state.settings.data);
-  const { ADCPPSocket, setADCPPSocket } = useContext(AirDCPPSocketContext);
+
   const dispatch = useDispatch();
 
   const openModal = useCallback((filePath) => {
@@ -86,24 +82,6 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     setIsOpen(false);
   }, []);
 
-  useEffect(() => {
-    dispatch(getSettings());
-  }, [page, dispatch]);
-
-  useEffect(() => {
-    if (isEmpty(ADCPPSocket) && !isNil(userSettings.directConnect)) {
-      setADCPPSocket(
-        new AirDCPPSocket({
-          protocol: `${userSettings.directConnect.client.host.protocol}`,
-          hostname: `${userSettings.directConnect.client.host.hostname}`,
-        }),
-      );
-    }
-  }, [userSettings]);
-
-  // destructure props
-  console.log(ADCPPSocket)
-
   // sliding panel init
   const contentForSlidingPanel = {
     CVMatches: {
@@ -147,7 +125,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
       rawFileDetails,
       inferredMetadata,
       sourcedMetadata: { comicvine, locg, comicInfo },
-    },
+    }, userSettings,
   } = data;
 
   // check for the availability of CV metadata
@@ -207,7 +185,13 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
       icon: <i className="fa-solid fa-floppy-disk"></i>,
       name: "Acquisition",
       content: (
-        <AcquisitionPanel query={airDCPPQuery} comicObjectid={_id} key={4} />
+        <AcquisitionPanel
+          query={airDCPPQuery}
+          comicObjectid={_id}
+          comicObject={data.data}
+          userSettings={userSettings}
+          key={4}
+        />
       ),
       shouldShow: true,
     },

src/client/components/ComicDetail/ComicDetailContainer.tsx

@@ -1,13 +1,13 @@
-import { isEmpty, isUndefined } from "lodash";
-import React, { ReactElement, useEffect, useState } from "react";
+import { isEmpty, isNil, isUndefined } from "lodash";
+import React, { ReactElement, useContext, useEffect, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { useParams } from "react-router-dom";
 import { getComicBookDetailById } from "../../actions/comicinfo.actions";
 import { ComicDetail } from "../ComicDetail/ComicDetail";
-import { escapePoundSymbol } from "../../shared/utils/formatting.utils";
 
-import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
 import { getSettings } from "../../actions/settings.actions";
+import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
+import AirDCPPSocket from "../../services/DcppSearchService";
 
 
 export const ComicDetailContainer = (): ReactElement | null => {
@@ -15,12 +15,28 @@ export const ComicDetailContainer = (): ReactElement | null => {
     (state: RootState) => state.comicInfo.comicBookDetail,
   );
   const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(getSettings());
+  }, [dispatch]);
+  const userSettings = useSelector((state: RootState) => state.settings.data);
+  const { ADCPPSocket, setADCPPSocket } = useContext(AirDCPPSocketContext);
+
+  useEffect(() => {
+    if (isEmpty(ADCPPSocket) && !isNil(userSettings.directConnect)) {
+      setADCPPSocket(
+        new AirDCPPSocket({
+          protocol: `${userSettings.directConnect.client.host.protocol}`,
+          hostname: `${userSettings.directConnect.client.host.hostname}`,
+        }),
+      );
+    }
+  }, [userSettings]);
   const { comicObjectId } = useParams<{ comicObjectId: string }>();
   useEffect(() => {
     dispatch(getComicBookDetailById(comicObjectId));
     // dispatch(getSettings());
   }, [dispatch]);
   return !isEmpty(comicBookDetailData) ? (
-    <ComicDetail data={comicBookDetailData} />
+    <ComicDetail data={comicBookDetailData} userSettings={userSettings} />
   ) : null;
 };

src/client/components/Dashboard/Dashboard.tsx

@@ -24,7 +24,7 @@ export const Dashboard = (): ReactElement => {
           limit: 5,
           sort: { updatedAt: "-1" },
         },
-        predicate: { "acquisition.wanted": false },
+        predicate: { "acquisition.source.wanted": false },
         comicStatus: "recent",
       }),
     );
@@ -35,7 +35,7 @@ export const Dashboard = (): ReactElement => {
           limit: 5,
           sort: { updatedAt: "-1" },
         },
-        predicate: { "acquisition.wanted": true },
+        predicate: { "acquisition.source.wanted": true },
         comicStatus: "wanted",
       }),
     );

src/client/components/Dashboard/PullList.tsx

@@ -20,14 +20,15 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
   useEffect(() => {
     dispatch(
       getWeeklyPullList({
-        startDate: "2022-5-1",
+        startDate: "2022-2-11",
         pageSize: "15",
         currentPage: "1",
       }),
     );
   }, []);
   const addToLibrary = useCallback(
-    (locgMetadata) => dispatch(importToDB({ locg: locgMetadata })),
+    (sourceName: string, locgMetadata) =>
+      dispatch(importToDB(sourceName, { locg: locgMetadata })),
     [],
   );
   /*
@@ -144,7 +145,7 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
                   <div className="mt-2">
                     <button
                       className="button is-small is-warning is-light"
-                      onClick={() => addToLibrary(issue)}
+                      onClick={() => addToLibrary("locg", issue)}
                     >
                       <i className="fa-solid fa-plus"></i> Want
                     </button>

src/client/components/Dashboard/RecentlyImported.tsx

@@ -7,7 +7,10 @@ import { isEmpty, isNil, isUndefined, map } from "lodash";
 import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
 import Masonry from "react-masonry-css";
 import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
-import { determineCoverFile } from "../../shared/utils/metadata.utils";
+import {
+  determineCoverFile,
+  determineExternalMetadata,
+} from "../../shared/utils/metadata.utils";
 
 type RecentlyImportedProps = {
   comicBookCovers: any;
@@ -42,6 +45,9 @@ export const RecentlyImported = ({
             _id,
             rawFileDetails,
             sourcedMetadata: { comicvine, comicInfo, locg },
+            acquisition: {
+              source: { name },
+            },
           }) => {
             const consolidatedComicMetadata = {
               rawFileDetails,
@@ -49,10 +55,14 @@ export const RecentlyImported = ({
               comicInfo,
               locg,
             };
-
             const { issueName, url } = determineCoverFile(
               consolidatedComicMetadata,
             );
+            const { issue, coverURL, icon } = determineExternalMetadata(name, {
+              comicvine,
+              comicInfo,
+              locg,
+            });
 
             const isComicBookMetadataAvailable =
               !isUndefined(comicvine) &&
@@ -73,11 +83,6 @@ export const RecentlyImported = ({
                   title={issueName ? titleElement : null}
                 >
                   <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  */}
                     {isNil(rawFileDetails) && (
                       <span className="icon custom-icon is-small has-text-danger mr-2">
@@ -108,17 +113,19 @@ export const RecentlyImported = ({
                     ) : null}
                   </div>
                 </Card>
-                {/* original reference */}
-                {!isUndefined(comicvine.image) ? (
-                  <Card
-                    orientation="horizontal"
-                    hasDetails
-                    imageUrl={comicvine.image.icon_url}
-                  >
+                {/* metadata card */}
+                {!isNil(name) ? (
+                  <Card orientation="horizontal" hasDetails imageUrl={coverURL}>
                     <dd className="is-size-9">
-                      <dl>{ellipsize(comicvine.volumeInformation.name, 22)}</dl>
                       <dl>
-                        <span className="small-tag mt-1">{comicvine.id}</span>
+                        <span className="icon custom-icon">
+                          <img src={`/img/${icon}`} />
+                        </span>
+                      </dl>
+                      <dl>
+                        <span className="small-tag">
+                          {ellipsize(issue, 15)}
+                        </span>
                       </dl>
                     </dd>
                   </Card>

src/client/components/Library/Library.tsx

@@ -91,7 +91,10 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
                 : row._source.sourcedMetadata,
             Cell: ({ value }) => {
               // If no CV info available, use raw file metadata
-              if (!isUndefined(value.rawFileDetails)) {
+              if (
+                !isUndefined(value.rawFileDetails) &&
+                !isEmpty(value.rawFileDetails.cover)
+              ) {
                 return <RawFileDetails data={value} />;
               }
               // If CV metadata available, show it
@@ -134,7 +137,7 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
           },
           {
             Header: "Something",
-            accessor: "_source.acquisition.wanted",
+            accessor: "_source.acquisition.source.wanted",
             Cell: (props) => {
               return <WantedStatus value={props.cell.value.toString()} />;
             },

src/client/components/PullList/PullList.tsx

@@ -14,7 +14,7 @@ export const PullList = (): ReactElement => {
   useEffect(() => {
     dispatch(
       getWeeklyPullList({
-        startDate: "2022-5-15",
+        startDate: "2022-6-1",
         pageSize: "100",
         currentPage: "1",
       }),

src/client/components/Search.tsx

@@ -37,7 +37,8 @@ export const Search = ({}: ISearchProps): ReactElement => {
   );
 
   const addToLibrary = useCallback(
-    (comicData) => dispatch(importToDB({ comicvine: comicData })),
+    (sourceName: string, comicData) =>
+      dispatch(importToDB(sourceName, { comicvine: comicData })),
     [],
   );
 
@@ -108,7 +109,7 @@ export const Search = ({}: ISearchProps): ReactElement => {
                       ></p>
                       <button
                         className="button is-success is-light is-outlined"
-                        onClick={() => addToLibrary(result)}
+                        onClick={() => addToLibrary("comicvine", result)}
                       >
                         Add to Library
                       </button>