🔧 Updated AirDC++ socket connection code app-wide

Bumps [json5](https://github.com/json5/json5) from 1.0.1 to 1.0.2.
- [Release notes](https://github.com/json5/json5/releases)
- [Changelog](https://github.com/json5/json5/blob/main/CHANGELOG.md)
- [Commits](https://github.com/json5/json5/compare/v1.0.1...v1.0.2)

---
updated-dependencies:
- dependency-name: json5
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

README.md

@@ -4,6 +4,16 @@ ThreeTwo! _aims to be_ a comic book curation app.
 
 [![Docker Image CI](https://github.com/rishighan/threetwo/actions/workflows/docker-image.yml/badge.svg)](https://github.com/rishighan/threetwo/actions/workflows/docker-image.yml)
 
+### Screenshots
+
+![](https://raw.githubusercontent.com/rishighan/threetwo/rishighan-screenshots-dec-2022/Dashboard.png)
+
+![](https://raw.githubusercontent.com/rishighan/threetwo/rishighan-screenshots-dec-2022/Library.png)
+
+![](https://raw.githubusercontent.com/rishighan/threetwo/rishighan-screenshots-dec-2022/DC%2B%2B%20integration.png)
+
+![](https://raw.githubusercontent.com/rishighan/threetwo/rishighan-screenshots-dec-2022/ComicVine%20Matching.png)
+
 
 ### 🦄 Early Development Support Channel
 

package.json

@@ -44,10 +44,6 @@
     "babel-preset-minify": "^0.5.2",
     "better-docs": "^2.7.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",
@@ -63,13 +59,13 @@
     "pretty-bytes": "^5.6.0",
     "prop-types": "^15.8.1",
     "qs": "^6.10.5",
-    "react": "^18.1.0",
+    "react": "^18.2.0",
     "react-collapsible": "^2.9.0",
-    "react-comic-viewer": "^0.3.5",
+    "react-comic-viewer": "^0.4.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": "^6.5.9",
     "react-final-form-arrays": "^3.1.3",
     "react-loader-spinner": "^4.0.0",
     "react-masonry-css": "^1.0.16",
@@ -138,7 +134,6 @@
     "bulma": "^0.9.3",
     "clean-webpack-plugin": "^1.0.0",
     "comlink": "^4.3.0",
-    "compromise-strict": "^0.0.2",
     "concurrently": "^4.0.0",
     "copy-webpack-plugin": "^9.0.1",
     "css-loader": "^5.1.2",

src/client/actions/airdcpp.actions.tsx

@@ -4,7 +4,10 @@ import {
   PriorityEnum,
   SearchResponse,
 } from "threetwo-ui-typings";
-import { LIBRARY_SERVICE_BASE_URI, SEARCH_SERVICE_BASE_URI } from "../constants/endpoints";
+import {
+  LIBRARY_SERVICE_BASE_URI,
+  SEARCH_SERVICE_BASE_URI,
+} from "../constants/endpoints";
 import {
   AIRDCPP_SEARCH_RESULTS_ADDED,
   AIRDCPP_SEARCH_RESULTS_UPDATED,
@@ -18,6 +21,8 @@ import {
   IMS_COMIC_BOOK_DB_OBJECT_FETCHED,
   AIRDCPP_TRANSFERS_FETCHED,
   LIBRARY_ISSUE_BUNDLES,
+  AIRDCPP_SOCKET_CONNECTED,
+  AIRDCPP_SOCKET_DISCONNECTED,
 } from "../constants/action-types";
 import { isNil } from "lodash";
 import axios from "axios";
@@ -32,190 +37,199 @@ function sleep(ms: number): Promise<NodeJS.Timeout> {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
+export const toggleAirDCPPSocketConnectionStatus =
+  (status: String, payload?: any) => async (dispatch) => {
+    switch (status) {
+      case "connected":
+        dispatch({
+          type: AIRDCPP_SOCKET_CONNECTED,
+          data: payload,
+        });
+        break;
+
+      case "disconnected":
+        dispatch({
+          type: AIRDCPP_SOCKET_DISCONNECTED,
+          data: payload,
+        });
+        break;
+
+      default:
+        console.log("Can't set AirDC++ socket status.");
+        break;
+    }
+  };
 export const search =
   (data: SearchData, ADCPPSocket: any, credentials: any) =>
-    async (dispatch) => {
-      try {
-        if (!ADCPPSocket.isConnected()) {
-          await ADCPPSocket.connect(
-            credentials.username,
-            credentials.password,
-            true,
-          );
-        }
-        const instance: SearchInstance = await ADCPPSocket.post("search");
-        dispatch({
-          type: AIRDCPP_SEARCH_IN_PROGRESS,
-        });
-
-        // We want to get notified about every new result in order to make the user experience better
-        await ADCPPSocket.addListener(
-          `search`,
-          "search_result_added",
-          async (groupedResult) => {
-            // ...add the received result in the UI
-            // (it's probably a good idea to have some kind of throttling for the UI updates as there can be thousands of results)
-
-            dispatch({
-              type: AIRDCPP_SEARCH_RESULTS_ADDED,
-              groupedResult,
-            });
-          },
-          instance.id,
-        );
-
-        // We also want to update the existing items in our list when new hits arrive for the previously listed files/directories
-        await ADCPPSocket.addListener(
-          `search`,
-          "search_result_updated",
-          async (groupedResult) => {
-            // ...update properties of the existing result in the UI
-            dispatch({
-              type: AIRDCPP_SEARCH_RESULTS_UPDATED,
-              groupedResult,
-            });
-          },
-          instance.id,
-        );
-
-        // We need to show something to the user in case the search won't yield any results so that he won't be waiting forever)
-        // Wait for 5 seconds for any results to arrive after the searches were sent to the hubs
-        await ADCPPSocket.addListener(
-          `search`,
-          "search_hub_searches_sent",
-          async (searchInfo) => {
-            await sleep(5000);
-
-            // Check the number of received results (in real use cases we should know that even without calling the API)
-            const currentInstance = await ADCPPSocket.get(
-              `search/${instance.id}`,
-            );
-            if (currentInstance.result_count === 0) {
-              // ...nothing was received, show an informative message to the user
-              console.log("No more search results.");
-            }
-
-            // The search can now be considered to be "complete"
-            // If there's an "in progress" indicator in the UI, that could also be disabled here
-            dispatch({
-              type: AIRDCPP_HUB_SEARCHES_SENT,
-              searchInfo,
-              instance,
-            });
-          },
-          instance.id,
-        );
-        // Finally, perform the actual search
-        await ADCPPSocket.post(`search/${instance.id}/hub_search`, data);
-      } catch (error) {
-        console.log(error);
-        throw error;
+  async (dispatch) => {
+    try {
+      if (!ADCPPSocket.isConnected()) {
+        await ADCPPSocket();
       }
-    };
+      const instance: SearchInstance = await ADCPPSocket.post("search");
+      dispatch({
+        type: AIRDCPP_SEARCH_IN_PROGRESS,
+      });
+
+      // We want to get notified about every new result in order to make the user experience better
+      await ADCPPSocket.addListener(
+        `search`,
+        "search_result_added",
+        async (groupedResult) => {
+          // ...add the received result in the UI
+          // (it's probably a good idea to have some kind of throttling for the UI updates as there can be thousands of results)
+
+          dispatch({
+            type: AIRDCPP_SEARCH_RESULTS_ADDED,
+            groupedResult,
+          });
+        },
+        instance.id,
+      );
+
+      // We also want to update the existing items in our list when new hits arrive for the previously listed files/directories
+      await ADCPPSocket.addListener(
+        `search`,
+        "search_result_updated",
+        async (groupedResult) => {
+          // ...update properties of the existing result in the UI
+          dispatch({
+            type: AIRDCPP_SEARCH_RESULTS_UPDATED,
+            groupedResult,
+          });
+        },
+        instance.id,
+      );
+
+      // We need to show something to the user in case the search won't yield any results so that he won't be waiting forever)
+      // Wait for 5 seconds for any results to arrive after the searches were sent to the hubs
+      await ADCPPSocket.addListener(
+        `search`,
+        "search_hub_searches_sent",
+        async (searchInfo) => {
+          await sleep(5000);
+
+          // Check the number of received results (in real use cases we should know that even without calling the API)
+          const currentInstance = await ADCPPSocket.get(
+            `search/${instance.id}`,
+          );
+          if (currentInstance.result_count === 0) {
+            // ...nothing was received, show an informative message to the user
+            console.log("No more search results.");
+          }
+
+          // The search can now be considered to be "complete"
+          // If there's an "in progress" indicator in the UI, that could also be disabled here
+          dispatch({
+            type: AIRDCPP_HUB_SEARCHES_SENT,
+            searchInfo,
+            instance,
+          });
+        },
+        instance.id,
+      );
+      // Finally, perform the actual search
+      await ADCPPSocket.post(`search/${instance.id}/hub_search`, data);
+    } catch (error) {
+      console.log(error);
+      throw error;
+    }
+  };
 
 export const downloadAirDCPPItem =
-  (searchInstanceId: Number,
+  (
+    searchInstanceId: Number,
     resultId: String,
     comicObjectId: String,
-    name: String, size: Number, type: any,
+    name: String,
+    size: Number,
+    type: any,
     ADCPPSocket: any,
     credentials: any,
   ): void =>
-    async (dispatch) => {
-      try {
-        if (!ADCPPSocket.isConnected()) {
-          await ADCPPSocket.connect(
-            `${credentials.username}`,
-            `${credentials.password}`,
-            true,
-          );
-        }
-        let bundleDBImportResult = {};
-        const downloadResult = await ADCPPSocket.post(
-          `search/${searchInstanceId}/results/${resultId}/download`,
-        );
-
-        if (!isNil(downloadResult)) {
-          bundleDBImportResult = await axios({
-            method: "POST",
-            url: `${LIBRARY_SERVICE_BASE_URI}/applyAirDCPPDownloadMetadata`,
-            headers: {
-              "Content-Type": "application/json; charset=utf-8",
-            },
-            data: {
-              bundleId: downloadResult.bundle_info.id,
-              comicObjectId,
-              name,
-              size,
-              type,
-            },
-          });
-
-          dispatch({
-            type: AIRDCPP_RESULT_DOWNLOAD_INITIATED,
-            downloadResult,
-            bundleDBImportResult,
-          });
-          
-          dispatch({
-            type: IMS_COMIC_BOOK_DB_OBJECT_FETCHED,
-            comicBookDetail: bundleDBImportResult.data,
-            IMS_inProgress: false,
-          });
-
-        }
-      } catch (error) {
-        throw error;
+  async (dispatch) => {
+    try {
+      if (!ADCPPSocket.isConnected()) {
+        await ADCPPSocket.connect();
       }
-    };
+      let bundleDBImportResult = {};
+      const downloadResult = await ADCPPSocket.post(
+        `search/${searchInstanceId}/results/${resultId}/download`,
+      );
 
-export const getBundlesForComic =
-  (comicObjectId: string, ADCPPSocket: any, credentials: any) =>
-    async (dispatch) => {
-      try {
-        if (!ADCPPSocket.isConnected()) {
-          await ADCPPSocket.connect(
-            `${credentials.username}`,
-            `${credentials.password}`,
-            true,
-          );
-        }
-        const comicObject = await axios({
+      if (!isNil(downloadResult)) {
+        bundleDBImportResult = await axios({
           method: "POST",
-          url: `${LIBRARY_SERVICE_BASE_URI}/getComicBookById`,
+          url: `${LIBRARY_SERVICE_BASE_URI}/applyAirDCPPDownloadMetadata`,
           headers: {
             "Content-Type": "application/json; charset=utf-8",
           },
           data: {
-            id: `${comicObjectId}`,
+            bundleId: downloadResult.bundle_info.id,
+            comicObjectId,
+            name,
+            size,
+            type,
           },
         });
-        // get only the bundles applicable for the comic
-        if (comicObject.data.acquisition.directconnect) {
-          const filteredBundles = comicObject.data.acquisition.directconnect.downloads.map(
+
+        dispatch({
+          type: AIRDCPP_RESULT_DOWNLOAD_INITIATED,
+          downloadResult,
+          bundleDBImportResult,
+        });
+
+        dispatch({
+          type: IMS_COMIC_BOOK_DB_OBJECT_FETCHED,
+          comicBookDetail: bundleDBImportResult.data,
+          IMS_inProgress: false,
+        });
+      }
+    } catch (error) {
+      throw error;
+    }
+  };
+
+export const getBundlesForComic =
+  (comicObjectId: string, ADCPPSocket: any, credentials: any) =>
+  async (dispatch) => {
+    try {
+      if (!ADCPPSocket.isConnected()) {
+        await ADCPPSocket.connect();
+      }
+      const comicObject = await axios({
+        method: "POST",
+        url: `${LIBRARY_SERVICE_BASE_URI}/getComicBookById`,
+        headers: {
+          "Content-Type": "application/json; charset=utf-8",
+        },
+        data: {
+          id: `${comicObjectId}`,
+        },
+      });
+      // get only the bundles applicable for the comic
+      if (comicObject.data.acquisition.directconnect) {
+        const filteredBundles =
+          comicObject.data.acquisition.directconnect.downloads.map(
             async ({ bundleId }) => {
               return await ADCPPSocket.get(`queue/bundles/${bundleId}`);
             },
           );
-          dispatch({
-            type: AIRDCPP_BUNDLES_FETCHED,
-            bundles: await Promise.all(filteredBundles),
-          });
-        }
-      } catch (error) {
-        throw error;
+        dispatch({
+          type: AIRDCPP_BUNDLES_FETCHED,
+          bundles: await Promise.all(filteredBundles),
+        });
       }
-    };
+    } catch (error) {
+      throw error;
+    }
+  };
 
 export const getTransfers =
   (ADCPPSocket: any, credentials: any) => async (dispatch) => {
     try {
       if (!ADCPPSocket.isConnected()) {
-        await ADCPPSocket.connect(
-          `${credentials.username}`,
-          `${credentials.password}`,
-          true,
-        );
+        await ADCPPSocket.connect();
       }
       const bundles = await ADCPPSocket.get("queue/bundles/1/85", {});
       if (!isNil(bundles)) {
@@ -234,7 +248,6 @@ export const getTransfers =
           type: LIBRARY_ISSUE_BUNDLES,
           issue_bundles,
         });
-
       }
     } catch (err) {
       throw err;

src/client/actions/fileops.actions.tsx

@@ -32,9 +32,11 @@ import {
   SS_SEARCH_FAILED,
   SS_SEARCH_RESULTS_FETCHED_SPECIAL,
   WANTED_COMICS_FETCHED,
+  VOLUMES_FETCHED,
+  CV_WEEKLY_PULLLIST_FETCHED,
 } from "../constants/action-types";
 import { success } from "react-notification-system-redux";
-import { removeLeadingPeriod } from "../shared/utils/formatting.utils";
+
 import { isNil, map } from "lodash";
 
 export async function walkFolder(path: string): Promise<Array<IFolderData>> {
@@ -58,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,
   });
@@ -84,7 +77,7 @@ export const fetchComicBookMetadata = () => async (dispatch) => {
   dispatch({
     type: LS_IMPORT,
     meta: { remote: true },
-    data: { extractionOptions },
+    data: {},
   });
 };
 export const toggleImportQueueStatus = (options) => async (dispatch) => {
@@ -134,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: {
-        name: "",
-      },
-      importStatus: {
-        isImported: true,
-        tagged: false,
-        matchedResult: {
-          score: "0",
+      importType: "new",
+      payload: {
+        rawFileDetails: {
+          name: "",
         },
-      },
-      sourcedMetadata: payload || null,
-      acquisition: { source: { wanted: true, name: sourceName } },
+        importStatus: {
+          isImported: true,
+          tagged: false,
+          matchedResult: {
+            score: "0",
+          },
+        },
+        sourcedMetadata: metadata || null,
+        acquisition: { source: { wanted: true, name: sourceName } },
+      }
     };
     dispatch({
       type: IMS_CV_METADATA_IMPORT_CALL_IN_PROGRESS,
@@ -194,6 +190,7 @@ export const fetchVolumeGroups = () => async (dispatch) => {
 };
 export const fetchComicVineMatches =
   (searchPayload, issueSearchQuery, seriesSearchQuery?) => async (dispatch) => {
+    console.log(issueSearchQuery);
     try {
       dispatch({
         type: CV_API_CALL_IN_PROGRESS,
@@ -223,7 +220,6 @@ export const fetchComicVineMatches =
           },
         })
         .then((response) => {
-          console.log(response);
           let matches: any = [];
           if (
             !isNil(response.data.results) &&
@@ -233,7 +229,6 @@ export const fetchComicVineMatches =
           } else {
             matches = response.data.map((match) => match);
           }
-          console.log(matches);
           dispatch({
             type: CV_SEARCH_SUCCESS,
             searchResults: matches,
@@ -252,33 +247,38 @@ export const fetchComicVineMatches =
     });
   };
 
-export const extractComicArchive = (path: string) => async (dispatch) => {
-  const comicBookPages: string[] = [];
-  dispatch({
-    type: IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS,
-  });
-  const extractedComicBookArchive = await axios({
-    method: "POST",
-    url: `${LIBRARY_SERVICE_BASE_URI}/uncompressFullArchive`,
-    headers: {
-      "Content-Type": "application/json; charset=utf-8",
-    },
-    data: {
-      filePath: path,
-    },
-  });
-  map(extractedComicBookArchive.data, (page) => {
-    console.log(page);
-    const pageFilePath = removeLeadingPeriod(page);
-    const imagePath = encodeURI(`${LIBRARY_SERVICE_HOST}${pageFilePath}`);
-    comicBookPages.push(imagePath);
-  });
-  dispatch({
-    type: IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS,
-    extractedComicBookArchive: comicBookPages,
-  });
-};
+/**
+ * This method is a proxy to `uncompressFullArchive` which uncompresses complete `rar` or `zip` archives
+ * @param {string} path The path to the compressed archive
+ * @param {any} options Options object
+ * @returns {any}
+ */
+export const extractComicArchive =
 
+  (path: string, options: any): any =>
+    async (dispatch) => {
+      dispatch({
+        type: IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS,
+      });
+      await axios({
+        method: "POST",
+        url: `${LIBRARY_SERVICE_BASE_URI}/uncompressFullArchive`,
+        headers: {
+          "Content-Type": "application/json; charset=utf-8",
+        },
+        data: {
+          filePath: path,
+          options,
+        },
+      });
+    };
+
+/**
+ * Description
+ * @param {any} query
+ * @param {any} options
+ * @returns {any}
+ */
 export const searchIssue = (query, options) => async (dispatch) => {
   dispatch({
     type: SS_SEARCH_IN_PROGRESS,
@@ -317,12 +317,16 @@ export const searchIssue = (query, options) => async (dispatch) => {
         data: response.data.body,
       });
       break;
+    case "volumesPage":
+      dispatch({
+        type: VOLUMES_FETCHED,
+        data: response.data.body,
+      });
+      break;
 
     default:
       break;
   }
-
-
 };
 export const analyzeImage =
   (imageFilePath: string | Buffer) => async (dispatch) => {
@@ -345,4 +349,4 @@ export const analyzeImage =
       type: IMG_ANALYSIS_DATA_FETCH_SUCCESS,
       result: foo.data,
     });
-  };
+  };

src/client/actions/settings.actions.tsx

@@ -16,7 +16,6 @@ export const saveSettings =
       method: "POST",
       data: { settingsPayload, settingsObjectId },
     });
-    console.log(result.data);
     dispatch({
       type: SETTINGS_OBJECT_FETCHED,
       data: result.data,

src/client/assets/scss/App.scss

@@ -62,6 +62,10 @@ pre {
     margin-left: -300px;
     min-width: 500px;
   }
+  .airdcpp-status {
+    min-width: 300px;
+    line-height: 1.7rem;
+  }
   body {
     background: #454a59;
   }
@@ -356,6 +360,10 @@ pre {
   border-radius: 0.5rem;
 }
 
+.comic-viewer {
+  border: 1px solid red;
+}
+
 // comicvine metadata
 .comicvine-metadata {
   background-color: #f2f1f9;
@@ -410,20 +418,34 @@ pre {
   }
 }
 // Library
-.sticky {
+.header-area {
+  width: 100%;
+  padding: 25px 0 15px 0;
   position: sticky;
-  top: 57px;
-  z-index: 2;
+  z-index:9999;
   background: #fffffc;
+  top: 50px;
 }
 
 .library {
+  .table-controls {
+    background: #fffffc;
+    justify-content: space-between;
+    position: sticky;
+    top: 126px;
+    padding-bottom: 10px;
+  }
+  .pagination {
+    margin: 0;
+    background: #fffffc;
+  }
+
   table {
     border-collapse: separate;
     width: 100%;
     thead {
       position: sticky;
-      top: 146px;
+      top: 250px;
       z-index: 1;
       background: #fffffc;
       min-height: 130px;

src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx

@@ -4,11 +4,25 @@ import { useDispatch } from "react-redux";
 import { saveSettings, deleteSettings } from "../../actions/settings.actions";
 import { AirDCPPSettingsConfirmation } from "./AirDCPPSettingsConfirmation";
 import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
-import { isUndefined, isEmpty } from "lodash";
+import { isUndefined, isEmpty, isNil } from "lodash";
 
 export const AirDCPPSettingsForm = (): ReactElement => {
   const dispatch = useDispatch();
   const airDCPPSettings = useContext(AirDCPPSocketContext);
+
+  const hostValidator = (hostname: string): string | null => {
+    const hostnameRegex = /[\W]+/gm;
+    try {
+      if (!isUndefined(hostname)) {
+        const matches = hostname.match(hostnameRegex);
+        return (isNil(matches) && matches.length !== 0) ? hostname : "Invalid hostname; it should not contain special characters";
+      }
+    }
+    catch {
+      return null;
+    }
+  }
+  
   const onSubmit = useCallback(async (values) => {
     try {
       airDCPPSettings.setSettings(values);
@@ -25,7 +39,7 @@ export const AirDCPPSettingsForm = (): ReactElement => {
     airDCPPSettings.setSettings({});
     dispatch(deleteSettings());
   }, []);
-  const validate = async () => {};
+  const validate = async () => { };
   const initFormData = !isUndefined(
     airDCPPSettings.airDCPPState.settings.directConnect,
   )
@@ -52,12 +66,24 @@ export const AirDCPPSettingsForm = (): ReactElement => {
                   </Field>
                 </span>
               </p>
-              <p className="control is-expanded">
+              <div className="control is-expanded">
                 <Field
                   name="hostname"
+                  validate={hostValidator}>
+                  {({ input, meta }) => (
+                    <div>
+                      <input {...input} type="text" placeholder="AirDC++ hostname" className="input" />
+                      {meta.error && meta.touched && <span className="is-size-7 has-text-danger">{meta.error}</span>}
+                    </div>
+                  )}
+                </Field>
+              </div>
+              <p className="control">
+                <Field
+                  name="port"
                   component="input"
                   className="input"
-                  placeholder="AirDC++ host IP / hostname"
+                  placeholder="AirDC++ port"
                 />
               </p>
             </div>

src/client/components/App.tsx

@@ -3,14 +3,11 @@ import Dashboard from "./Dashboard/Dashboard";
 
 import Import from "./Import";
 import { ComicDetailContainer } from "./ComicDetail/ComicDetailContainer";
-import LibraryContainer from "./Library/LibraryContainer";
+import TabulatedContentContainer from "./Library/TabulatedContentContainer";
 import LibraryGrid from "./Library/LibraryGrid";
 import Search from "./Search";
 import Settings from "./Settings";
 import VolumeDetail from "./VolumeDetail/VolumeDetail";
-import PullList from "./PullList/PullList";
-import WantedComics from "./WantedComics/WantedComics";
-import Volumes from "./Volumes/Volumes";
 import Downloads from "./Downloads/Downloads";
 
 import { Routes, Route } from "react-router-dom";
@@ -21,17 +18,24 @@ import {
   AirDCPPSocketContext,
 } from "../context/AirDCPPSocket";
 import { isEmpty, isUndefined } from "lodash";
-import { AIRDCPP_DOWNLOAD_PROGRESS_TICK } from "../constants/action-types";
-import { useDispatch } from "react-redux";
-import axios from "axios";
-import { LIBRARY_SERVICE_BASE_URI } from "../constants/endpoints";
-import { useParams } from "react-router";
+import {
+  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
+ * @returns void
+ */
 const AirDCPPSocketComponent = (): ReactElement => {
   const airDCPPConfiguration = useContext(AirDCPPSocketContext);
   const dispatch = useDispatch();
+
   useEffect(() => {
-    const foo = async () => {
+    const initializeAirDCPPEventListeners = async () => {
       if (
         !isUndefined(airDCPPConfiguration.airDCPPState) &&
         !isEmpty(airDCPPConfiguration.airDCPPState.settings) &&
@@ -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;
+              }
             }
           },
         );
@@ -79,7 +90,7 @@ const AirDCPPSocketComponent = (): ReactElement => {
         );
       }
     };
-    foo();
+    initializeAirDCPPEventListeners();
   }, [airDCPPConfiguration]);
   return <></>;
 };
@@ -92,7 +103,10 @@ export const App = (): ReactElement => {
         <Routes>
           <Route path="/" element={<Dashboard />} />
           <Route path="/import" element={<Import path={"./comics"} />} />
-          <Route path="/library" element={<LibraryContainer />} />
+          <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={<PullList />} />
-          <Route path="/wanted/all" element={<WantedComics />} />
-          <Route path="/volumes/all" element={<Volumes />} />
+          <Route
+            path="/pull-list/all"
+            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}`,
@@ -332,4 +336,4 @@ export const AcquisitionPanel = (
   );
 };
 
-export default AcquisitionPanel;
+export default AcquisitionPanel;

src/client/components/ComicDetail/ActionMenu/Menu.tsx

@@ -18,7 +18,6 @@ export const Menu = (props): ReactElement => {
     } else if (!isEmpty(data.sourcedMetadata)) {
       issueSearchQuery = refineQuery(data.sourcedMetadata.comicvine.name);
     }
-
     dispatch(fetchComicVineMatches(data, issueSearchQuery, seriesSearchQuery));
     setSlidingPanelContentId("CVMatches");
     setVisible(true);

src/client/components/ComicDetail/ComicDetail.tsx

@@ -5,6 +5,7 @@ import Card from "../Carda";
 import { ComicVineMatchPanel } from "./ComicVineMatchPanel";
 
 import { RawFileDetails } from "./RawFileDetails";
+import { ComicVineSearchForm } from "../ComicVineSearchForm";
 
 import TabControls from "./TabControls";
 import { EditMetadataPanel } from "./EditMetadataPanel";
@@ -40,6 +41,15 @@ type ComicDetailProps = {};
  */
 
 export const ComicDetail = (data: ComicDetailProps): ReactElement => {
+  const {
+    data: {
+      _id,
+      rawFileDetails,
+      inferredMetadata,
+      sourcedMetadata: { comicvine, locg, comicInfo },
+    },
+    userSettings,
+  } = data;
   const [page, setPage] = useState(1);
   const [visible, setVisible] = useState(false);
   const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
@@ -56,7 +66,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
   );
 
   const extractedComicBook = useSelector(
-    (state: RootState) => state.fileOps.extractedComicBookArchive,
+    (state: RootState) => state.fileOps.extractedComicBookArchive.reading,
   );
   const { comicObjectId } = useParams<{ comicObjectId: string }>();
 
@@ -64,12 +74,21 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
 
   const openModal = useCallback((filePath) => {
     setIsOpen(true);
-    dispatch(extractComicArchive(filePath));
+    dispatch(
+      extractComicArchive(filePath, {
+        type: "full",
+        purpose: "reading",
+        imageResizeOptions: {
+          baseWidth: 1024,
+        },
+      }),
+    );
   }, []);
 
-  const afterOpenModal = useCallback(() => {
+  const afterOpenModal = useCallback((things) => {
     // references are now sync'd and can be accessed.
     // subtitle.style.color = "#f00";
+    console.log("kolaveri", things);
   }, []);
 
   const closeModal = useCallback(() => {
@@ -79,9 +98,21 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
   // sliding panel init
   const contentForSlidingPanel = {
     CVMatches: {
-      content: () => {
-        if (!comicVineAPICallProgress) {
-          return (
+      content: (props) => (
+        <>
+          <div className="card search-criteria-card">
+            <div className="card-content">
+              <ComicVineSearchForm data={rawFileDetails} />
+            </div>
+          </div>
+          <p className="is-size-5 mt-3 mb-2 ml-3">Searching for:</p>
+          {inferredMetadata.issue ? (
+            <div className="ml-3">
+              <span className="tag mr-3">{inferredMetadata.issue.name} </span>
+              <span className="tag"> # {inferredMetadata.issue.number} </span>
+            </div>
+          ) : null}
+          {!comicVineAPICallProgress ? (
             <ComicVineMatchPanel
               props={{
                 comicVineSearchQueryObject,
@@ -90,9 +121,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
                 comicObjectId,
               }}
             />
-          );
-        } else {
-          return (
+          ) : (
             <div className="progress-indicator-container">
               <div className="indicator">
                 <Loader
@@ -105,23 +134,15 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
                 />
               </div>
             </div>
-          );
-        }
-      },
+          )}
+        </>
+      ),
     },
+
     editComicBookMetadata: {
       content: () => <EditMetadataPanel />,
     },
   };
-  const {
-    data: {
-      _id,
-      rawFileDetails,
-      inferredMetadata,
-      sourcedMetadata: { comicvine, locg, comicInfo },
-    },
-    userSettings,
-  } = data;
 
   // check for the availability of CV metadata
   const isComicBookMetadataAvailable =
@@ -238,7 +259,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
                 </div>
               </div>
               {/* raw file details */}
-              <div className="column is-three-fifths">
+              <div className="column">
                 {!isUndefined(rawFileDetails) &&
                   !isEmpty(rawFileDetails.cover) && (
                     <>
@@ -269,6 +290,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
                           <ComicViewer
                             pages={extractedComicBook}
                             direction="ltr"
+                            className={{closeButton: "border: 1px solid red;"}}
                           />
                         )}
                       </Modal>
@@ -295,4 +317,4 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
   );
 };
 
-export default ComicDetail;
+export default ComicDetail;

src/client/components/ComicDetail/ComicVineDetails.tsx

@@ -7,7 +7,7 @@ import Card from "../Carda";
 export const ComicVineDetails = (props): ReactElement => {
   const { data, updatedAt } = props;
   return (
-    <div className="column is-two-thirds">
+    <div className="column is-half">
       <div className="comic-detail comicvine-metadata">
         <dl>
           <dt>ComicVine Metadata</dt>

src/client/components/ComicDetail/ComicVineMatchPanel.tsx

@@ -10,38 +10,8 @@ export const ComicVineMatchPanel = (comicVineData): ReactElement => {
     comicVineAPICallProgress,
     comicVineSearchResults,
   } = comicVineData.props;
-  console.log(comicVineData);
   return (
     <>
-      {!isEmpty(comicVineSearchQueryObject) && (
-        <div className="card search-criteria-card">
-          <div className="card-content">
-            <ComicVineSearchForm />
-            <p className="is-size-6">Searching against:</p>
-            <div className="field is-grouped is-grouped-multiline">
-              <div className="control">
-                <div className="tags has-addons">
-                  <span className="tag">Title</span>
-                  <span className="tag is-info">
-                    {comicVineSearchQueryObject.issue.inferredIssueDetails.name}
-                  </span>
-                </div>
-              </div>
-              <div className="control">
-                <div className="tags has-addons">
-                  <span className="tag">Number</span>
-                  <span className="tag is-info">
-                    {
-                      comicVineSearchQueryObject.issue.inferredIssueDetails
-                        .number
-                    }
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
       <div className="search-results-container">
         {!isEmpty(comicVineSearchResults) && (
           <MatchResult

src/client/components/ComicDetail/RawFileDetails.tsx

@@ -7,7 +7,7 @@ export const RawFileDetails = (props): ReactElement => {
   const { rawFileDetails, inferredMetadata } = props.data;
   return (
     <>
-      <div className="comic-detail raw-file-details">
+      <div className="comic-detail raw-file-details column is-three-fifths">
         <dl>
           <dt>Raw File Details</dt>
           <dd className="is-size-7">
@@ -38,7 +38,8 @@ export const RawFileDetails = (props): ReactElement => {
           </dd>
         </dl>
       </div>
-      <div className="content comic-detail raw-file-details mt-3">
+
+      <div className="content comic-detail raw-file-details mt-3 column is-three-fifths">
         <dl>
           {/* inferred metadata */}
           <dt>Inferred Issue Metadata</dt>
@@ -93,4 +94,4 @@ RawFileDetails.propTypes = {
       }),
     }),
   }),
-};
+};

src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx

@@ -14,7 +14,7 @@ export const ArchiveOperations = (props): ReactElement => {
     (state: RootState) => state.fileOps.comicBookExtractionInProgress,
   );
   const extractedComicBookArchive = useSelector(
-    (state: RootState) => state.fileOps.extractedComicBookArchive,
+    (state: RootState) => state.fileOps.extractedComicBookArchive.analysis,
   );
 
   const imageAnalysisResult = useSelector((state: RootState) => {
@@ -23,7 +23,15 @@ export const ArchiveOperations = (props): ReactElement => {
 
   const dispatch = useDispatch();
   const unpackComicArchive = useCallback(() => {
-    dispatch(extractComicArchive(data.rawFileDetails.filePath));
+    dispatch(
+      extractComicArchive(data.rawFileDetails.filePath, {
+        type: "full",
+        purpose: "analysis",
+        imageResizeOptions: {
+          baseWidth: 275,
+        },
+      }),
+    );
   }, []);
 
   // sliding panel config
@@ -118,4 +126,4 @@ export const ArchiveOperations = (props): ReactElement => {
   );
 };
 
-export default ArchiveOperations;
+export default ArchiveOperations;

src/client/components/ComicVineSearchForm.tsx

@@ -1,22 +1,31 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { Form, Field } from "react-final-form";
 import Collapsible from "react-collapsible";
+import { fetchComicVineMatches } from "../actions/fileops.actions";
+import { useDispatch } from "react-redux";
 
 /**
- * Component for accepting ComicVine search parameters
+ * Component for performing search against ComicVine
  *
  * @component
  * @example
- * const age = 21
- * const name = 'Jitendra Nirnejak'
  * return (
- *   <User age={age} name={name} />
+ *   <ComicVineSearchForm data={rawFileDetails} />
  * )
  */
-export const ComicVineSearchForm = () => {
-  const onSubmit = () => {
-    return true;
-  };
+export const ComicVineSearchForm = (data) => {
+  const dispatch = useDispatch();
+  const onSubmit = useCallback((value) => {
+    const userInititatedQuery = {
+      inferredIssueDetails: {
+        name: value.issueName,
+        number: value.issueNumber,
+        subtitle: "",
+        year: value.issueYear,
+      },
+    };
+    dispatch(fetchComicVineMatches(data, userInititatedQuery));
+  }, []);
   const validate = () => {
     return true;
   };
@@ -28,7 +37,7 @@ export const ComicVineSearchForm = () => {
       render={({ handleSubmit }) => (
         <form onSubmit={handleSubmit}>
           <span className="field is-normal">
-            <label className="label">Issue Details</label>
+            <label className="label mb-2 is-size-5">Search Manually</label>
           </span>
           <div className="field is-horizontal">
             <div className="field-body">
@@ -48,11 +57,15 @@ export const ComicVineSearchForm = () => {
                   )}
                 </Field>
               </div>
+            </div>
+          </div>
 
+          <div className="field is-horizontal">
+            <div className="field-body">
               <div className="field">
                 <Field name="issueNumber">
                   {(props) => (
-                    <p className="control is-expanded has-icons-left">
+                    <p className="control has-icons-left">
                       <input
                         {...props.input}
                         className="input is-normal"
@@ -65,18 +78,36 @@ export const ComicVineSearchForm = () => {
                   )}
                 </Field>
               </div>
+
+              <div className="field">
+                <Field name="issueYear">
+                  {(props) => (
+                    <p className="control has-icons-left">
+                      <input
+                        {...props.input}
+                        className="input is-normal"
+                        placeholder="Type the issue year"
+                      />
+                      <span className="icon is-small is-left">
+                        <i className="fas fa-hashtag"></i>
+                      </span>
+                    </p>
+                  )}
+                </Field>
+              </div>
             </div>
           </div>
+
           <div className="field is-horizontal">
             <div className="field-body">
               <div className="field">
                 <div className="control">
                   <button
                     type="submit"
-                    className="button is-info is-light is-outlined is-small"
+                    className="button is-success is-light is-outlined is-small"
                   >
                     <span className="icon">
-                      <i className="fas fa-hand-sparkles"></i>
+                      <i className="fas fa-search"></i>
                     </span>
                     <span>Search</span>
                   </button>
@@ -89,16 +120,7 @@ export const ComicVineSearchForm = () => {
     />
   );
 
-  return (
-    <Collapsible
-      trigger={"Match Manually"}
-      triggerTagName="a"
-      triggerClassName={"is-size-6"}
-      triggerOpenedClassName={"is-size-6"}
-    >
-      <MyForm />
-    </Collapsible>
-  );
+  return <MyForm />;
 };
 
 export default ComicVineSearchForm;

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} />
@@ -95,4 +94,4 @@ export const Dashboard = (): ReactElement => {
   );
 };
 
-export default Dashboard;
+export default Dashboard;

src/client/components/Dashboard/PullList.tsx

@@ -20,7 +20,7 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
   useEffect(() => {
     dispatch(
       getWeeklyPullList({
-        startDate: "2022-8-9",
+        startDate: "2022-12-25",
         pageSize: "15",
         currentPage: "1",
       }),
@@ -127,7 +127,7 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
       <Slider {...settings} ref={(c) => (sliderRef = c)}>
         {!isNil(pullList) &&
           pullList &&
-          map(pullList, (issue, idx) => {
+          map(pullList, ({issue}, idx) => {
             return (
               <Card
                 key={idx}
@@ -161,4 +161,4 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
   );
 };
 
-export default PullList;
+export default PullList;

src/client/components/Dashboard/RecentlyImported.tsx

@@ -2,7 +2,6 @@ import React, { ReactElement } from "react";
 import Card from "../Carda";
 import { Link } from "react-router-dom";
 import ellipsize from "ellipsize";
-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";
@@ -24,7 +23,6 @@ export const RecentlyImported = ({
     700: 2,
     600: 2,
   };
-
   return (
     <>
       <div className="content mt-5">
@@ -41,7 +39,7 @@ export const RecentlyImported = ({
         columnClassName="recent-comics-column"
       >
         {map(
-          comicBookCovers.docs,
+          comicBookCovers,
           (
             {
               _id,
@@ -64,7 +62,6 @@ export const RecentlyImported = ({
               comicInfo,
               locg,
             });
-
             const isComicBookMetadataAvailable =
               !isUndefined(comicvine) &&
               !isUndefined(comicvine.volumeInformation);
@@ -123,7 +120,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 +135,7 @@ export const RecentlyImported = ({
                       </dl>
                     </dd>
                   </Card>
-                ) : null}
+                )}
               </React.Fragment>
             );
           },
@@ -146,4 +143,4 @@ export const RecentlyImported = ({
       </Masonry>
     </>
   );
-};
+};

src/client/components/Library/Library.tsx

@@ -1,22 +1,46 @@
-import React, { useMemo, ReactElement, useCallback } from "react";
+import React, { useMemo, ReactElement, useCallback, useEffect } from "react";
 import PropTypes from "prop-types";
 import { useNavigate } from "react-router-dom";
-import T2Table from "../shared/T2Table";
 import { isEmpty, isNil, isUndefined } from "lodash";
 import MetadataPanel from "../shared/MetadataPanel";
-import SearchBar from "./SearchBar";
-import { useDispatch } from "react-redux";
+import T2Table from "../shared/T2Table";
+import { useDispatch, useSelector } from "react-redux";
 import { searchIssue } from "../../actions/fileops.actions";
 import ellipsize from "ellipsize";
 
-interface IComicBookLibraryProps {
-  data: {
-    searchResults: any;
-  };
-}
-
-export const Library = (data: IComicBookLibraryProps): ReactElement => {
-  const { searchResults } = data.data;
+/**
+ * Component that tabulates the contents of the user's ThreeTwo Library.
+ *
+ * @component
+ * @example
+ * <Library />
+ */
+export const Library = (): ReactElement => {
+  const searchResults = useSelector(
+    (state: RootState) => state.fileOps.libraryComics,
+  );
+  const searchError = useSelector((state: RootState) => {
+    console.log(state);
+    return state.fileOps.librarySearchError;
+  });
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(
+      searchIssue(
+        {
+          query: {},
+        },
+        {
+          pagination: {
+            size: 15,
+            from: 0,
+          },
+          type: "all",
+          trigger: "libraryPage",
+        },
+      ),
+    );
+  }, []);
 
   // programatically navigate to comic detail
   const navigate = useNavigate();
@@ -65,7 +89,8 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
   const WantedStatus = ({ value }) => {
     return !value ? <span className="tag is-info is-light">Wanted</span> : null;
   };
-  const columns =  [
+  const columns = useMemo(
+    () => [
       {
         header: "Comic Metadata",
         footer: 1,
@@ -75,7 +100,7 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
             id: "fileDetails",
             minWidth: 400,
             accessorKey: "_source",
-            cell: info => {
+            cell: (info) => {
               return <MetadataPanel data={info.getValue()} />;
             },
           },
@@ -84,11 +109,11 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
             accessorKey: "_source.sourcedMetadata.comicInfo",
             align: "center",
             minWidth: 250,
-            cell: info =>
+            cell: (info) =>
               !isEmpty(info.getValue()) ? (
                 <ComicInfoXML data={info.getValue()} />
               ) : (
-                <span className="tag">No ComicInfo.xml</span>
+                <span className="tag mt-5">No ComicInfo.xml</span>
               ),
           },
         ],
@@ -98,13 +123,12 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
         columns: [
           {
             header: "Publisher",
-            accessorKey:
-              "_source.sourcedMetadata.comicvine.volumeInformation",
-            cell: info => {
+            accessorKey: "_source.sourcedMetadata.comicvine.volumeInformation",
+            cell: (info) => {
               return (
                 !isNil(info.getValue()) && (
                   <h6 className="is-size-7 has-text-weight-bold">
-                    { info.getValue().publisher.name }
+                    {info.getValue().publisher.name}
                   </h6>
                 )
               );
@@ -113,21 +137,29 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
           {
             header: "Something",
             accessorKey: "_source.acquisition.source.wanted",
-            cell: info => {
-              !isUndefined(info.getValue()) ?
-              <WantedStatus value={info.getValue().toString()} /> : "Nothing";
+            cell: (info) => {
+              !isUndefined(info.getValue()) ? (
+                <WantedStatus value={info.getValue().toString()} />
+              ) : (
+                "Nothing"
+              );
             },
           },
         ],
-      }
-    ]
+      },
+    ],
+    [],
+  );
 
-  // ImportStatus.propTypes = {
-  //   value: PropTypes.bool.isRequired,
-  // };
-
-  const dispatch = useDispatch();
-  const goToNextPage = useCallback((pageIndex, pageSize) => {
+  /**
+   * Pagination control that fetches the next x (pageSize) items
+   * based on the y (pageIndex) offset from the ThreeTwo Elasticsearch index
+   * @param {number} pageIndex
+   * @param {number} pageSize
+   * @returns void
+   *
+   **/
+  const nextPage = useCallback((pageIndex: number, pageSize: number) => {
     dispatch(
       searchIssue(
         {
@@ -139,17 +171,25 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
             from: pageSize * pageIndex + 1,
           },
           type: "all",
+          trigger: "libraryPage",
         },
       ),
     );
   }, []);
 
-  const goToPreviousPage = useCallback((pageIndex, pageSize) => {
+  /**
+   * Pagination control that fetches the previous x (pageSize) items
+   * based on the y (pageIndex) offset from the ThreeTwo Elasticsearch index
+   * @param {number} pageIndex
+   * @param {number} pageSize
+   * @returns void
+   **/
+  const previousPage = useCallback((pageIndex: number, pageSize: number) => {
     let from = 0;
     if (pageIndex === 2) {
-      from = (pageIndex - 1) * pageSize + 2 - 27;
+      from = (pageIndex - 1) * pageSize + 2 - 17;
     } else {
-      from = (pageIndex - 1) * pageSize + 2 - 26;
+      from = (pageIndex - 1) * pageSize + 2 - 16;
     }
     dispatch(
       searchIssue(
@@ -162,30 +202,54 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
             from,
           },
           type: "all",
+          trigger: "libraryPage",
         },
       ),
     );
   }, []);
+
+  // ImportStatus.propTypes = {
+  //   value: PropTypes.bool.isRequired,
+  // };
   return (
     <section className="container">
       <div className="section">
-        <h1 className="title">Library</h1>
-        {/* Search bar */}
-        <SearchBar />
-        {!isUndefined(searchResults) && (
+        <div className="header-area">
+          <h1 className="title">Library</h1>
+        </div>
+        {!isEmpty(searchResults) ? (
           <div>
             <div className="library">
               <T2Table
-                rowData={searchResults.hits.hits}
                 totalPages={searchResults.hits.total.value}
                 columns={columns}
-                paginationHandlers={{
-                  nextPage: goToNextPage,
-                  previousPage: goToPreviousPage,
-                }}
+                sourceData={searchResults?.hits?.hits}
                 rowClickHandler={navigateToComicDetail}
+                paginationHandlers={{
+                  nextPage,
+                  previousPage,
+                }}
               />
-              {/* pagination controls */}
+            </div>
+          </div>
+        ) : (
+          <div className="columns">
+            <div className="column is-two-thirds">
+              <article className="message is-link">
+                <div className="message-body">
+                  No comics were found in the library, Elasticsearch reports no
+                  indices. Try importing a few comics into the library and come
+                  back.
+                </div>
+              </article>
+              <pre>
+                {!isUndefined(searchError.data) &&
+                  JSON.stringify(
+                    searchError.data.meta.body.error.root_cause,
+                    null,
+                    4,
+                  )}
+              </pre>
             </div>
           </div>
         )}

src/client/components/Library/LibraryContainer.tsx

@@ -1,63 +0,0 @@
-import { isEmpty, isUndefined } from "lodash";
-import React, { ReactElement, useEffect } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { searchIssue } from "../../actions/fileops.actions";
-import { Library } from "./Library";
-
-const LibraryContainer = (): ReactElement => {
-  const dispatch = useDispatch();
-  useEffect(() => {
-    dispatch(
-      searchIssue(
-        {
-          query: {},
-        },
-        {
-          pagination: {
-            size: 25,
-            from: 0,
-          },
-          type: "all",
-          trigger: "libraryPage"
-        },
-      ),
-    );
-  }, []);
-
-  const searchResults = useSelector(
-    (state: RootState) => state.fileOps.libraryComics,
-  );
-  const searchError = useSelector(
-    (state: RootState) => state.fileOps.librarySearchError,
-  );
-
-  return !isEmpty(searchResults) ? (
-    <Library data={{ searchResults }} />
-  ) : (
-    <div className="container">
-      <section className="section is-small">
-        <div className="columns">
-          <div className="column is-two-thirds">
-            <article className="message is-link">
-              <div className="message-body">
-                No comics were found in the library, Elasticsearch reports no
-                indices. Try importing a few comics into the library and come
-                back.
-              </div>
-            </article>
-            <pre>
-              {!isUndefined(searchError.data) &&
-                JSON.stringify(
-                  searchError.data.meta.body.error.root_cause,
-                  null,
-                  4,
-                )}
-            </pre>
-          </div>
-        </div>
-      </section>
-    </div>
-  );
-};
-
-export default LibraryContainer;

src/client/components/Library/SearchBar.tsx

@@ -21,19 +21,20 @@ export const SearchBar = (): ReactElement => {
             from: 0,
           },
           type: "volumeName",
+          trigger: "libraryPage",
         },
       ),
     );
   }, []);
   return (
-    <div className="box sticky">
+    <div className="box">
       <Form
         onSubmit={handleSubmit}
         initialValues={{}}
         render={({ handleSubmit, form, submitting, pristine, values }) => (
           <form onSubmit={handleSubmit}>
             <div className="field is-grouped">
-              <div className="control is-expanded search">
+              <div className="control search is-expanded">
                 <Field name="search">
                   {({ input, meta }) => {
                     return (
@@ -55,26 +56,7 @@ export const SearchBar = (): ReactElement => {
           </form>
         )}
       />
-      {/* <div className="column one-fifth">
-        <div className="field has-addons">
-          <p className="control">
-            <button className="button">
-              <span className="icon is-small">
-                <i className="fa-solid fa-list"></i>
-              </span>
-            </button>
-          </p>
-          <p className="control">
-            <button className="button">
-              <Link to="/library-grid">
-                <span className="icon is-small">
-                  <i className="fa-solid fa-image"></i>
-                </span>
-              </Link>
-            </button>
-          </p>
-        </div>
-      </div> */}
+      
     </div>
   );
 };

src/client/components/Library/TabulatedContentContainer.tsx

@@ -0,0 +1,66 @@
+import React, { ReactElement } from "react";
+import PullList from "../PullList/PullList";
+import { Volumes } from "../Volumes/Volumes";
+import WantedComics from "../WantedComics/WantedComics";
+import { Library } from "./Library";
+
+interface ITabulatedContentContainerProps {
+  category: string;
+}
+/**
+ * Component to draw the contents of a category in a table.
+ *
+ * @component
+ * @example
+ * return (
+ *   <TabulatedContentContainer category={"library"} />
+ * )
+ */
+
+const TabulatedContentContainer = (
+  props: ITabulatedContentContainerProps,
+): ReactElement => {
+  const { category } = props;
+  const renderTabulatedContent = () => {
+    switch (category) {
+      case "library":
+        return <Library />;
+      case "pullList":
+        return <PullList />;
+      case "wanted":
+        return <WantedComics />;
+      case "volumes":
+        return <Volumes />;
+      default:
+        return <></>;
+    }
+  };
+
+  return renderTabulatedContent();
+  // : (
+  //   <div className="container">
+  //     <section className="section is-small">
+  //       <div className="columns">
+  //         <div className="column is-two-thirds">
+  //           <article className="message is-link">
+  //             <div className="message-body">
+  //               No comics were found in the library, and Elasticsearch doesn't have any
+  //               indices. Try resetting the library from <code>Settings > Flush DB & Temporary Folders</code> and then import your library again.
+  //             </div>
+  //           </article>
+  //           <pre>
+  //             {!isUndefined(searchError.data) &&
+  //               JSON.stringify(
+  //                 searchError.data.meta.body.error.root_cause,
+  //                 null,
+  //                 4,
+  //               )}
+  //           </pre>
+  //         </div>
+  //       </div>
+  //     </section>
+  //   </div>
+  // );
+};
+
+export default TabulatedContentContainer;

src/client/components/Navbar.tsx

@@ -1,15 +1,25 @@
-import React from "react";
+import React, { useContext } from "react";
 import { SearchBar } from "./GlobalSearchBar/SearchBar";
 import { DownloadProgressTick } from "./ComicDetail/DownloadProgressTick";
 import { Link } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { isUndefined } from "lodash";
+import { format, fromUnixTime } from "date-fns";
 
 const Navbar: React.FunctionComponent = (props) => {
   const downloadProgressTick = useSelector(
     (state: RootState) => state.airdcpp.downloadProgressData,
   );
 
+  const airDCPPSocketConnectionStatus = useSelector(
+    (state: RootState) => state.airdcpp.isAirDCPPSocketConnected,
+  );
+  const airDCPPSessionInfo = useSelector(
+    (state: RootState) => state.airdcpp.airDCPPSessionInfo,
+  );
+  const socketDisconnectionReason = useSelector(
+    (state: RootState) => state.airdcpp.socketDisconnectionReason,
+  );
   return (
     <nav className="navbar is-fixed-top">
       <div className="navbar-brand">
@@ -72,18 +82,66 @@ const Navbar: React.FunctionComponent = (props) => {
           <div className="navbar-item has-dropdown is-hoverable">
             <a className="navbar-link is-arrowless">
               <i className="fa-solid fa-download"></i>
-              {downloadProgressTick && (
-                <div className="pulsating-circle"></div>
-              )}
+              {downloadProgressTick && <div className="pulsating-circle"></div>}
             </a>
             {!isUndefined(downloadProgressTick) ? (
-              <div className="navbar-dropdown download-progress-meter">
+              <div className="navbar-dropdown is-right">
                 <a className="navbar-item">
                   <DownloadProgressTick data={downloadProgressTick} />
-                </a>
-              </div>
+                </a>              </div>
             ) : null}
           </div>
+          {/* AirDC++ socket connection status */}
+          <div className="navbar-item has-dropdown is-hoverable">
+            {airDCPPSocketConnectionStatus ? (
+              <>
+                <a className="navbar-link is-arrowless has-text-success">
+                  <i className="fa-solid fa-bolt"></i>
+                </a>
+                <div className="navbar-dropdown pt-4 pr-2 pl-2 is-right airdcpp-status">
+                  {/* AirDC++ Session Information */}
+
+                  <p>
+                    Last login was{" "}
+                    <span className="tag">
+                      {format(
+                        fromUnixTime(airDCPPSessionInfo.user.last_login),
+                        "dd MMMM, yyyy",
+                      )}
+                    </span>
+                  </p>
+                  <hr className="navbar-divider" />
+                  <p>
+                    <span className="tag has-text-success">
+                      {airDCPPSessionInfo.user.username}
+                    </span>
+                    connected to{" "}
+                    <span className="tag has-text-success">
+                      {airDCPPSessionInfo.system_info.client_version}
+                    </span>{" "}
+                    with session ID{" "}
+                    <span className="tag has-text-success">
+                      {airDCPPSessionInfo.session_id}
+                    </span>
+                  </p>
+
+                  {/* <pre>{JSON.stringify(airDCPPSessionInfo, null, 2)}</pre> */}
+                </div>
+              </>
+            ) : (
+              <>
+                <a className="navbar-link is-arrowless has-text-danger">
+                  <i className="fa-solid fa-bolt"></i>
+                </a>
+                <div className="navbar-dropdown pr-2 pl-2 is-right">
+                  <pre>
+                    {JSON.stringify(socketDisconnectionReason, null, 2)}
+                  </pre>
+                </div>
+              </>
+            )}
+          </div>
+
           <div className="navbar-item has-dropdown is-hoverable is-mega">
             <div className="navbar-link flex">Blog</div>
             <div id="blogDropdown" className="navbar-dropdown">

src/client/components/PullList/PullList.tsx

@@ -4,18 +4,19 @@ import { getWeeklyPullList } from "../../actions/comicinfo.actions";
 import { useDispatch, useSelector } from "react-redux";
 import Card from "../Carda";
 import ellipsize from "ellipsize";
+import { isNil } from "lodash";
 
 export const PullList = (): ReactElement => {
   const pullListComics = useSelector(
     (state: RootState) => state.comicInfo.pullList,
   );
-  console.log(pullListComics);
+
   const dispatch = useDispatch();
   useEffect(() => {
     dispatch(
       getWeeklyPullList({
-        startDate: "2022-6-1",
-        pageSize: "100",
+        startDate: "2022-11-15",
+        pageSize: "15",
         currentPage: "1",
       }),
     );
@@ -25,24 +26,25 @@ export const PullList = (): ReactElement => {
   const columnData = useMemo(
     () => [
       {
-        Header: "Comic Information",
+        header: "Comic Information",
         columns: [
           {
-            Header: "Details",
+            header: "Details",
             id: "comicDetails",
             minWidth: 450,
-            accessor: (row) => {
-              console.log(row);
+            accessorKey: "issue",
+            cell: (row) => {
+              const item = row.getValue();
               return (
                 <div className="columns">
-                  <div className="column">
+                  <div className="column is-three-quarters">
                     <div className="comic-detail issue-metadata">
                       <dl>
                         <dd>
                           <div className="columns mt-2">
                             <div className="column is-3">
                               <Card
-                                imageUrl={row.cover}
+                                imageUrl={item.cover}
                                 orientation={"vertical"}
                                 hasDetails={false}
                                 // cardContainerStyle={{ maxWidth: 200 }}
@@ -52,18 +54,20 @@ export const PullList = (): ReactElement => {
                               <dl>
                                 <dt>
                                   <h6 className="name has-text-weight-medium mb-1">
-                                    {row.name}
+                                    {item.name}
                                   </h6>
                                 </dt>
                                 <dd className="is-size-7">
                                   published by{" "}
                                   <span className="has-text-weight-semibold">
-                                    {row.publisher}
+                                    {item.publisher}
                                   </span>
                                 </dd>
 
                                 <dd className="is-size-7">
-                                  <span>{ellipsize(row.description, 190)}</span>
+                                  <span>
+                                    {ellipsize(item.description, 190)}
+                                  </span>
                                 </dd>
 
                                 <dd className="is-size-7 mt-2">
@@ -71,10 +75,10 @@ export const PullList = (): ReactElement => {
                                     <div className="control">
                                       <span className="tags">
                                         <span className="tag is-success is-light has-text-weight-semibold">
-                                          {row.price}
+                                          {item.price}
                                         </span>
                                         <span className="tag is-success is-light">
-                                          {row.pulls}
+                                          {item.pulls}
                                         </span>
                                       </span>
                                     </div>
@@ -99,16 +103,24 @@ export const PullList = (): ReactElement => {
   return (
     <section className="container">
       <div className="section">
-        <h1 className="title">Weekly Pull List</h1>
-        <T2Table
-          rowData={pullListComics}
-          columns={columnData}
-          totalPages={pullListComics.length}
-          paginationHandlers={{
-            nextPage: nextPageHandler,
-            previousPage: previousPageHandler,
-          }}
-        />
+        <div className="header-area">
+          <h1 className="title">Weekly Pull List</h1>
+        </div>
+        {!isNil(pullListComics) && (
+          <div>
+            <div className="library">
+            <T2Table
+              sourceData={pullListComics}
+              columns={columnData}
+              totalPages={pullListComics.length}
+              paginationHandlers={{
+                nextPage: nextPageHandler,
+                previousPage: previousPageHandler,
+              }}
+            />
+            </div>
+          </div>
+        )}
       </div>
     </section>
   );

src/client/components/Volumes/Volumes.tsx

@@ -2,16 +2,13 @@ import React, { ReactElement, useEffect, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { searchIssue } from "../../actions/fileops.actions";
 import Card from "../Carda";
-import SearchBar from "../Library/SearchBar";
 import T2Table from "../shared/T2Table";
 import ellipsize from "ellipsize";
-import { isUndefined } from "lodash";
 import { convert } from "html-to-text";
+import { isUndefined } from "lodash";
 
 export const Volumes = (props): ReactElement => {
-  const volumes = useSelector(
-    (state: RootState) => state.fileOps.librarySearchResults,
-  );
+  const volumes = useSelector((state: RootState) => state.fileOps.volumes);
   const dispatch = useDispatch();
   useEffect(() => {
     dispatch(
@@ -25,19 +22,20 @@ export const Volumes = (props): ReactElement => {
             from: 0,
           },
           type: "volumes",
+          trigger: "volumesPage",
         },
       ),
     );
   }, []);
-  console.log(volumes);
-
   const columnData = useMemo(
     () => [
       {
-        Header: "Volume Details",
+        header: "Volume Details",
         id: "volumeDetails",
         minWidth: 450,
-        accessor: (row) => {
+        accessorKey: "_source",
+        cell: (row) => {
+          const foo = row.getValue();
           return (
             <div className="columns">
               <div className="column">
@@ -45,11 +43,11 @@ export const Volumes = (props): ReactElement => {
                   <dl>
                     <dd>
                       <div className="columns mt-2">
-                        <div className="column is-3">
+                        <div className="">
                           <Card
                             imageUrl={
-                              row._source.sourcedMetadata.comicvine
-                                .volumeInformation.image.thumb_url
+                              foo.sourcedMetadata.comicvine.volumeInformation
+                                .image.thumb_url
                             }
                             orientation={"vertical"}
                             hasDetails={false}
@@ -61,7 +59,7 @@ export const Volumes = (props): ReactElement => {
                             <dt>
                               <h6 className="name has-text-weight-medium mb-1">
                                 {
-                                  row._source.sourcedMetadata.comicvine
+                                  foo.sourcedMetadata.comicvine
                                     .volumeInformation.name
                                 }
                               </h6>
@@ -70,7 +68,7 @@ export const Volumes = (props): ReactElement => {
                               published by{" "}
                               <span className="has-text-weight-semibold">
                                 {
-                                  row._source.sourcedMetadata.comicvine
+                                  foo.sourcedMetadata.comicvine
                                     .volumeInformation.publisher.name
                                 }
                               </span>
@@ -80,7 +78,7 @@ export const Volumes = (props): ReactElement => {
                               <span>
                                 {ellipsize(
                                   convert(
-                                    row._source.sourcedMetadata.comicvine
+                                    foo.sourcedMetadata.comicvine
                                       .volumeInformation.description,
                                     {
                                       baseElements: {
@@ -102,7 +100,7 @@ export const Volumes = (props): ReactElement => {
                                     </span>
                                     <span className="tag is-success is-light">
                                       {
-                                        row._source.sourcedMetadata.comicvine
+                                        foo.sourcedMetadata.comicvine
                                           .volumeInformation.count_of_issues
                                       }
                                     </span>
@@ -122,36 +120,35 @@ export const Volumes = (props): ReactElement => {
         },
       },
       {
-        Header: "Download Status",
+        header: "Download Status",
         columns: [
           {
-            Header: "Files",
-            accessor: "_source.acquisition.directconnect",
+            header: "Files",
+            accessorKey: "_source.acquisition.directconnect",
             align: "right",
-            Cell: (props) => {
+            cell: (props) => {
+              const row = props.getValue();
               return (
                 <div
                   style={{
                     display: "flex",
-                    // flexDirection: "column",
+                    flexDirection: "column",
                     justifyContent: "center",
                   }}
                 >
-                  {props.cell.value.length > 0 ? (
-                    <span className="tag is-warning">
-                      {props.cell.value.length}
-                    </span>
+                  {row.length > 0 ? (
+                    <span className="tag is-warning">{row.length}</span>
                   ) : null}
                 </div>
               );
             },
           },
           {
-            Header: "Type",
+            header: "Type",
             id: "Air",
           },
           {
-            Header: "Type",
+            header: "Type",
             id: "dcc",
           },
         ],
@@ -162,16 +159,24 @@ export const Volumes = (props): ReactElement => {
   return (
     <section className="container">
       <div className="section">
-        {volumes.hits ? (
+        <div className="header-area">
+          <h1 className="title">Volumes</h1>
+        </div>
+        {!isUndefined(volumes.hits) && (
           <div>
             <div className="library">
-              <h1 className="title">Volumes</h1>
-              {/* Search bar */}
-              <SearchBar />
-              <T2Table rowData={volumes.hits.hits} columns={columnData} />
+              <T2Table
+                sourceData={volumes?.hits?.hits}
+                totalPages={volumes.hits.hits.length}
+                paginationHandlers={{
+                  nextPage: () => {},
+                  previousPage: () => {},
+                }}
+                columns={columnData}
+              />
             </div>
           </div>
-        ) : null}
+        )}
       </div>
     </section>
   );

src/client/components/WantedComics/WantedComics.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useEffect, useMemo } from "react";
+import React, { ReactElement, useCallback, useEffect, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { searchIssue } from "../../actions/fileops.actions";
 import SearchBar from "../Library/SearchBar";
@@ -86,23 +86,81 @@ export const WantedComics = (props): ReactElement => {
     },
   ];
 
+  /**
+   * Pagination control that fetches the next x (pageSize) items
+   * based on the y (pageIndex) offset from the Elasticsearch index
+   * @param {number} pageIndex
+   * @param {number} pageSize
+   * @returns void
+   *  
+   **/
+  const nextPage = useCallback((pageIndex: number, pageSize: number) => {
+    dispatch(
+      searchIssue(
+        {
+          query: {},
+        },
+        {
+          pagination: {
+            size: pageSize,
+            from: pageSize * pageIndex + 1,
+          },
+          type: "wanted",
+          trigger: "wantedComicsPage",
+        },
+      ),
+    );
+  }, []);
+
+
+  /**
+   * Pagination control that fetches the previous x (pageSize) items
+   * based on the y (pageIndex) offset from the Elasticsearch index
+   * @param {number} pageIndex
+   * @param {number} pageSize
+   * @returns void
+   **/
+  const previousPage = useCallback((pageIndex: number, pageSize: number) => {
+    let from = 0;
+    if (pageIndex === 2) {
+      from = (pageIndex - 1) * pageSize + 2 - 17;
+    } else {
+      from = (pageIndex - 1) * pageSize + 2 - 16;
+    }
+    dispatch(
+      searchIssue(
+        {
+          query: {},
+        },
+        {
+          pagination: {
+            size: pageSize,
+            from,
+          },
+          type: "wanted",
+          trigger: "wantedComicsPage"
+        },
+      ),
+    );
+  }, []);
+
   return (
     <section className="container">
       <div className="section">
-        <h1 className="title">Wanted Comics</h1>
-        {/* Search bar */}
-        <SearchBar />
+        <div className="header-area">
+          <h1 className="title">Wanted Comics</h1>
+        </div>
         {!isEmpty(wantedComics) && (
           <div>
             <div className="library">
               <T2Table
-                rowData={wantedComics}
+                sourceData={wantedComics}
                 totalPages={wantedComics.length}
                 columns={columnData}
-              // paginationHandlers={{
-              //   nextPage: goToNextPage,
-              //   previousPage: goToPreviousPage,
-              // }}
+                paginationHandlers={{
+                  nextPage: nextPage,
+                  previousPage: previousPage,
+                }}
               // rowClickHandler={navigateToComicDetail}
               />
               {/* pagination controls */}

src/client/components/shared/MetadataPanel.tsx

@@ -77,7 +77,9 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
                   </div>
                 )}
               </div>
+
             </div>
+            
           </dd>
         </dl>
       ),
@@ -211,7 +213,7 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
                   orientation={"vertical"}
                   hasDetails={false}
                   imageStyle={props.imageStyle}
-                  // cardContainerStyle={{ maxWidth: 200 }}
+                // cardContainerStyle={{ maxWidth: 200 }}
                 />
               </div>
               <div className="column">{metadataPanel.content()}</div>

src/client/components/shared/T2Table.tsx

@@ -1,27 +1,114 @@
-import React, { ReactElement, useState } from "react";
+import React, { ReactElement, useMemo, useState } from "react";
 import PropTypes from "prop-types";
+import SearchBar from "../Library/SearchBar";
+import { Link } from "react-router-dom";
 import {
   ColumnDef,
   flexRender,
   getCoreRowModel,
+  getFilteredRowModel,
   useReactTable,
+  PaginationState,
 } from "@tanstack/react-table";
 
 export const T2Table = (tableOptions): ReactElement => {
-  const { rowData, columns, paginationHandlers, totalPages, rowClickHandler } =
+  const { sourceData, columns, paginationHandlers: { nextPage, previousPage }, totalPages, rowClickHandler } =
     tableOptions;
-  const [isPageSizeDropdownCollapsed, collapsePageSizeDropdown] =
-    useState(false);
-  const togglePageSizeDropdown = () =>
-    collapsePageSizeDropdown(!isPageSizeDropdownCollapsed);
+
+  const [{ pageIndex, pageSize }, setPagination] =
+    useState<PaginationState>({
+      pageIndex: 1,
+      pageSize: 15,
+    });
+    console.log(sourceData)
+
+
+  const pagination = useMemo(
+    () => ({
+      pageIndex,
+      pageSize,
+    }),
+    [pageIndex, pageSize]
+  );
+
+  /**
+   * Pagination control to move forward one page 
+   * @returns void 
+   */
+  const goToNextPage = () => {
+    setPagination({
+      pageIndex: pageIndex + 1,
+      pageSize,
+    });
+    nextPage(pageIndex, pageSize);
+  }
+
+  /**
+   * Pagination control to move backward one page 
+   * @returns void
+   **/
+  const goToPreviousPage = () => {
+    setPagination({
+      pageIndex: pageIndex - 1,
+      pageSize,
+    });
+    previousPage(pageIndex, pageSize);
+  }
+
   const table = useReactTable({
-    data: rowData,
+    data: sourceData,
     columns,
+    manualPagination: true,
     getCoreRowModel: getCoreRowModel(),
+    pageCount: sourceData.length ?? -1,
+    state: {
+      pagination,
+    },
+    onPaginationChange: setPagination,
   });
 
   return (
     <>
+      <div className="columns table-controls">
+        {/* Search bar */}
+        <div className="column is-half">
+          <SearchBar />
+        </div>
+        {/* pagination controls */}
+        <nav className="pagination columns">
+          <div className="mr-4 has-text-weight-semibold has-text-left">
+            <p className="is-size-5">Page {pageIndex} of {Math.ceil(totalPages / pageSize)}</p>
+            {/* <p>{totalPages} comics in all</p> */}
+          </div>
+          <div className="field has-addons">
+            <p className="control">
+              <div className="button" onClick={() => goToPreviousPage()}> <i className="fas fa-chevron-left"></i></div>
+            </p>
+            <p className="control">
+              <div className="button" onClick={() => goToNextPage()}> <i className="fas fa-chevron-right"></i> </div>
+            </p>
+
+            <div className="field has-addons ml-5">
+              <p className="control">
+                <button className="button">
+                  <span className="icon is-small">
+                    <i className="fa-solid fa-list"></i>
+                  </span>
+                </button>
+              </p>
+              <p className="control">
+                <button className="button">
+                  <Link to="/library-grid">
+                    <span className="icon is-small">
+                      <i className="fa-solid fa-image"></i>
+                    </span>
+                  </Link>
+                </button>
+              </p>
+            </div>
+          </div>
+        </nav>
+      </div>
       <table className="table is-hoverable">
         <thead>
           {table.getHeaderGroups().map((headerGroup, idx) => (
@@ -60,15 +147,12 @@ export const T2Table = (tableOptions): ReactElement => {
           })}
         </tbody>
       </table>
-
-      {/* pagination control */}
-
     </>
   );
 };
 
 T2Table.propTypes = {
-  rowData: PropTypes.array,
+  sourceData: PropTypes.array,
   totalPages: PropTypes.number,
   columns: PropTypes.array,
   paginationHandlers: PropTypes.shape({

src/client/constants/action-types.ts

@@ -51,6 +51,7 @@ export const IMS_COMIC_BOOK_GROUPS_CALL_IN_PROGRESS =
   "IMS_COMIC_BOOK_GROUPS_CALL_IN_PROGRESS";
 export const IMS_COMIC_BOOK_GROUPS_CALL_FAILED =
   "IMS_COMIC_BOOK_GROUPS_CALL_FAILED";
+export const VOLUMES_FETCHED="VOLUMES_FETCHED";
 
 // search results from the Search service
 export const SS_SEARCH_RESULTS_FETCHED = "SS_SEARCH_RESULTS_FETCHED";
@@ -80,6 +81,8 @@ export const IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS =
 export const IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_FAILED =
   "IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_FAILED";
 
+export const COMICBOOK_EXTRACTION_SUCCESS = "COMICBOOK_EXTRACTION_SUCCESS";
+
 // Image file stats
 export const IMG_ANALYSIS_CALL_IN_PROGRESS = "IMG_ANALYSIS_CALL_IN_PROGRESS";
 export const IMG_ANALYSIS_DATA_FETCH_SUCCESS =
@@ -112,6 +115,8 @@ export const AIRDCPP_FILE_DOWNLOAD_COMPLETED =
 export const LS_SINGLE_IMPORT = "LS_SINGLE_IMPORT";
 export const AIRDCPP_BUNDLES_FETCHED = "AIRDCPP_BUNDLES_FETCHED";
 export const AIRDCPP_DOWNLOAD_PROGRESS_TICK = "AIRDCPP_DOWNLOAD_PROGRESS_TICK";
+export const AIRDCPP_SOCKET_CONNECTED = "AIRDCPP_SOCKET_CONNECTED";
+export const AIRDCPP_SOCKET_DISCONNECTED = "AIRDCPP_SOCKET_DISCONNECTED";
 
 // Transfers
 export const AIRDCPP_TRANSFERS_FETCHED = "AIRDCPP_TRANSFERS_FETCHED";
@@ -134,4 +139,4 @@ export const SETTINGS_DB_FLUSH_SUCCESS = "SETTINGS_DB_FLUSH_SUCCESS";
 // Metron Metadata
 export const METRON_DATA_FETCH_SUCCESS = "METRON_DATA_FETCH_SUCCESS";
 export const METRON_DATA_FETCH_IN_PROGRESS = "METRON_DATA_FETCH_IN_PROGRESS";
-export const METRON_DATA_FETCH_ERROR = "METRON_DATA_FETCH_ERROR";
+export const METRON_DATA_FETCH_ERROR = "METRON_DATA_FETCH_ERROR";

src/client/context/AirDCPPSocket.tsx

@@ -1,7 +1,9 @@
 import { isEmpty, isUndefined } from "lodash";
 import React, { createContext, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { toggleAirDCPPSocketConnectionStatus } from "../actions/airdcpp.actions";
 import { getSettings } from "../actions/settings.actions";
+
 import AirDCPPSocket from "../services/DcppSearchService";
 
 const AirDCPPSocketContextProvider = ({ children }) => {
@@ -12,7 +14,7 @@ const AirDCPPSocketContextProvider = ({ children }) => {
       airDCPPState: {
         settings: settingsObject,
         socket: {},
-        socketConnectionInformation: {},
+        socketConectionInformation: {},
       },
     });
   };
@@ -51,16 +53,35 @@ const AirDCPPSocketContextProvider = ({ children }) => {
         client: { host },
       },
     } = configuration;
+
     const initializedAirDCPPSocket = new AirDCPPSocket({
       protocol: `${host.protocol}`,
-      hostname: `${host.hostname}`,
+      hostname: `${host.hostname}:${host.port}`,
+      username: `${host.username}`,
+      password: `${host.password}`,
     });
 
-    const socketConnectionInformation = await initializedAirDCPPSocket.connect(
-      `${host.username}`,
-      `${host.password}`,
-      true,
-    );
+    // connect and disconnect handlers
+    initializedAirDCPPSocket.onConnected = (sessionInfo) => {
+      dispatch(toggleAirDCPPSocketConnectionStatus("connected", sessionInfo));
+    };
+    initializedAirDCPPSocket.onDisconnected = async (
+      reason,
+      code,
+      wasClean,
+    ) => {
+      dispatch(
+        toggleAirDCPPSocketConnectionStatus("disconnected", {
+          reason,
+          code,
+          wasClean,
+        }),
+      );
+    };
+
+    const socketConnectionInformation = await initializedAirDCPPSocket.connect();
+
+    // update the state with the new socket connection information
     persistSettings({
       ...airDCPPState,
       airDCPPState: {
@@ -80,7 +101,7 @@ const AirDCPPSocketContextProvider = ({ children }) => {
 };
 const AirDCPPSocketContext = createContext({
   airDCPPState: {},
-  saveSettings: () => {},
+  saveSettings: () => { },
 });
 
 export { AirDCPPSocketContext, AirDCPPSocketContextProvider };

src/client/reducers/airdcpp.reducer.ts

@@ -9,6 +9,8 @@ import {
   AIRDCPP_BUNDLES_FETCHED,
   AIRDCPP_TRANSFERS_FETCHED,
   LIBRARY_ISSUE_BUNDLES,
+  AIRDCPP_SOCKET_CONNECTED,
+  AIRDCPP_SOCKET_DISCONNECTED,
 } from "../constants/action-types";
 import { LOCATION_CHANGE } from "redux-first-history";
 import { isNil, isUndefined } from "lodash";
@@ -24,6 +26,9 @@ const initialState = {
   downloadFileStatus: {},
   bundles: [],
   transfers: [],
+  isAirDCPPSocketConnected: false,
+  airDCPPSessionInfo: {},
+  socketDisconnectionReason: {},
 };
 
 function airdcppReducer(state = initialState, action) {
@@ -95,8 +100,23 @@ function airdcppReducer(state = initialState, action) {
         ...state,
         transfers: action.bundles,
       };
+
+    case AIRDCPP_SOCKET_CONNECTED:
+      return {
+        ...state,
+        isAirDCPPSocketConnected: true,
+        airDCPPSessionInfo: action.data,
+      };
+
+    case AIRDCPP_SOCKET_DISCONNECTED:
+      return {
+        ...state,
+        isAirDCPPSocketConnected: false,
+        socketDisconnectionReason: action.data,
+      };
     case LOCATION_CHANGE:
       return {
+        ...state,
         searchResults: [],
         isAirDCPPSearchInProgress: false,
         searchInfo: null,
@@ -105,7 +125,6 @@ function airdcppReducer(state = initialState, action) {
         bundleDBImportResult: null,
         // bundles: [],
       };
-
     default:
       return state;
   }

src/client/reducers/comicinfo.reducer.ts

@@ -109,10 +109,14 @@ function comicinfoReducer(state = initialState, action) {
         ...state,
       };
     case CV_WEEKLY_PULLLIST_FETCHED: {
+      const foo = [];
+      action.data.map((item) => {
+        foo.push({issue: item})
+      });
       return {
         ...state,
         inProgress: false,
-        pullList: [...action.data],
+        pullList: foo,
       };
     }
     case LIBRARY_STATISTICS_CALL_IN_PROGRESS:

src/client/reducers/fileops.reducer.ts

@@ -28,7 +28,12 @@ import {
   LS_IMPORT_CALL_IN_PROGRESS,
   SS_SEARCH_FAILED,
   SS_SEARCH_RESULTS_FETCHED_SPECIAL,
+  VOLUMES_FETCHED,
+  COMICBOOK_EXTRACTION_SUCCESS,
 } from "../constants/action-types";
+import { removeLeadingPeriod } from "../shared/utils/formatting.utils";
+import { LIBRARY_SERVICE_HOST } from "../constants/endpoints";
+
 const initialState = {
   IMSCallInProgress: false,
   IMGCallInProgress: false,
@@ -41,10 +46,14 @@ const initialState = {
   isComicVineMetadataImportInProgress: false,
   comicVineMetadataImportError: {},
   rawImportError: {},
-  extractedComicBookArchive: [],
+  extractedComicBookArchive: {
+    reading: [],
+    analysis: [],
+  },
   recentComics: [],
   wantedComics: [],
   libraryComics: [],
+  volumes: [],
   librarySearchResultsFormatted: [],
   librarySearchResultCount: 0,
   libraryQueueResults: [],
@@ -79,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 {
@@ -129,13 +138,7 @@ function fileOpsReducer(state = initialState, action) {
         comicBookExtractionInProgress: true,
       };
     }
-    case IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS: {
-      return {
-        ...state,
-        extractedComicBookArchive: action.extractedComicBookArchive,
-        comicBookExtractionInProgress: false,
-      };
-    }
+
     case LOCATION_CHANGE: {
       return {
         ...state,
@@ -150,11 +153,44 @@ 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]
       };
     }
+
+    case COMICBOOK_EXTRACTION_SUCCESS: {
+      const comicBookPages: string[] = [];
+      map(action.result.files, (page) => {
+        const pageFilePath = removeLeadingPeriod(page);
+        const imagePath = encodeURI(`${LIBRARY_SERVICE_HOST}${pageFilePath}`);
+        comicBookPages.push(imagePath);
+      });
+
+      switch (action.result.purpose) {
+        case "reading":
+          return {
+            ...state,
+            extractedComicBookArchive: {
+              reading: comicBookPages,
+            },
+            comicBookExtractionInProgress: false,
+          };
+
+        case "analysis":
+          return {
+            ...state,
+            extractedComicBookArchive: {
+              analysis: comicBookPages,
+            },
+            comicBookExtractionInProgress: false,
+          };
+      }
+    }
     case LS_QUEUE_DRAINED: {
       console.log("drained", action);
       return {
@@ -196,7 +232,6 @@ function fileOpsReducer(state = initialState, action) {
     }
     case SS_SEARCH_RESULTS_FETCHED_SPECIAL: {
       const foo = [];
-      console.log(action.data.hits)
       if (!isUndefined(action.data.hits)) {
         map(action.data.hits.hits, ({ _source }) => {
           foo.push(_source);
@@ -221,7 +256,14 @@ function fileOpsReducer(state = initialState, action) {
         SSCallInProgress: false,
       };
     }
-    
+
+    case VOLUMES_FETCHED:
+      return {
+        ...state,
+        volumes: action.data,
+        SSCallInProgress: false,
+      };
+
     case SS_SEARCH_FAILED: {
       return {
         ...state,
@@ -241,4 +283,4 @@ function fileOpsReducer(state = initialState, action) {
   }
 }
 
-export default fileOpsReducer;
+export default fileOpsReducer;

src/client/services/DcppSearchService.ts

@@ -10,7 +10,7 @@ class AirDCPPSocket {
     }
     const options = {
       url: `${socketProtocol}://${configuration.hostname}/api/v1/`,
-      autoReconnect: false,
+      autoReconnect: true,
       reconnectInterval: 5,
       logLevel: "verbose",
       ignoredListenerEvents: [
@@ -18,6 +18,8 @@ class AirDCPPSocket {
         "hash_statistics",
         "hub_counts_updated",
       ],
+      username: `${configuration.username}`,
+      password: `${configuration.password}`,
     };
     const AirDCPPSocketInstance = Socket(options, window.WebSocket as any);
     return AirDCPPSocketInstance;

src/client/services/api/SearchApi.ts

@@ -18,7 +18,7 @@ function sleep(ms: number): Promise<NodeJS.Timeout> {
 }
 
 export const search = async (data: SearchData) => {
-  await SocketService.connect("admin", "password");
+  await SocketService.connect();
   const instance: SearchInstance = await SocketService.post("search");
   const unsubscribe = await SocketService.addListener(
     "search",

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 {
@@ -87,4 +90,4 @@ export const determineExternalMetadata = (metadataSource, source) => {
     default:
       break;
   }
-};
+};

yarn.lock

@@ -1283,7 +1283,7 @@
   dependencies:
     tslib "^2.0.0"
 
-"@emotion/babel-plugin@^11.3.0", "@emotion/babel-plugin@^11.7.1":
+"@emotion/babel-plugin@^11.7.1":
   version "11.9.2"
   resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz#723b6d394c89fb2ef782229d92ba95a740576e95"
   integrity sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==
@@ -1317,28 +1317,45 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
-"@emotion/is-prop-valid@^1.1.0", "@emotion/is-prop-valid@^1.1.1":
+"@emotion/hash@^0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7"
+  integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==
+
+"@emotion/is-prop-valid@^1.1.0":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.3.tgz#f0907a416368cf8df9e410117068e20fe87c0a3a"
   integrity sha512-RFg04p6C+1uO19uG8N+vqanzKqiM9eeV1LDOG3bmkYmuOj7NbKNlFC/4EZq5gnwAIlcC/jOT24f8Td0iax2SXA==
   dependencies:
     "@emotion/memoize" "^0.7.4"
 
+"@emotion/is-prop-valid@^1.1.2":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83"
+  integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==
+  dependencies:
+    "@emotion/memoize" "^0.8.0"
+
 "@emotion/memoize@^0.7.4", "@emotion/memoize@^0.7.5":
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
   integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
 
-"@emotion/react@11.7.1":
-  version "11.7.1"
-  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.7.1.tgz#3f800ce9b20317c13e77b8489ac4a0b922b2fe07"
-  integrity sha512-DV2Xe3yhkF1yT4uAUoJcYL1AmrnO5SVsdfvu+fBuS7IbByDeTVx9+wFmvx9Idzv7/78+9Mgx2Hcmr7Fex3tIyw==
+"@emotion/memoize@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
+  integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==
+
+"@emotion/react@11.9.0":
+  version "11.9.0"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.9.0.tgz#b6d42b1db3bd7511e7a7c4151dc8bc82e14593b8"
+  integrity sha512-lBVSF5d0ceKtfKCDQJveNAtkC7ayxpVlgOohLgXqRwqWr9bOf4TZAFFyIcNngnV6xK6X4x2ZeXq7vliHkoVkxQ==
   dependencies:
     "@babel/runtime" "^7.13.10"
+    "@emotion/babel-plugin" "^11.7.1"
     "@emotion/cache" "^11.7.1"
-    "@emotion/serialize" "^1.0.2"
-    "@emotion/sheet" "^1.1.0"
-    "@emotion/utils" "^1.0.0"
+    "@emotion/serialize" "^1.0.3"
+    "@emotion/utils" "^1.1.0"
     "@emotion/weak-memoize" "^0.2.5"
     hoist-non-react-statics "^3.3.1"
 
@@ -1366,21 +1383,32 @@
     "@emotion/utils" "^1.0.0"
     csstype "^3.0.2"
 
-"@emotion/sheet@^1.1.0", "@emotion/sheet@^1.1.1":
+"@emotion/serialize@^1.0.3":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.1.tgz#0595701b1902feded8a96d293b26be3f5c1a5cf0"
+  integrity sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==
+  dependencies:
+    "@emotion/hash" "^0.9.0"
+    "@emotion/memoize" "^0.8.0"
+    "@emotion/unitless" "^0.8.0"
+    "@emotion/utils" "^1.2.0"
+    csstype "^3.0.2"
+
+"@emotion/sheet@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.1.1.tgz#015756e2a9a3c7c5f11d8ec22966a8dbfbfac787"
   integrity sha512-J3YPccVRMiTZxYAY0IOq3kd+hUP8idY8Kz6B/Cyo+JuXq52Ek+zbPbSQUrVQp95aJ+lsAW7DPL1P2Z+U1jGkKA==
 
-"@emotion/styled@11.6.0":
-  version "11.6.0"
-  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.6.0.tgz#9230d1a7bcb2ebf83c6a579f4c80e0664132d81d"
-  integrity sha512-mxVtVyIOTmCAkFbwIp+nCjTXJNgcz4VWkOYQro87jE2QBTydnkiYusMrRGFtzuruiGK4dDaNORk4gH049iiQuw==
+"@emotion/styled@11.8.1":
+  version "11.8.1"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.8.1.tgz#856f6f63aceef0eb783985fa2322e2bf66d04e17"
+  integrity sha512-OghEVAYBZMpEquHZwuelXcRjRJQOVayvbmNR0zr174NHdmMgrNkLC6TljKC5h9lZLkN5WGrdUcrKlOJ4phhoTQ==
   dependencies:
     "@babel/runtime" "^7.13.10"
-    "@emotion/babel-plugin" "^11.3.0"
-    "@emotion/is-prop-valid" "^1.1.1"
+    "@emotion/babel-plugin" "^11.7.1"
+    "@emotion/is-prop-valid" "^1.1.2"
     "@emotion/serialize" "^1.0.2"
-    "@emotion/utils" "^1.0.0"
+    "@emotion/utils" "^1.1.0"
 
 "@emotion/stylis@^0.8.4":
   version "0.8.5"
@@ -1392,11 +1420,21 @@
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
+"@emotion/unitless@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db"
+  integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==
+
 "@emotion/utils@^1.0.0", "@emotion/utils@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.1.0.tgz#86b0b297f3f1a0f2bdb08eeac9a2f49afd40d0cf"
   integrity sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ==
 
+"@emotion/utils@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.0.tgz#9716eaccbc6b5ded2ea5a90d65562609aab0f561"
+  integrity sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==
+
 "@emotion/weak-memoize@^0.2.5":
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
@@ -4030,9 +4068,9 @@
     form-data "^3.0.0"
 
 "@types/node@*", "@types/node@>=10.0.0":
-  version "18.0.2"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.0.2.tgz#a594e580c396c22dd6b1470be81737c79ec0b1b1"
-  integrity sha512-b947SdS4GH+g2W33wf5FzUu1KLj5FcSIiNWbU1ZyMvt/X7w48ZsVcsQoirIgE/Oq03WT5Qbn/dkY0hePi4ZXcQ==
+  version "18.11.9"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.9.tgz#02d013de7058cea16d36168ef2fc653464cfbad4"
+  integrity sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==
 
 "@types/node@^14.0.10 || ^16.0.0", "@types/node@^14.14.20 || ^16.0.0":
   version "16.11.43"
@@ -6648,13 +6686,6 @@ character-reference-invalid@^1.0.0:
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
   integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
 
-chevrotain@7.0.3:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/chevrotain/-/chevrotain-7.0.3.tgz#f9621971a726eba804f7763edace2183d157c5d7"
-  integrity sha512-G634q7M5EiqNNv+0MKcQES2jmqabbi4PvUDpzjG2t+i1XQFaMCz0o8BZ8lbQbZex4RqkzJ3pOy+UwNLFlQm4eg==
-  dependencies:
-    regexp-to-ast "0.5.0"
-
 chokidar@^2.1.8:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
@@ -7082,14 +7113,7 @@ compromise-sentences@^0.3.0:
   resolved "https://registry.yarnpkg.com/compromise-sentences/-/compromise-sentences-0.3.0.tgz#61d34039323155bc20dad10f24340daaabf86e26"
   integrity sha512-L6d5PXmmyPyWRMoJURYOM0yILhtV37zCOy9ZW8Xd6KgY+2qQBTwuokekaGL9MDpSH3/grRDL+AHKytYpGrTEmA==
 
-compromise-strict@^0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/compromise-strict/-/compromise-strict-0.0.2.tgz#e4bf4cc386e8795c6408d3606ebb2cd31cab9fbd"
-  integrity sha512-1ApkPa6kjmyS1ZFhDRZgttDcnVv+Ci8U0kIIsxRBLCN0vautyPm6FROvBwoLimlU3pgIH3hMIpdNdVfe2yj3Gw==
-  dependencies:
-    chevrotain "7.0.3"
-
-compromise@^13.11.3, compromise@^13.11.4:
+compromise@^13.11.4:
   version "13.11.4"
   resolved "https://registry.yarnpkg.com/compromise/-/compromise-13.11.4.tgz#3136e6d2c2cca822ba7cebd140c9f27f405b67f1"
   integrity sha512-nBITcNdqIHSVDDluaG6guyFFCSNXN+Hu87fU8VlhkE5Z0PwTZN1nro2O7a8JcUH88nB5EOzrxd9zKfXLSNFqcg==
@@ -7642,9 +7666,9 @@ decimal.js@^10.2.1:
   integrity sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==
 
 decode-uri-component@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
-  integrity sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og==
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9"
+  integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==
 
 decompress-response@^3.2.0, decompress-response@^3.3.0:
   version "3.3.0"
@@ -8225,9 +8249,9 @@ engine.io-parser@~5.0.3:
   integrity sha512-+nVFp+5z1E3HcToEnO7ZIj3g+3k9389DvWtvJZz0T6/eOCPIyyxehFcedoYrZQrp0LgQbD9pPXhpMBKMd5QURg==
 
 engine.io@~6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-6.2.0.tgz#003bec48f6815926f2b1b17873e576acd54f41d0"
-  integrity sha512-4KzwW3F3bk+KlzSOY57fj/Jx6LyRQ1nbcyIadehl+AnXjKT7gDO0ORdRi/84ixvMKTym6ZKuxvbzN62HDDU1Lg==
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-6.2.1.tgz#e3f7826ebc4140db9bbaa9021ad6b1efb175878f"
+  integrity sha512-ECceEFcAaNRybd3lsGQKas3ZlMVjN3cyWwMP25D2i0zWfyiytVbTpRPa34qrr+FHddtpBVOmq4H/DCv1O0lZRA==
   dependencies:
     "@types/cookie" "^0.4.1"
     "@types/cors" "^2.8.12"
@@ -11969,9 +11993,9 @@ json2mq@^0.2.0:
     string-convert "^0.2.0"
 
 json5@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
-  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
+  integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
   dependencies:
     minimist "^1.2.0"
 
@@ -12935,9 +12959,9 @@ minimist-options@4.1.0:
     kind-of "^6.0.3"
 
 minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.5, minimist@^1.2.6:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
-  integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18"
+  integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
 
 minipass-collect@^1.0.2:
   version "1.0.2"
@@ -15281,20 +15305,20 @@ react-collapsible@^2.9.0:
   resolved "https://registry.yarnpkg.com/react-collapsible/-/react-collapsible-2.10.0.tgz#57330f9f4f968a41ece49c651b56cf30f9a06d19"
   integrity sha512-kEVsmlFfXBMTCnU5gwIv19MdmPAhbIPzz5Er37TiJSzRKS0IHrqAKQyQeHEmtoGIQMTcVI46FzE4z3NlVTx77A==
 
-react-comic-viewer@^0.3.5:
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/react-comic-viewer/-/react-comic-viewer-0.3.5.tgz#ab5f9ba74a4aa2e748c29d11b43e40d2a042d9ba"
-  integrity sha512-xMjvu/JVJ821dYWOuOiZlEEMpgdmUeUtznoRjBlMaFi6WJI52V55/6E+ICg8VqROwiMwmWjp65rGhF1P8hlRLg==
+react-comic-viewer@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/react-comic-viewer/-/react-comic-viewer-0.4.0.tgz#81e170c4d3924f3312171e3fc7d5d4485466c301"
+  integrity sha512-tdse0Vn6cJzEbFUZMlEBcY1LrH+LfCKodJInl5Y5lyIZyKARoejLrQNlJPnarvNcPW0qm6yQkYioaI56pq0U1w==
   dependencies:
-    "@emotion/react" "11.7.1"
-    "@emotion/styled" "11.6.0"
+    "@emotion/react" "11.9.0"
+    "@emotion/styled" "11.8.1"
     "@react-hook/window-size" "^3.0.7"
     "@rooks/use-did-update" "^4.10.0"
     "@rooks/use-outside-click-ref" "4.11.2"
     nanoid "^3.1.25"
     react-full-screen "1.1.0"
     react-icons "4.3.1"
-    react-swipeable "6.2.0"
+    react-swipeable "6.2.2"
     screenfull "^5.1.0"
 
 react-day-picker@^8.0.6:
@@ -15359,7 +15383,7 @@ react-final-form-arrays@^3.1.3:
   dependencies:
     "@babel/runtime" "^7.12.1"
 
-react-final-form@^6.5.3:
+react-final-form@^6.5.9:
   version "6.5.9"
   resolved "https://registry.yarnpkg.com/react-final-form/-/react-final-form-6.5.9.tgz#644797d4c122801b37b58a76c87761547411190b"
   integrity sha512-x3XYvozolECp3nIjly+4QqxdjSSWfcnpGEL5K8OBT6xmGrq5kBqbA6+/tOqoom9NwqIPPbxPNsOViFlbKgowbA==
@@ -15534,10 +15558,10 @@ react-stickynode@^4.0.0:
     shallowequal "^1.0.0"
     subscribe-ui-event "^2.0.6"
 
-react-swipeable@6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-6.2.0.tgz#057271cb7a6fb4af9d2a3f6d80ccdf33e2f64d47"
-  integrity sha512-nWQ8dEM8e/uswZLSIkXUsAnQmnX4MTcryOHBQIQYRMJFDpgDBSiVbKsz/BZVCIScF4NtJh16oyxwaNOepR6xSw==
+react-swipeable@6.2.2:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-6.2.2.tgz#52ba570f3a7a90db7093094ec476f3d151f727d1"
+  integrity sha512-Oz7nSFrssvq2yvy05aNL3F+yBUqSvLsK6x1mu+rQFOpMdQVnt4izKt1vyjvvTb70q6GQOaSpaB6qniROW2MAzQ==
 
 react-syntax-highlighter@^15.4.5:
   version "15.5.0"
@@ -15569,7 +15593,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==
@@ -15817,11 +15841,6 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
-regexp-to-ast@0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/regexp-to-ast/-/regexp-to-ast-0.5.0.tgz#56c73856bee5e1fef7f73a00f1473452ab712a24"
-  integrity sha512-tlbJqcMHnPKI9zSrystikWKwHkBqu2a/Sgw01h3zFjvYrMxEDYHzzoMZnUrbIfpTFEsoRnnviOXNCzFiSc54Qw==
-
 regexp.prototype.flags@^1.4.1, regexp.prototype.flags@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz#87cab30f80f66660181a3bb7bf5981a872b367ac"