🔧 Various AirDCPPSocketContext-related fixes

src/client/components/App.tsx

@@ -17,65 +17,18 @@ import Downloads from "./Downloads/Downloads";
 import { Routes, Route } from "react-router-dom";
 import Navbar from "./Navbar";
 import "../assets/scss/App.scss";
-import Notifications from "react-notification-system-redux";
 import {
   AirDCPPSocketContextProvider,
   AirDCPPSocketContext,
 } from "../context/AirDCPPSocket";
-import { isNil } from "lodash";
-
-//Optional styling
-const style = {
-  Containers: {
-    DefaultStyle: {
-      fontFamily: "inherit",
-      position: "fixed",
-      padding: "0 10px 10px 10px",
-      zIndex: 9998,
-      WebkitBoxSizing: "border-box",
-      MozBoxSizing: "border-box",
-      boxSizing: "border-box",
-      height: "auto",
-    },
-    tr: {
-      top: "40px",
-      right: "10px",
-    },
-  },
-  Title: {
-    DefaultStyle: {
-      fontSize: "14px",
-      margin: "0 0 5px 0",
-      padding: 0,
-      fontWeight: "bold",
-    },
-
-    success: {
-      color: "hsl(141, 71%, 48%)",
-    },
-  },
-  NotificationItem: {
-    // Override the notification item
-    success: {
-      // Applied to every notification, regardless of the notification level
-      borderTop: "none",
-      backgroundColor: "#FFF",
-      borderRadius: "0.4rem",
-      WebkitBoxShadow: "-7px 11px 25px -9px rgba(0, 0, 0, 0.3)",
-      MozBoxShadow: "-7px 11px 25px -9px rgba(0, 0, 0, 0.3)",
-      boxShadow: "-7px 11px 25px -9px rgba(0, 0, 0, 0.3)",
-    },
-  },
-};
-
-export const App = (): ReactElement => {
-  const notifications = useSelector((state: RootState) => state.notifications);
+import { isEmpty, isNil, isUndefined } from "lodash";
 
+const AirDCPPSocketComponent = (): ReactElement => {
   const airDCPPConfiguration = useContext(AirDCPPSocketContext);
-  const { AirDCPPSocket } = airDCPPConfiguration;
+  const { AirDCPPSocket, settings } = airDCPPConfiguration;
   useEffect(() => {
-    const addQueueListener = async () => {
-      if (!isNil(AirDCPPSocket)) {
+    const foo = async () => {
+      if (!isUndefined(AirDCPPSocket)) {
         await AirDCPPSocket.addListener(
           "queue",
           "queue_bundle_added",
@@ -86,18 +39,16 @@ export const App = (): ReactElement => {
         );
       }
     };
-    addQueueListener();
-  }, [AirDCPPSocket]);
+    foo();
+  }, [settings]);
+  return <></>;
+};
+export const App = (): ReactElement => {
   return (
     <AirDCPPSocketContextProvider>
       <div>
+        <AirDCPPSocketComponent />
         <Navbar />
-        <Notifications
-          notifications={notifications}
-          style={style}
-          newOnTop={true}
-          allowHTML={true}
-        />
         <Routes>
           <Route path="/" element={<Dashboard />} />
           <Route path="/import" element={<Import path={"./comics"} />} />

src/client/components/ComicDetail/AcquisitionPanel.tsx

@@ -49,7 +49,7 @@ export const AcquisitionPanel = (
   const { AirDCPPSocket, settings } = airDCPPConfiguration;
   const dispatch = useDispatch();
   const [dcppQuery, setDcppQuery] = useState({});
-  console.log(airDCPPConfiguration)
+
   useEffect(() => {
     if (!isNil(settings)) {
       // AirDC++ search query

src/client/components/ComicDetail/EditMetadataPanel.tsx

@@ -3,17 +3,13 @@ import { useSelector, useDispatch } from "react-redux";
 import { Form, Field } from "react-final-form";
 import arrayMutators from "final-form-arrays";
 import { FieldArray } from "react-final-form-arrays";
-import DatePicker from "react-datepicker";
 import AsyncSelectPaginate from "./AsyncSelectPaginate/AsyncSelectPaginate";
 import TextareaAutosize from "react-textarea-autosize";
 
-import "react-datepicker/dist/react-datepicker.css";
 export const EditMetadataPanel = (props): ReactElement => {
   const validate = async () => {};
   const onSubmit = async () => {};
-  const DayPickerAdapter = ({ input, ...rest }) => {
-    return <DatePicker {...input} {...rest} placeholderText={"Cover Date"} />;
-  };
+ 
   const AsyncSelectPaginateAdapter = ({ input, ...rest }) => {
     return (
       <AsyncSelectPaginate
@@ -101,7 +97,7 @@ export const EditMetadataPanel = (props): ReactElement => {
                   <p className="control">
                     <Field
                       name="issue_year"
-                      component={DayPickerAdapter}
+                      component="input"
                       className="input"
                     />
                   </p>

src/client/components/Dashboard/RecentlyImported.tsx

@@ -6,7 +6,6 @@ import { escapePoundSymbol } from "../../shared/utils/formatting.utils";
 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,
   determineExternalMetadata,
@@ -43,14 +42,17 @@ export const RecentlyImported = ({
       >
         {map(
           comicBookCovers.docs,
-          ({
-            _id,
-            rawFileDetails,
-            sourcedMetadata: { comicvine, comicInfo, locg },
-            acquisition: {
-              source: { name },
+          (
+            {
+              _id,
+              rawFileDetails,
+              sourcedMetadata: { comicvine, comicInfo, locg },
+              acquisition: {
+                source: { name },
+              },
             },
-          }) => {
+            idx,
+          ) => {
             const { issueName, url } = determineCoverFile({
               rawFileDetails,
               comicvine,
@@ -73,9 +75,8 @@ export const RecentlyImported = ({
               </Link>
             );
             return (
-              <>
+              <React.Fragment key={_id}>
                 <Card
-                  key={_id}
                   orientation={"vertical"}
                   imageUrl={url}
                   hasDetails
@@ -138,7 +139,7 @@ export const RecentlyImported = ({
                     </dd>
                   </Card>
                 ) : null}
-              </>
+              </React.Fragment>
             );
           },
         )}

src/client/components/Import.tsx

@@ -4,7 +4,6 @@ import {
   fetchComicBookMetadata,
   toggleImportQueueStatus,
 } from "../actions/fileops.actions";
-import DynamicList, { createCache } from "react-window-dynamic-list";
 import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
 import Loader from "react-loader-spinner";
 

src/client/context/AirDCPPSocket.tsx

@@ -1,40 +1,53 @@
 import axios from "axios";
-import React, { createContext, useEffect, useState } from "react";
+import React, { createContext, useEffect, useMemo, useState } from "react";
 import { SETTINGS_SERVICE_BASE_URI } from "../constants/endpoints";
 import AirDCPPSocket from "../services/DcppSearchService";
 
+/**
+ * Component for setting up and sharing the AirDC++ socket context.
+ *
+ * @component
+ * @example
+ * const age = 21
+ * const name = 'Jitendra Nirnejak'
+ * return (
+ *   <User age={age} name={name} />
+ * )
+ */
+
 const AirDCPPSocketContext = createContext({});
 const AirDCPPSocketContextProvider = ({ children }) => {
   const [airDCPPConfiguration, setValue] = useState({});
+
   useEffect(() => {
     const initializeAirDCPPSocket = () => {
       axios({
         url: `${SETTINGS_SERVICE_BASE_URI}/getSettings`,
         method: "POST",
         data: "",
-      }).then(async (data) => {
-        const { directConnect } = data.data;
-        const initializedAirDCPPSocket = new AirDCPPSocket({
-          protocol: `${directConnect.client.host.protocol}`,
-          hostname: `${directConnect.client.host.hostname}`,
-        });
-        await initializedAirDCPPSocket.connect(
-          `${directConnect.client.host.username}`,
-          `${directConnect.client.host.password}`,
-          true,
-        );
-        setValue({
-          AirDCPPSocket: initializedAirDCPPSocket,
-          settings: data.data,
-        });
-      });
+      })
+        .then(async (data) => {
+          const { directConnect } = data.data;
+          const initializedAirDCPPSocket = new AirDCPPSocket({
+            protocol: `${directConnect.client.host.protocol}`,
+            hostname: `${directConnect.client.host.hostname}`,
+          });
+
+          await initializedAirDCPPSocket.connect(
+            `${directConnect.client.host.username}`,
+            `${directConnect.client.host.password}`,
+            true,
+          );
+          setValue({
+            AirDCPPSocket: initializedAirDCPPSocket,
+            settings: data.data,
+          });
+        })
+        .catch((error) => console.log(error));
     };
     initializeAirDCPPSocket();
   }, []);
-
   // the Provider gives access to the context to its children
-
-  console.log(airDCPPConfiguration);
   return (
     <AirDCPPSocketContext.Provider value={airDCPPConfiguration}>
       {children}

src/client/reducers/index.js

@@ -2,10 +2,8 @@ import comicinfoReducer from "../reducers/comicinfo.reducer";
 import fileOpsReducer from "../reducers/fileops.reducer";
 import airdcppReducer from "../reducers/airdcpp.reducer";
 import settingsReducer from "../reducers/settings.reducer";
-import { reducer as notifications } from "react-notification-system-redux";
 
 export const reducers = {
-  notifications,
   comicInfo: comicinfoReducer,
   fileOps: fileOpsReducer,
   airdcpp: airdcppReducer,

src/client/store/index.ts

@@ -1,6 +1,6 @@
 import { createStore, combineReducers, applyMiddleware } from "redux";
 import { createHashHistory } from "history";
-import { composeWithDevTools } from "redux-devtools-extension";
+import { composeWithDevTools } from "@redux-devtools/extension";
 import thunk from "redux-thunk";
 import { createReduxHistoryContext } from "redux-first-history";
 import { reducers } from "../reducers/index";