🔧 Various AirDCPPSocketContext-related fixes

.babelrc

@@ -5,7 +5,6 @@
     "@babel/preset-typescript"
   ],
   "plugins": [
-    "react-hot-loader/babel",
     "@babel/transform-runtime",
     "@babel/plugin-proposal-class-properties",
     "@babel/plugin-syntax-top-level-await"

.gitignore

@@ -17,3 +17,4 @@ environment.list
 .env
 src/client/assets/img/missing-file.pxd
 *.pxd
+.parcel-cache

jsdoc.json

@@ -1,7 +1,15 @@
 {
-  "tags": { "allowUnknownTags": true },
+  "tags": {
+    "allowUnknownTags": true,
+    "dictionaries": [
+      "jsdoc",
+      "closure"
+    ]
+  },
   "source": {
-    "include": ["./src/"],
+    "include": [
+      "./src/"
+    ],
     "includePattern": "\\.(jsx|js|ts|tsx)$"
   },
   "plugins": [
@@ -10,7 +18,11 @@
     "plugins/markdown",
     "node_modules/better-docs/typescript"
   ],
-  "templates": { "better-docs": { "name": "My React components" } },
+  "templates": {
+    "better-docs": {
+      "name": "ThreeTwo UI components"
+    }
+  },
   "opts": {
     "destination": "docs/",
     "readme": "README.md",
@@ -19,4 +31,4 @@
     "verbose": true,
     "template": "node_modules/better-docs"
   }
-}
+}

package.json

@@ -21,6 +21,7 @@
     "@dnd-kit/core": "^4.0.0",
     "@dnd-kit/sortable": "^5.0.0",
     "@fortawesome/fontawesome-free": "^6.1.1",
+    "@redux-devtools/extension": "^3.2.2",
     "@types/mime-types": "^2.1.0",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.2",
@@ -33,12 +34,12 @@
     "array-sort-by": "^1.2.1",
     "axios-simple-cache-adapter": "^1.1.0",
     "babel-polyfill": "^6.26.0",
-    "better-docs": "^2.3.2",
     "comlink-loader": "^2.0.0",
     "compromise": "^13.11.3",
     "compromise-dates": "^2.2.1",
     "compromise-numbers": "^1.4.0",
     "compromise-sentences": "^0.3.0",
+    "date-fns": "^2.28.0",
     "dayjs": "^1.10.6",
     "ellipsize": "^0.1.0",
     "express": "^4.17.1",
@@ -47,42 +48,37 @@
     "final-form": "^4.20.2",
     "final-form-arrays": "^3.0.2",
     "html-to-text": "^8.1.0",
-    "jsdoc": "^3.6.7",
     "opds-extra": "^3.0.9",
     "pretty-bytes": "^5.6.0",
     "react": "^18.1.0",
-    "react-collapsible": "^2.8.3",
+    "react-collapsible": "^2.9.0",
     "react-comic-viewer": "^0.3.5",
-    "react-datepicker": "^4.5.0",
+    "react-day-picker": "^8.0.6",
     "react-dom": "^18.1.0",
     "react-fast-compare": "^3.2.0",
     "react-final-form": "^6.5.3",
     "react-final-form-arrays": "^3.1.3",
-    "react-hot-loader": "^4.13.0",
     "react-loader-spinner": "^4.0.0",
     "react-masonry-css": "^1.0.16",
     "react-modal": "^3.15.1",
-    "react-notification-system": "^0.4.0",
-    "react-notification-system-redux": "^2.0.1",
     "react-redux": "^7.2.6",
     "react-router": "^6.2.2",
     "react-router-dom": "^6.2.2",
     "react-select": "^5.3.2",
     "react-select-async-paginate": "^0.6.1",
-    "react-slick": "^0.28.1",
+    "react-slick": "^0.29.0",
-    "react-sliding-pane": "^7.0.0",
+    "react-sliding-pane": "^7.1.0",
     "react-stickynode": "^4.0.0",
-    "react-table": "^7.7.0",
+    "react-table": "^7.8.0",
-    "react-textarea-autosize": "^8.3.3",
+    "react-textarea-autosize": "^8.3.4",
-    "react-window-dynamic-list": "^2.3.5",
+    "reapop": "^4.0.5",
-    "redux-devtools-extension": "^2.13.9",
+    "redux-first-history": "^5.0.9",
-    "redux-first-history": "^5.0.8",
     "redux-socket.io-middleware": "^1.0.4",
     "redux-thunk": "^2.4.1",
     "sharp": "^0.30.5",
     "slick-carousel": "^1.8.1",
     "socket.io-client": "^4.3.2",
-    "styled-components": "^5.3.3",
+    "styled-components": "^5.3.5",
     "threetwo-ui-typings": "^1.0.14",
     "voca": "^1.4.0",
     "websocket": "^1.0.34",
