🏗️ Refactor to support DC++ and socket.io integration

This refactor covers the following workflows:

1. Adding a comic from LOCG or ComicVine adds it to the wanted list
2. Downloading that comic from DC++ correctly adds download metadata to the corresponding comic object in mongo
3. Successful download triggers automatic import to library and cover extraction, metadata application

src/client/actions/fileops.actions.tsx

@@ -60,15 +60,6 @@ export async function walkFolder(path: string): Promise<Array<IFolderData>> {
  * @return the comic book metadata
  */
 export const fetchComicBookMetadata = () => async (dispatch) => {
-  const extractionOptions = {
-    extractTarget: "cover",
-    targetExtractionFolder: "./userdata/covers",
-    extractionMode: "bulk",
-    paginationOptions: {
-      pageLimit: 25,
-      page: 1,
-    },
-  };
   dispatch({
     type: LS_IMPORT_CALL_IN_PROGRESS,
   });
@@ -86,7 +77,7 @@ export const fetchComicBookMetadata = () => async (dispatch) => {
   dispatch({
     type: LS_IMPORT,
     meta: { remote: true },
-    data: { extractionOptions },
+    data: {},
   });
 };
 export const toggleImportQueueStatus = (options) => async (dispatch) => {
@@ -136,21 +127,24 @@ export const getComicBooks = (options) => async (dispatch) => {
  * @returns Nothing.
  * @param payload
  */
-export const importToDB = (sourceName: string, payload?: any) => (dispatch) => {
+export const importToDB = (sourceName: string, metadata?: any) => (dispatch) => {
   try {
     const comicBookMetadata = {
-      rawFileDetails: {
+      importType: "new",
-        name: "",
+      payload: {
-      },
+        rawFileDetails: {
-      importStatus: {
+          name: "",
-        isImported: true,
-        tagged: false,
-        matchedResult: {
-          score: "0",
         },
-      },
+        importStatus: {
-      sourcedMetadata: payload || null,
+          isImported: true,
-      acquisition: { source: { wanted: true, name: sourceName } },
+          tagged: false,
+          matchedResult: {
+            score: "0",
+          },
+        },
+        sourcedMetadata: metadata || null,
+        acquisition: { source: { wanted: true, name: sourceName } },
+      }
     };
     dispatch({
       type: IMS_CV_METADATA_IMPORT_CALL_IN_PROGRESS,
@@ -261,22 +255,22 @@ export const fetchComicVineMatches =
  */
 export const extractComicArchive =
   (path: string, options: any): any =>
-  async (dispatch) => {
+    async (dispatch) => {
-    dispatch({
+      dispatch({
-      type: IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS,
+        type: IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS,
-    });
+      });
-    await axios({
+      await axios({
-      method: "POST",
+        method: "POST",
-      url: `${LIBRARY_SERVICE_BASE_URI}/uncompressFullArchive`,
+        url: `${LIBRARY_SERVICE_BASE_URI}/uncompressFullArchive`,
-      headers: {
+        headers: {
-        "Content-Type": "application/json; charset=utf-8",
+          "Content-Type": "application/json; charset=utf-8",
-      },
+        },
-      data: {
+        data: {
-        filePath: path,
+          filePath: path,
-        options,
+          options,
-      },
+        },
-    });
+      });
-  };
+    };
 
 /**
  * Description

src/client/components/App.tsx

@@ -18,18 +18,22 @@ import {
   AirDCPPSocketContext,
 } from "../context/AirDCPPSocket";
 import { isEmpty, isUndefined } from "lodash";
-import { AIRDCPP_DOWNLOAD_PROGRESS_TICK } from "../constants/action-types";
+import {
-import { useDispatch } from "react-redux";
+  AIRDCPP_DOWNLOAD_PROGRESS_TICK,
+  LS_SINGLE_IMPORT,
+} from "../constants/action-types";
+import { useDispatch, useSelector } from "react-redux";
 
 /**
  * Method that initializes an AirDC++ socket connection
  * 1. Initializes event listeners for download init, tick and complete events
- * 2. Handles errors in case the connection to AirDC++ is not established or terminated 
+ * 2. Handles errors in case the connection to AirDC++ is not established or terminated
- * @returns void 
+ * @returns void
  */
 const AirDCPPSocketComponent = (): ReactElement => {
   const airDCPPConfiguration = useContext(AirDCPPSocketContext);
   const dispatch = useDispatch();
+
   useEffect(() => {
     const initializeAirDCPPEventListeners = async () => {
       if (
@@ -42,9 +46,7 @@ const AirDCPPSocketComponent = (): ReactElement => {
           "queue_bundle_added",
           async (data) => {
             console.log("JEMEN:", data);
-
+          },
-
-          }
         );
         // download tick listener
         await airDCPPConfiguration.airDCPPState.socket.addListener(
@@ -62,9 +64,18 @@ const AirDCPPSocketComponent = (): ReactElement => {
           `queue`,
           "queue_bundle_status",
           async (bundleData) => {
+            let count = 0;
             if (bundleData.status.completed && bundleData.status.downloaded) {
               // dispatch the action for raw import, with the metadata
-              console.log("IM THE MAN UP IN THIS")
+              if (count < 1) {
+                console.log(`[AirDCPP]: Download complete.`);
+                dispatch({
+                  type: LS_SINGLE_IMPORT,
+                  meta: { remote: true },
+                  data: bundleData,
+                });
+                count += 1;
+              }
             }
           },
         );
@@ -92,7 +103,10 @@ export const App = (): ReactElement => {
         <Routes>
           <Route path="/" element={<Dashboard />} />
           <Route path="/import" element={<Import path={"./comics"} />} />
-          <Route path="/library" element={<TabulatedContentContainer category="library" />} />
+          <Route
+            path="/library"
+            element={<TabulatedContentContainer category="library" />}
+          />
           <Route path="/library-grid" element={<LibraryGrid />} />
           <Route path="/downloads" element={<Downloads data={{}} />} />
           <Route path="/search" element={<Search />} />
@@ -105,9 +119,18 @@ export const App = (): ReactElement => {
             element={<VolumeDetail />}
           />
           <Route path="/settings" element={<Settings />} />
-          <Route path="/pull-list/all" element={<TabulatedContentContainer category="pullList" />} />
+          <Route
-          <Route path="/wanted/all" element={<TabulatedContentContainer category="wanted" />} />
+            path="/pull-list/all"
-          <Route path="/volumes/all" element={<TabulatedContentContainer category="volumes" />} />
+            element={<TabulatedContentContainer category="pullList" />}
+          />
+          <Route
+            path="/wanted/all"
+            element={<TabulatedContentContainer category="wanted" />}
+          />
+          <Route
+            path="/volumes/all"
+            element={<TabulatedContentContainer category="volumes" />}
+          />
         </Routes>
       </div>
     </AirDCPPSocketContextProvider>

src/client/components/ComicDetail/AcquisitionPanel.tsx

@@ -16,6 +16,7 @@ import ellipsize from "ellipsize";
 import { Form, Field } from "react-final-form";
 import { isEmpty, isNil, map } from "lodash";
 import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
+
 interface IAcquisitionPanelProps {
   query: any;
   comicObjectId: any;
@@ -96,9 +97,12 @@ export const AcquisitionPanel = (
     (searchInstanceId, resultId, name, size, type) => {
       dispatch(
         downloadAirDCPPItem(
-          searchInstanceId, resultId,
+          searchInstanceId,
+          resultId,
           props.comicObjectId,
-          name, size, type,
+          name,
+          size,
+          type,
           airDCPPConfiguration.airDCPPState.socket,
           {
             username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`,

src/client/components/ComicDetail/RawFileDetails.tsx

@@ -38,7 +38,7 @@ export const RawFileDetails = (props): ReactElement => {
           </dd>
         </dl>
       </div>
-      <div className="content comic-detail raw-file-details mt-3 column is-one-third">
+      <div className="content comic-detail raw-file-details mt-3 column is-three-fifths">
         <dl>
           {/* inferred metadata */}
           <dt>Inferred Issue Metadata</dt>

src/client/components/Dashboard/Dashboard.tsx

@@ -11,7 +11,7 @@ import {
   getComicBooks,
 } from "../../actions/fileops.actions";
 import { getLibraryStatistics } from "../../actions/comicinfo.actions";
-import { isEmpty } from "lodash";
+import { isEmpty, isNil } from "lodash";
 
 export const Dashboard = (): ReactElement => {
   const dispatch = useDispatch();
@@ -43,7 +43,7 @@ export const Dashboard = (): ReactElement => {
   }, []);
 
   const recentComics = useSelector(
-    (state: RootState) => state.fileOps.recentComics,
+    (state: RootState) => state.fileOps.recentComics
   );
   const wantedComics = useSelector(
     (state: RootState) => state.fileOps.wantedComics,
@@ -60,7 +60,7 @@ export const Dashboard = (): ReactElement => {
       <section className="section">
         <h1 className="title">Dashboard</h1>
 
-        {!isEmpty(recentComics) && !isEmpty(recentComics.docs) ? (
+        {!isEmpty(recentComics) ? (
           <>
             {/* Pull List */}
             <PullList issues={recentComics} />
@@ -74,9 +74,8 @@ export const Dashboard = (): ReactElement => {
               <WantedComicsList comics={wantedComics} />
             )}
             {/* Recent imports */}
-            {!isEmpty(recentComics) && (
               <RecentlyImported comicBookCovers={recentComics} />
-            )}
+            
             {/* Volumes */}
             {!isEmpty(volumeGroups) && (
               <VolumeGroups volumeGroups={volumeGroups} />

src/client/components/Dashboard/PullList.tsx

@@ -20,7 +20,7 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
   useEffect(() => {
     dispatch(
       getWeeklyPullList({
-        startDate: "2022-11-15",
+        startDate: "2022-12-25",
         pageSize: "15",
         currentPage: "1",
       }),

src/client/components/Dashboard/RecentlyImported.tsx

@@ -24,7 +24,6 @@ export const RecentlyImported = ({
     700: 2,
     600: 2,
   };
-
   return (
     <>
       <div className="content mt-5">
@@ -41,7 +40,7 @@ export const RecentlyImported = ({
         columnClassName="recent-comics-column"
       >
         {map(
-          comicBookCovers.docs,
+          comicBookCovers,
           (
             {
               _id,
@@ -53,6 +52,7 @@ export const RecentlyImported = ({
             },
             idx,
           ) => {
+            console.log(comicvine);
             const { issueName, url } = determineCoverFile({
               rawFileDetails,
               comicvine,
@@ -64,7 +64,7 @@ export const RecentlyImported = ({
               comicInfo,
               locg,
             });
-
+            console.log(name);
             const isComicBookMetadataAvailable =
               !isUndefined(comicvine) &&
               !isUndefined(comicvine.volumeInformation);
@@ -123,7 +123,7 @@ export const RecentlyImported = ({
                   </div>
                 </Card>
                 {/* metadata card */}
-                {!isNil(name) ? (
+                {!isNil(name) && (
                   <Card orientation="horizontal" hasDetails imageUrl={coverURL}>
                     <dd className="is-size-9">
                       <dl>
@@ -138,7 +138,7 @@ export const RecentlyImported = ({
                       </dl>
                     </dd>
                   </Card>
-                ) : null}
+                )}
               </React.Fragment>
             );
           },

src/client/reducers/fileops.reducer.ts

@@ -88,7 +88,7 @@ function fileOpsReducer(state = initialState, action) {
     case IMS_RECENT_COMICS_FETCHED:
       return {
         ...state,
-        recentComics: action.data,
+        recentComics: action.data.docs,
       };
     case IMS_WANTED_COMICS_FETCHED:
       return {
@@ -153,9 +153,13 @@ function fileOpsReducer(state = initialState, action) {
     }
     case LS_COVER_EXTRACTED: {
       console.log("BASH", action);
+      if(state.recentComics.length === 5) {
+        state.recentComics.pop();
+      }
       return {
         ...state,
         librarySearchResultCount: state.librarySearchResultCount + 1,
+        recentComics: [...state.recentComics, action.result.data.importResult]
       };
     }
 
@@ -172,7 +176,7 @@ function fileOpsReducer(state = initialState, action) {
           return {
             ...state,
             extractedComicBookArchive: {
-              reading: comicBookPages
+              reading: comicBookPages,
             },
             comicBookExtractionInProgress: false,
           };
@@ -181,12 +185,11 @@ function fileOpsReducer(state = initialState, action) {
           return {
             ...state,
             extractedComicBookArchive: {
-              analysis: comicBookPages
+              analysis: comicBookPages,
             },
             comicBookExtractionInProgress: false,
           };
       }
-
     }
     case LS_QUEUE_DRAINED: {
       console.log("drained", action);

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

@@ -67,7 +67,10 @@ export const determineCoverFile = (data) => {
   }
 };
 
-export const determineExternalMetadata = (metadataSource, source) => {
+export const determineExternalMetadata = (
+  metadataSource: string,
+  source: any
+) => {
   switch (metadataSource) {
     case "comicvine":
       return {

yarn.lock

@@ -15607,7 +15607,7 @@ react-transition-group@4.4.2, react-transition-group@^4.3.0:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react@^18.1.0:
+react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==