🚛 Massive refactor of dashboard

src/client/actions/airdcpp.actions.tsx

@@ -117,6 +117,7 @@ export const downloadAirDCPPItem =
     instanceId: string,
     resultId: string,
     comicObjectId: string,
+    comicObject: any,
     ADCPPSocket: any,
     credentials: any,
   ): void =>
@@ -129,6 +130,7 @@ export const downloadAirDCPPItem =
           true,
         );
       }
+      console.log(comicObject)
       let bundleDBImportResult = {};
       const downloadResult = await ADCPPSocket.post(
         `search/${instanceId}/results/${resultId}/download`,
@@ -143,7 +145,7 @@ export const downloadAirDCPPItem =
             dispatch({
               type: LS_SINGLE_IMPORT,
               meta: { remote: true },
-              data: { downloadStatus, comicObjectId },
+              data: { downloadStatus, comicObjectId, comicObject },
             });
           }
           count += 1;
@@ -160,7 +162,7 @@ export const downloadAirDCPPItem =
           (item) => item.id,
         );
       }
-
+      console.log(comicObjectId)
       if (!isNil(downloadResult)) {
         bundleDBImportResult = await axios({
           method: "POST",

src/client/actions/fileops.actions.tsx

@@ -132,9 +132,12 @@ export const getComicBooks = (options) => async (dispatch) => {
  * @returns Nothing.
  * @param payload
  */
-export const importToDB = (payload?: any) => (dispatch) => {
+export const importToDB = (sourceName: string, payload?: any) => (dispatch) => {
   try {
     const comicBookMetadata = {
+      rawFileDetails: {
+        name: "",
+      },
       importStatus: {
         isImported: true,
         tagged: false,
@@ -143,7 +146,7 @@ export const importToDB = (payload?: any) => (dispatch) => {
         },
       },
       sourcedMetadata: payload || null,
-      acquisition: { wanted: true },
+      acquisition: { source: { wanted: true, name: sourceName } },
     };
     dispatch({
       type: IMS_CV_METADATA_IMPORT_CALL_IN_PROGRESS,
@@ -153,7 +156,7 @@ export const importToDB = (payload?: any) => (dispatch) => {
         url: `${LIBRARY_SERVICE_BASE_URI}/rawImportToDb`,
         method: "POST",
         data: comicBookMetadata,
-        transformResponse: (r: string) => JSON.parse(r),
+        // transformResponse: (r: string) => JSON.parse(r),
       })
       .then((response) => {
         const { data } = response;

src/client/assets/img/locglogo.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!-- Generated by Pixelmator Pro 2.4.3 -->
 <svg width="624" height="561" viewBox="0 0 624 561" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <text id="LCG" xml:space="preserve"><tspan x="57" y="382" font-family="DIN Alternate" font-size="288" font-weight="700" fill="#ff4300" letter-spacing="-2.88" xml:space="preserve">L</tspan><tspan font-family="DIN Alternate" font-size="288" font-weight="700" fill="#ff4300" letter-spacing="11.52" xml:space="preserve">CG</tspan></text>
+    <text id="LCG" xml:space="preserve"><tspan x="57" y="282" font-family="DIN Alternate" font-size="288" font-weight="700" fill="#ff4300" letter-spacing="-2.88" xml:space="preserve">L</tspan><tspan font-family="DIN Alternate" font-size="288" font-weight="700" fill="#ff4300" letter-spacing="11.52" xml:space="preserve">CG</tspan></text>
-    <path id="Rounded-Rectangle" fill="#ff4300" fill-rule="evenodd" stroke="none" d="M 96 422 C 84.954399 422 76 430.954407 76 442 L 76 446 C 76 457.045593 84.954399 466 96 466 L 193 466 C 204.045593 466 213 457.045593 213 446 L 213 442 C 213 430.954407 204.045593 422 193 422 Z"/>
+    <path id="Rounded-Rectangle" fill="#ff4300" fill-rule="evenodd" stroke="none" d="M 96 322 C 84.954399 322 76 330.954407 76 342 L 76 346 C 76 357.045593 84.954399 366 96 366 L 193 366 C 204.045593 366 213 357.045593 213 346 L 213 342 C 213 330.954407 204.045593 322 193 322 Z"/>
-    <path id="Rounded-Rectangle-copy-2" fill="#ff4300" fill-rule="evenodd" stroke="none" d="M 425 422 C 413.954407 422 405 430.954407 405 442 L 405 446 C 405 457.045593 413.954407 466 425 466 L 522 466 C 533.045593 466 542 457.045593 542 446 L 542 442 C 542 430.954407 533.045593 422 522 422 Z"/>
+    <path id="Rounded-Rectangle-copy-2" fill="#ff4300" fill-rule="evenodd" stroke="none" d="M 425 322 C 413.954407 322 405 330.954407 405 342 L 405 346 C 405 357.045593 413.954407 366 425 366 L 522 366 C 533.045593 366 542 357.045593 542 346 L 542 342 C 542 330.954407 533.045593 322 522 322 Z"/>
 </svg>

src/client/assets/scss/App.scss

@@ -245,6 +245,7 @@ pre {
       flex: 1 1 auto;
       display: flex;
       .card-image {
+        // leaving this here... for posterity
         img.image {
           border-top-left-radius: 8px;
           border-bottom-left-radius: 8px;
@@ -255,6 +256,18 @@ pre {
           object-fit: cover;
           flex: 1 1 auto;
         }
+        img.cropped-image {
+          width: 70px;
+          border-top-left-radius: 8px;
+          border-bottom-left-radius: 8px;
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+           height: 64px; 
+           object-fit: cover;
+           object-position: 100% 0;
+          //  flex: 1 1 auto;
+
+        }
       }
     }
     .card-content {

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 { isEmpty, isNil, isUndefined } from "lodash";
-import React, { ReactElement, useEffect, useState } from "react";
+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 */}
+                {/* metadata card */}
-                {!isUndefined(comicvine.image) ? (
+                {!isNil(name) ? (
-                  <Card
+                  <Card orientation="horizontal" hasDetails imageUrl={coverURL}>
-                    orientation="horizontal"
-                    hasDetails
-                    imageUrl={comicvine.image.icon_url}
-                  >
                     <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>

src/client/reducers/comicinfo.reducer.ts

@@ -54,7 +54,6 @@ function comicinfoReducer(state = initialState, action) {
         IMS_inProgress: false,
       };
     case IMS_COMIC_BOOKS_DB_OBJECTS_FETCHED:
-      console.log(action);
       return {
         ...state,
         comicBooksDetails: action.comicBooks,
@@ -110,7 +109,6 @@ function comicinfoReducer(state = initialState, action) {
         ...state,
       };
     case CV_WEEKLY_PULLLIST_FETCHED: {
-      console.log(action.data);
       return {
         ...state,
         inProgress: false,
@@ -123,7 +121,6 @@ function comicinfoReducer(state = initialState, action) {
         ...state,
       };
     case LIBRARY_STATISTICS_FETCHED:
-      console.log(action);
       return {
         ...state,
         inProgress: false,

src/client/reducers/fileops.reducer.ts

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

src/client/shared/utils/metadata.utils.ts

@@ -58,3 +58,25 @@ export const determineCoverFile = (data) => {
     return result[0];
   }
 };
+
+export const determineExternalMetadata = (metadataSource, source) => {
+  switch (metadataSource) {
+    case "comicvine":
+      return {
+        coverURL: source.comicvine.image.small_url,
+        issue: source.comicvine.name,
+        icon: "cvlogo.svg",
+      };
+    case "locg":
+      return {
+        coverURL: source.locg.cover,
+        issue: source.locg.name,
+        icon: "locglogo.svg",
+      };
+    case undefined:
+      return {};
+
+    default:
+      break;
+  }
+};