@@ -98,6 +94,7 @@
     "@babel/preset-env": "^7.13.10",
     "@babel/preset-react": "^7.12.13",
     "@babel/preset-typescript": "^7.13.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
     "@teamsupercell/typings-for-css-modules-loader": "^2.5.1",
     "@tsconfig/node14": "^1.0.0",
     "@types/express": "^4.17.8",
@@ -148,6 +145,7 @@
     "npm": "^8.11.0",
     "prettier": "^2.2.1",
     "qs": "^6.10.1",
+    "react-refresh": "^0.13.0",
     "rimraf": "^3.0.2",
     "sass-loader": "^11.0.1",
     "source-map-loader": "^0.2.4",
@@ -156,7 +154,7 @@
     "tslint": "^6.1.3",
     "typescript": "^4.2.3",
     "url-loader": "^1.0.1",
-    "webpack": "^5.70.0",
+    "webpack": "^5.73.0",
     "webpack-bundle-analyzer": "^4.4.2",
     "webpack-cli": "^4.6.0",
     "webpack-dev-server": "^4.7.4",

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";
+import { isEmpty, isNil, isUndefined } 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);
 
+const AirDCPPSocketComponent = (): ReactElement => {
   const airDCPPConfiguration = useContext(AirDCPPSocketContext);
-  const { AirDCPPSocket } = airDCPPConfiguration;
+  const { AirDCPPSocket, settings } = airDCPPConfiguration;
   useEffect(() => {
-    const addQueueListener = async () => {
+    const foo = async () => {
-      if (!isNil(AirDCPPSocket)) {
+      if (!isUndefined(AirDCPPSocket)) {
         await AirDCPPSocket.addListener(
           "queue",
           "queue_bundle_added",
@@ -86,18 +39,16 @@ export const App = (): ReactElement => {
         );
       }
     };
-    addQueueListener();
+    foo();
-  }, [AirDCPPSocket]);
+  }, [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,
+              _id,
-            sourcedMetadata: { comicvine, comicInfo, locg },
+              rawFileDetails,
-            acquisition: {
+              sourcedMetadata: { comicvine, comicInfo, locg },
-              source: { name },
+              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;
+        .then(async (data) => {
-        const initializedAirDCPPSocket = new AirDCPPSocket({
+          const { directConnect } = data.data;
-          protocol: `${directConnect.client.host.protocol}`,
+          const initializedAirDCPPSocket = new AirDCPPSocket({
-          hostname: `${directConnect.client.host.hostname}`,
+            protocol: `${directConnect.client.host.protocol}`,
-        });
+            hostname: `${directConnect.client.host.hostname}`,
-        await initializedAirDCPPSocket.connect(
+          });
-          `${directConnect.client.host.username}`,
+
-          `${directConnect.client.host.password}`,
+          await initializedAirDCPPSocket.connect(
-          true,
+            `${directConnect.client.host.username}`,
-        );
+            `${directConnect.client.host.password}`,
-        setValue({
+            true,
-          AirDCPPSocket: initializedAirDCPPSocket,
+          );
-          settings: data.data,
+          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";

webpack.config.js

@@ -5,8 +5,10 @@ const webpack = require("webpack");
 const outputDirectory = "dist";
 const BundleAnalyzerPlugin =
   require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
+const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
 const CopyPlugin = require("copy-webpack-plugin");
-
+const isDevelopment = process.env.NODE_ENV !== "production";
+const HMRPlugin = isDevelopment ? new ReactRefreshWebpackPlugin() : [];
 module.exports = () => {
   return {
     entry: ["babel-polyfill", "./src/client/index.tsx"],
@@ -36,7 +38,16 @@ module.exports = () => {
         },
         {
           test: [/\.js?$/, /\.jsx?$/, /\.tsx?$/],
-          use: ["babel-loader"],
+          use: [
+            {
+              loader: "babel-loader",
+              options: {
+                plugins: [
+                  isDevelopment && require.resolve("react-refresh/babel"),
+                ].filter(Boolean),
+              },
+            },
+          ],
           exclude: /node_modules/,
         },
         {
@@ -72,6 +83,7 @@ module.exports = () => {
       extensions: ["*", ".ts", ".tsx", ".js", ".jsx", ".json"],
       aliasFields: ["browser", "browser.esm"],
     },
+    mode: isDevelopment ? "development" : "production",
     devServer: {
       hot: true,
       port: 3050,
@@ -88,6 +100,7 @@ module.exports = () => {
       usedExports: false,
     },
     plugins: [
+      HMRPlugin,
       // new BundleAnalyzerPlugin(),
       new CopyPlugin({
         patterns: [{ from: "./src/client/assets/img/", to: "img/" }],