🚛 Massive refactor of dashboard

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;
 };