🏗️ Cleanup of the search results pane

To better reflect what we are doing with the pagination controls

package.json

@@ -40,6 +40,7 @@
     "final-form-arrays": "^3.0.2",
     "history": "^5.3.0",
     "html-to-text": "^8.1.0",
+    "immer": "^10.0.3",
     "jsdoc": "^3.6.10",
     "lodash": "^4.17.21",
     "pretty-bytes": "^5.6.0",
@@ -58,7 +59,7 @@
     "react-modal": "^3.15.1",
     "react-router": "^6.9.0",
     "react-router-dom": "^6.9.0",
-    "react-select": "^5.3.2",
+    "react-select": "^5.8.0",
     "react-select-async-paginate": "^0.7.2",
     "react-slick": "^0.29.0",
     "react-sliding-pane": "^7.1.0",
@@ -67,9 +68,9 @@
     "reapop": "^4.2.1",
     "slick-carousel": "^1.8.1",
     "socket.io-client": "^4.3.2",
-    "styled-components": "^6.0.7",
+    "styled-components": "^6.1.0",
     "threetwo-ui-typings": "^1.0.14",
-    "vite": "^4.5.0",
+    "vite": "^5.0.0",
     "vite-plugin-html": "^3.2.0",
     "websocket": "^1.0.34",
     "zustand": "^4.4.6"
@@ -113,12 +114,9 @@
     "prettier": "^2.2.1",
     "react-refresh": "^0.14.0",
     "rimraf": "^4.1.3",
-    "sass": "^1.66.1",
+    "sass": "^1.69.5",
     "storybook": "^7.3.2",
     "tui-jsdoc-template": "^1.2.2",
     "typescript": "^5.1.6"
-  },
-  "resolutions": {
-    "styled-components": "^5"
   }
 }

src/client/actions/airdcpp.actions.tsx

@@ -33,9 +33,9 @@ interface SearchData {
   priority: PriorityEnum;
 }
 
-function sleep(ms: number): Promise<NodeJS.Timeout> {
+export const sleep = (ms: number): Promise<NodeJS.Timeout> => {
   return new Promise((resolve) => setTimeout(resolve, ms));
-}
+};
 
 export const toggleAirDCPPSocketConnectionStatus =
   (status: String, payload?: any) => async (dispatch) => {
@@ -59,83 +59,6 @@ export const toggleAirDCPPSocketConnectionStatus =
         break;
     }
   };
-export const search =
-  (data: SearchData, ADCPPSocket: any, credentials: any) =>
-  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,

src/client/assets/scss/App.scss

@@ -13,7 +13,9 @@ $size-9: 0.7rem;
 $flexSize: 4em;
 $boxSpacing: 1em;
 $colorText: #404646;
-
+body {
+  background: #fffcc;
+}
 .is-size-8 {
   font-size: $size-8;
 }
@@ -422,7 +424,7 @@ pre {
   width: 100%;
   padding: 25px 0 15px 0;
   position: sticky;
-  z-index:9999;
+  z-index: 9999;
   background: #fffffc;
   top: 50px;
 }

src/client/components/App.tsx

@@ -1,52 +1,15 @@
-import React, { ReactElement, useContext, useEffect } from "react";
-import Dashboard from "./Dashboard/Dashboard";
-import Import from "./Import/Import";
-import { ComicDetailContainer } from "./ComicDetail/ComicDetailContainer";
-import TabulatedContentContainer from "./Library/TabulatedContentContainer";
-import LibraryGrid from "./Library/LibraryGrid";
-import Search from "./Search/Search";
-import Settings from "./Settings/Settings";
-import VolumeDetail from "./VolumeDetail/VolumeDetail";
-import Downloads from "./Downloads/Downloads";
-
-import { Routes, Route } from "react-router-dom";
+import React, { ReactElement } from "react";
+import { Outlet } from "react-router-dom";
 import Navbar from "./shared/Navbar";
 import "../assets/scss/App.scss";
 
-import { SocketIOProvider } from "../context/SocketIOContext";
-import socketIOConnectionInstance from "../shared/socket.io/instance";
-import { isEmpty, isNil, isUndefined } from "lodash";
-import {
-  AIRDCPP_DOWNLOAD_PROGRESS_TICK,
-  LS_SINGLE_IMPORT,
-} from "../constants/action-types";
-
-/**
- * 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
- */
-
 export const App = (): ReactElement => {
-  // useEffect(() => {
-  //   // Check if there is a sessionId in localStorage
-  //   const sessionId = localStorage.getItem("sessionId");
-  //   if (!isNil(sessionId)) {
-  //     // Resume the session
-  //     dispatch({
-  //       type: "RESUME_SESSION",
-  //       meta: { remote: true },
-  //       session: { sessionId },
-  //     });
-  //   } else {
-  //     // Inititalize the session and persist the sessionId to localStorage
-  //     socketIOConnectionInstance.on("sessionInitialized", (sessionId) => {
-  //       localStorage.setItem("sessionId", sessionId);
-  //     });
-  //   }
-  // }, []);
-  return <>{/* The rest of your application */}</>;
+  return (
+    <>
+      <Navbar />
+      <Outlet />
+    </>
+  );
 };
 
 export default App;

src/client/components/ComicDetail/AcquisitionPanel.tsx

@@ -1,21 +1,18 @@
-import React, {
-  useCallback,
-  useContext,
-  ReactElement,
-  useEffect,
-  useState,
-} from "react";
+import React, { useCallback, ReactElement, useEffect, useState } from "react";
 import {
-  search,
   downloadAirDCPPItem,
   getBundlesForComic,
+  sleep,
 } from "../../actions/airdcpp.actions";
-import { useDispatch, useSelector } from "react-redux";
+import { SearchQuery, PriorityEnum, SearchResponse } from "threetwo-ui-typings";
 import { RootState, SearchInstance } from "threetwo-ui-typings";
 import ellipsize from "ellipsize";
 import { Form, Field } from "react-final-form";
+import { difference } from "../../shared/utils/object.utils";
 import { isEmpty, isNil, map } from "lodash";
-import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
+import { useStore } from "../../store";
+import { useShallow } from "zustand/react/shallow";
+import { useQuery } from "@tanstack/react-query";
 
 interface IAcquisitionPanelProps {
   query: any;
@@ -27,107 +24,196 @@ interface IAcquisitionPanelProps {
 export const AcquisitionPanel = (
   props: IAcquisitionPanelProps,
 ): ReactElement => {
+  const {
+    airDCPPSocketInstance,
+    airDCPPClientConfiguration,
+    airDCPPSessionInformation,
+  } = useStore(
+    useShallow((state) => ({
+      airDCPPSocketInstance: state.airDCPPSocketInstance,
+      airDCPPClientConfiguration: state.airDCPPClientConfiguration,
+      airDCPPSessionInformation: state.airDCPPSessionInformation,
+    })),
+  );
+
+  /**
+   * Get the hubs list from an AirDCPP Socket
+   */
+  const { data: hubs } = useQuery({
+    queryKey: ["hubs"],
+    queryFn: async () => await airDCPPSocketInstance.get(`hubs`),
+  });
+
   const issueName = props.query.issue.name || "";
   // const { settings } = props;
   const sanitizedIssueName = issueName.replace(/[^a-zA-Z0-9 ]/g, " ");
 
   // Selectors for picking state
-  const airDCPPSearchResults = useSelector((state: RootState) => {
-    return state.airdcpp.searchResults;
-  });
-  const isAirDCPPSearchInProgress = useSelector(
-    (state: RootState) => state.airdcpp.isAirDCPPSearchInProgress,
-  );
-  const searchInfo = useSelector(
-    (state: RootState) => state.airdcpp.searchInfo,
-  );
-  const searchInstance: SearchInstance = useSelector(
-    (state: RootState) => state.airdcpp.searchInstance,
-  );
+  // const airDCPPSearchResults = useSelector((state: RootState) => {
+  //   return state.airdcpp.searchResults;
+  // });
+  // const isAirDCPPSearchInProgress = useSelector(
+  //   (state: RootState) => state.airdcpp.isAirDCPPSearchInProgress,
+  // );
+  // const searchInfo = useSelector(
+  //   (state: RootState) => state.airdcpp.searchInfo,
+  // );
+  // const searchInstance: SearchInstance = useSelector(
+  //   (state: RootState) => state.airdcpp.searchInstance,
+  // );
 
   // const settings = useSelector((state: RootState) => state.settings.data);
-  const airDCPPConfiguration = useContext(AirDCPPSocketContext);
-
-  const dispatch = useDispatch();
+  // const airDCPPConfiguration = useContext(AirDCPPSocketContext);
+  interface SearchData {
+    query: Pick<SearchQuery, "pattern"> & Partial<Omit<SearchQuery, "pattern">>;
+    hub_urls: string[] | undefined | null;
+    priority: PriorityEnum;
+  }
   const [dcppQuery, setDcppQuery] = useState({});
+  const [airDCPPSearchResults, setAirDCPPSearchResults] = useState([]);
 
+  // Construct a AirDC++ query based on metadata inferred, upon component mount
+  // Pre-populate the search input with the search string, so that
+  // All the user has to do is hit "Search AirDC++"
   useEffect(() => {
-    if (!isEmpty(airDCPPConfiguration.airDCPPState.settings)) {
-      // AirDC++ search query
-      const dcppSearchQuery = {
-        query: {
-          pattern: `${sanitizedIssueName.replace(/#/g, "")}`,
-          extensions: ["cbz", "cbr", "cb7"],
-        },
-        hub_urls: map(
-          airDCPPConfiguration.airDCPPState.settings.directConnect.client.hubs,
-          (item) => item.value,
-        ),
-        priority: 5,
-      };
-      setDcppQuery(dcppSearchQuery);
-    }
-  }, [airDCPPConfiguration]);
+    // AirDC++ search query
+    const dcppSearchQuery = {
+      query: {
+        pattern: `${sanitizedIssueName.replace(/#/g, "")}`,
+        extensions: ["cbz", "cbr", "cb7"],
+      },
+      hub_urls: map(hubs, (item) => item.value),
+      priority: 5,
+    };
+    setDcppQuery(dcppSearchQuery);
+  }, []);
 
-  const getDCPPSearchResults = useCallback(
-    async (searchQuery) => {
-      const manualQuery = {
-        query: {
-          pattern: `${searchQuery.issueName}`,
-          extensions: ["cbz", "cbr", "cb7"],
+  const search = async (data: SearchData, ADCPPSocket: any) => {
+    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)
+          setAirDCPPSearchResults((state) => [...state, groupedResult]);
         },
-        hub_urls: map(
-          airDCPPConfiguration.airDCPPState.settings.directConnect.client.hubs,
-          (item) => item.value,
-        ),
-        priority: 5,
-      };
-      dispatch(
-        search(manualQuery, airDCPPConfiguration.airDCPPState.socket, {
-          username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`,
-          password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`,
-        }),
+        instance.id,
       );
-    },
-    [dispatch, airDCPPConfiguration],
-  );
+
+      // 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
+          const bundleToUpdateIndex = airDCPPSearchResults?.findIndex(
+            (bundle) => bundle.result.id === groupedResult.result.id,
+          );
+          const updatedState = [...airDCPPSearchResults];
+          if (
+            !isNil(difference(updatedState[bundleToUpdateIndex], groupedResult))
+          ) {
+            updatedState[bundleToUpdateIndex] = groupedResult;
+          }
+          setAirDCPPSearchResults((state) => [...state, ...updatedState]);
+        },
+        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;
+    }
+  };
+  const getDCPPSearchResults = async (searchQuery) => {
+    const manualQuery = {
+      query: {
+        pattern: `${searchQuery.issueName}`,
+        extensions: ["cbz", "cbr", "cb7"],
+      },
+      hub_urls: map(hubs, (hub) => hub.hub_url),
+      priority: 5,
+    };
+
+    search(manualQuery, airDCPPSocketInstance);
+  };
 
   // download via AirDC++
   const downloadDCPPResult = useCallback(
     (searchInstanceId, resultId, name, size, type) => {
-      dispatch(
-        downloadAirDCPPItem(
-          searchInstanceId,
-          resultId,
-          props.comicObjectId,
-          name,
-          size,
-          type,
-          airDCPPConfiguration.airDCPPState.socket,
-          {
-            username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`,
-            password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`,
-          },
-        ),
-      );
+      // dispatch(
+      //   downloadAirDCPPItem(
+      //     searchInstanceId,
+      //     resultId,
+      //     props.comicObjectId,
+      //     name,
+      //     size,
+      //     type,
+      //     airDCPPConfiguration.airDCPPState.socket,
+      //     {
+      //       username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`,
+      //       password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`,
+      //     },
+      //   ),
+      // );
       // this is to update the download count badge on the downloads tab
-      dispatch(
-        getBundlesForComic(
-          props.comicObjectId,
-          airDCPPConfiguration.airDCPPState.socket,
-          {
-            username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`,
-            password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`,
-          },
-        ),
-      );
+      // dispatch(
+      //   getBundlesForComic(
+      //     props.comicObjectId,
+      //     airDCPPConfiguration.airDCPPState.socket,
+      //     {
+      //       username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`,
+      //       password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`,
+      //     },
+      //   ),
+      // );
     },
-    [airDCPPConfiguration],
+    [],
   );
+  console.log("yaman", airDCPPSearchResults);
   return (
     <>
       <div className="comic-detail columns">
-        {!isEmpty(airDCPPConfiguration.airDCPPState.socket) ? (
+        {!isEmpty(airDCPPSocketInstance) ? (
           <Form
             onSubmit={getDCPPSearchResults}
             initialValues={{
@@ -149,9 +235,7 @@ export const AcquisitionPanel = (
                               className="input main-search-bar is-medium"
                               placeholder="Type an issue/volume name"
                             />
-                            <span className="help is-clearfix is-light is-info">
-                              Use this to perform a manual search.
-                            </span>
+                            <span className="help is-clearfix is-light is-info"></span>
                           </div>
                         );
                       }}
@@ -161,9 +245,9 @@ export const AcquisitionPanel = (
                       <button
                         type="submit"
                         className={
-                          isAirDCPPSearchInProgress
+                          false
                             ? "button is-loading is-warning"
-                            : "button"
+                            : "button is-success is-light"
                         }
                       >
                         <span className="icon is-small">
@@ -182,57 +266,13 @@ export const AcquisitionPanel = (
             <article className="message is-info">
               <div className="message-body is-size-6 is-family-secondary">
                 AirDC++ is not configured. Please configure it in{" "}
-                <code>Settings</code>.
+                <code>Settings &gt; AirDC++ &gt; Connection</code>.
               </div>
             </article>
           </div>
         )}
       </div>
 
-      {/* AirDC++ search instance details */}
-      {!isNil(searchInfo) && !isNil(searchInstance) && (
-        <div className="columns">
-          <div className="column is-one-quarter is-size-7">
-            <div className="card">
-              <div className="card-content">
-                <dl>
-                  <dt>
-                    <div className="tags mb-1">
-                      {airDCPPConfiguration.airDCPPState.settings.directConnect.client.hubs.map(
-                        ({ value }) => (
-                          <span className="tag is-warning" key={value}>
-                            {value}
-                          </span>
-                        ),
-                      )}
-                    </div>
-                  </dt>
-                  <dt>
-                    Query:{" "}
-                    <span className="has-text-weight-semibold">
-                      {searchInfo.query.pattern}
-                    </span>
-                  </dt>
-                  <dd>Extensions: {searchInfo.query.extensions.join(", ")}</dd>
-                  <dd>File type: {searchInfo.query.file_type}</dd>
-                </dl>
-              </div>
-            </div>
-          </div>
-          <div className="column is-one-quarter is-size-7">
-            <div className="card">
-              <div className="card-content">
-                <dl>
-                  <dt>Search Instance: {searchInstance.id}</dt>
-                  <dt>Owned by {searchInstance.owner}</dt>
-                  <dd>Expires in: {searchInstance.expires_in}</dd>
-                </dl>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-
       {/* AirDC++ results */}
       <div className="columns">
         {!isNil(airDCPPSearchResults) && !isEmpty(airDCPPSearchResults) ? (
@@ -259,7 +299,7 @@ export const AcquisitionPanel = (
                         <p className="mb-2">
                           {result.type.id === "directory" ? (
                             <i className="fas fa-folder"></i>
-                          ) : null}{" "}
+                          ) : null}
                           {ellipsize(result.name, 70)}
                         </p>
 
@@ -299,7 +339,8 @@ export const AcquisitionPanel = (
                         </div>
                       </td>
                       <td>
-                        <a
+                        <button
+                          className="button is-small is-light is-success"
                           onClick={() =>
                             downloadDCPPResult(
                               searchInstance.id,
@@ -310,8 +351,11 @@ export const AcquisitionPanel = (
                             )
                           }
                         >
-                          <i className="fas fa-file-download"></i>
-                        </a>
+                          <span className="icon">
+                            <i className="fas fa-file-download"></i>
+                          </span>
+                          <span>Download </span>
+                        </button>
                       </td>
                     </tr>
                   );
@@ -323,10 +367,22 @@ export const AcquisitionPanel = (
           <div className="column is-three-fifths">
             <article className="message is-info">
               <div className="message-body is-size-6 is-family-secondary">
-                Searching via <strong>AirDC++</strong> is still in{" "}
-                <strong>alpha</strong>. Some searches may take arbitrarily long,
-                or may not work at all. Searches from <code>ADCS</code> hubs are
-                more reliable than <code>NMDCS</code> ones.
+                <p>
+                  The default search term is an auto-detected title; you may
+                  need to change it to get better matches if the auto-detected
+                  one doesn't work.
+                </p>
+              </div>
+            </article>
+
+            <article className="message is-warning">
+              <div className="message-body is-size-6 is-family-secondary">
+                <p className="content">
+                  Searching via <strong>AirDC++</strong> is still in
+                  <strong>alpha</strong>. Some searches may take arbitrarily
+                  long, or may not work at all. Searches from <code>ADCS</code>
+                  hubs are more reliable than <code>NMDCS</code> ones.
+                </p>
               </div>
             </article>
           </div>
@@ -336,4 +392,4 @@ export const AcquisitionPanel = (
   );
 };
 
-export default AcquisitionPanel;
+export default AcquisitionPanel;

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

@@ -1,6 +1,5 @@
 import { filter, isEmpty, isNil, isUndefined } from "lodash";
 import React, { ReactElement, useCallback } from "react";
-import { useSelector, useDispatch } from "react-redux";
 import Select, { components } from "react-select";
 import { fetchComicVineMatches } from "../../../actions/fileops.actions";
 import { refineQuery } from "filename-parser";
@@ -8,7 +7,6 @@ import { refineQuery } from "filename-parser";
 export const Menu = (props): ReactElement => {
   const { data } = props;
   const { setSlidingPanelContentId, setVisible } = props.handlers;
-  const dispatch = useDispatch();
   const openDrawerWithCVMatches = useCallback(() => {
     let seriesSearchQuery: IComicVineSearchQuery = {} as IComicVineSearchQuery;
     let issueSearchQuery: IComicVineSearchQuery = {} as IComicVineSearchQuery;
@@ -18,10 +16,10 @@ export const Menu = (props): ReactElement => {
     } else if (!isEmpty(data.sourcedMetadata)) {
       issueSearchQuery = refineQuery(data.sourcedMetadata.comicvine.name);
     }
-    dispatch(fetchComicVineMatches(data, issueSearchQuery, seriesSearchQuery));
+    // dispatch(fetchComicVineMatches(data, issueSearchQuery, seriesSearchQuery));
     setSlidingPanelContentId("CVMatches");
     setVisible(true);
-  }, [dispatch, data]);
+  }, [data]);
 
   const openEditMetadataPanel = useCallback(() => {
     setSlidingPanelContentId("editComicBookMetadata");

src/client/components/ComicDetail/ComicDetail.tsx

@@ -1,5 +1,4 @@
 import React, { useState, ReactElement, useCallback } from "react";
-import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
 import Card from "../shared/Carda";
 import { ComicVineMatchPanel } from "./ComicVineMatchPanel";
@@ -47,6 +46,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
       rawFileDetails,
       inferredMetadata,
       sourcedMetadata: { comicvine, locg, comicInfo },
+      acquisition,
     },
     userSettings,
   } = data;
@@ -55,34 +55,34 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
   const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
   const [modalIsOpen, setIsOpen] = useState(false);
 
-  const comicVineSearchResults = useSelector(
-    (state: RootState) => state.comicInfo.searchResults,
-  );
-  const comicVineSearchQueryObject = useSelector(
-    (state: RootState) => state.comicInfo.searchQuery,
-  );
-  const comicVineAPICallProgress = useSelector(
-    (state: RootState) => state.comicInfo.inProgress,
-  );
-
-  const extractedComicBook = useSelector(
-    (state: RootState) => state.fileOps.extractedComicBookArchive.reading,
-  );
+  //   const comicVineSearchResults = useSelector(
+  //     (state: RootState) => state.comicInfo.searchResults,
+  //   );
+  //   const comicVineSearchQueryObject = useSelector(
+  //     (state: RootState) => state.comicInfo.searchQuery,
+  //   );
+  //   const comicVineAPICallProgress = useSelector(
+  //     (state: RootState) => state.comicInfo.inProgress,
+  //   );
+  //
+  //   const extractedComicBook = useSelector(
+  //     (state: RootState) => state.fileOps.extractedComicBookArchive.reading,
+  //   );
   const { comicObjectId } = useParams<{ comicObjectId: string }>();
 
-  const dispatch = useDispatch();
+  // const dispatch = useDispatch();
 
   const openModal = useCallback((filePath) => {
     setIsOpen(true);
-    dispatch(
-      extractComicArchive(filePath, {
-        type: "full",
-        purpose: "reading",
-        imageResizeOptions: {
-          baseWidth: 1024,
-        },
-      }),
-    );
+    // dispatch(
+    //   extractComicArchive(filePath, {
+    //     type: "full",
+    //     purpose: "reading",
+    //     imageResizeOptions: {
+    //       baseWidth: 1024,
+    //     },
+    //   }),
+    // );
   }, []);
 
   const afterOpenModal = useCallback((things) => {
@@ -100,7 +100,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     CVMatches: {
       content: (props) => (
         <>
-          <div className="card search-criteria-card">
+          {/* <div className="card search-criteria-card">
             <div className="card-content">
               <ComicVineSearchForm data={rawFileDetails} />
             </div>
@@ -134,7 +134,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
                 />
               </div>
             </div>
-          )}
+          )} */}
         </>
       ),
     },
@@ -193,7 +193,9 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
       id: 3,
       icon: <i className="fa-regular fa-file-archive"></i>,
       name: "Archive Operations",
-      content: <ArchiveOperations data={data.data} key={3} />,
+      content: <></>,
+      /*
+      <ArchiveOperations data={data.data} key={3} /> */
       shouldShow: areRawFileDetailsAvailable,
     },
     {
@@ -285,7 +287,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
                         Read
                       </button>
 
-                      <Modal
+                      {/* <Modal
                         style={{ content: { marginTop: "2rem" } }}
                         isOpen={modalIsOpen}
                         onAfterOpen={afterOpenModal}
@@ -302,13 +304,16 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
                             }}
                           />
                         )}
-                      </Modal>
+                      </Modal> */}
                     </>
                   )}
               </div>
             </div>
 
-            {<TabControls filteredTabs={filteredTabs} />}
+            <TabControls
+              filteredTabs={filteredTabs}
+              acquisition={acquisition}
+            />
 
             <SlidingPane
               isOpen={visible}

src/client/components/ComicDetail/ComicDetailContainer.tsx

@@ -1,22 +1,42 @@
 import { isEmpty, isNil, isUndefined } from "lodash";
 import React, { ReactElement, useContext, useEffect, useState } from "react";
-import { useSelector, useDispatch } from "react-redux";
 import { useParams } from "react-router-dom";
 import { getComicBookDetailById } from "../../actions/comicinfo.actions";
 import { ComicDetail } from "../ComicDetail/ComicDetail";
+import { useQuery } from "@tanstack/react-query";
+import { LIBRARY_SERVICE_BASE_URI } from "../../constants/endpoints";
+import axios from "axios";
 
 export const ComicDetailContainer = (): ReactElement | null => {
-  const comicBookDetailData = useSelector(
-    (state: RootState) => state.comicInfo.comicBookDetail,
-  );
-  const dispatch = useDispatch();
-
   const { comicObjectId } = useParams<{ comicObjectId: string }>();
+  const {
+    data: comicBookDetailData,
+    isLoading,
+    isError,
+  } = useQuery({
+    queryKey: [],
+    queryFn: async () =>
+      await axios({
+        url: `${LIBRARY_SERVICE_BASE_URI}/getComicBookById`,
+        method: "POST",
+        data: {
+          id: comicObjectId,
+        },
+      }),
+  });
+  console.log(comicBookDetailData);
   useEffect(() => {
-    dispatch(getComicBookDetailById(comicObjectId));
+    // dispatch(getComicBookDetailById(comicObjectId));
     // dispatch(getSettings());
-  }, [dispatch]);
-  return !isEmpty(comicBookDetailData) ? (
-    <ComicDetail data={comicBookDetailData} />
-  ) : null;
+  }, []);
+
+  {
+    isError && <>Error</>;
+  }
+  {
+    isLoading && <>Loading...</>;
+  }
+  return (
+    comicBookDetailData?.data && <ComicDetail data={comicBookDetailData.data} />
+  );
 };

src/client/components/ComicDetail/ComicVineSearchForm.tsx

@@ -2,7 +2,6 @@ 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 performing search against ComicVine
@@ -14,7 +13,6 @@ import { useDispatch } from "react-redux";
  * )
  */
 export const ComicVineSearchForm = (data) => {
-  const dispatch = useDispatch();
   const onSubmit = useCallback((value) => {
     const userInititatedQuery = {
       inferredIssueDetails: {
@@ -24,7 +22,7 @@ export const ComicVineSearchForm = (data) => {
         year: value.issueYear,
       },
     };
-    dispatch(fetchComicVineMatches(data, userInititatedQuery));
+    // dispatch(fetchComicVineMatches(data, userInititatedQuery));
   }, []);
   const validate = () => {
     return true;

src/client/components/ComicDetail/DownloadsPanel.tsx

@@ -1,12 +1,10 @@
 import React, { useEffect, useContext, ReactElement } from "react";
 import { getBundlesForComic } from "../../actions/airdcpp.actions";
-import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "threetwo-ui-typings";
 import { isEmpty, isNil, map } from "lodash";
 import prettyBytes from "pretty-bytes";
 import dayjs from "dayjs";
 import ellipsize from "ellipsize";
-import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
 
 interface IDownloadsPanelProps {
   data: any;
@@ -16,34 +14,33 @@ interface IDownloadsPanelProps {
 export const DownloadsPanel = (
   props: IDownloadsPanelProps,
 ): ReactElement | null => {
-  const bundles = useSelector((state: RootState) => {
-    return state.airdcpp.bundles;
-  });
-
-  // AirDCPP Socket initialization
-  const userSettings = useSelector((state: RootState) => state.settings.data);
-  const airDCPPConfiguration = useContext(AirDCPPSocketContext);
+  //   const bundles = useSelector((state: RootState) => {
+  //     return state.airdcpp.bundles;
+  //   });
+  //
+  //   // AirDCPP Socket initialization
+  //   const userSettings = useSelector((state: RootState) => state.settings.data);
+  //   const airDCPPConfiguration = useContext(AirDCPPSocketContext);
 
   const {
     airDCPPState: { socket, settings },
   } = airDCPPConfiguration;
 
-  const dispatch = useDispatch();
   // Fetch the downloaded files and currently-downloading file(s) from AirDC++
   useEffect(() => {
     try {
       if (!isEmpty(userSettings)) {
-        dispatch(
-          getBundlesForComic(props.comicObjectId, socket, {
-            username: `${settings.directConnect.client.host.username}`,
-            password: `${settings.directConnect.client.host.password}`,
-          }),
-        );
+        // dispatch(
+        //   getBundlesForComic(props.comicObjectId, socket, {
+        //     username: `${settings.directConnect.client.host.username}`,
+        //     password: `${settings.directConnect.client.host.password}`,
+        //   }),
+        // );
       }
     } catch (error) {
       throw new Error(error);
     }
-  }, [dispatch, airDCPPConfiguration]);
+  }, [airDCPPConfiguration]);
 
   const Bundles = (props) => {
     return !isEmpty(props.data) ? (

src/client/components/ComicDetail/EditMetadataPanel.tsx

@@ -1,5 +1,4 @@
 import React, { ReactElement, useCallback, useEffect, useState } from "react";
-import { useSelector, useDispatch } from "react-redux";
 import { Form, Field } from "react-final-form";
 import arrayMutators from "final-form-arrays";
 import { FieldArray } from "react-final-form-arrays";
@@ -9,7 +8,7 @@ import TextareaAutosize from "react-textarea-autosize";
 export const EditMetadataPanel = (props): ReactElement => {
   const validate = async () => {};
   const onSubmit = async () => {};
- 
+
   const AsyncSelectPaginateAdapter = ({ input, ...rest }) => {
     return (
       <AsyncSelectPaginate
@@ -28,10 +27,9 @@ export const EditMetadataPanel = (props): ReactElement => {
       />
     );
   };
-  const rawFileDetails = useSelector(
-    (state: RootState) => state.comicInfo.comicBookDetail.rawFileDetails.name,
-  );
-  const dispatch = useDispatch();
+  // const rawFileDetails = useSelector(
+  //   (state: RootState) => state.comicInfo.comicBookDetail.rawFileDetails.name,
+  // );
 
   return (
     <>

src/client/components/ComicDetail/MatchResult.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback } from "react";
-import { useDispatch, useSelector } from "react-redux";
 import { isNil, map } from "lodash";
 import { applyComicVineMatch } from "../../actions/comicinfo.actions";
 import { convert } from "html-to-text";
@@ -15,12 +14,11 @@ const handleBrokenImage = (e) => {
 };
 
 export const MatchResult = (props: MatchResultProps) => {
-  const dispatch = useDispatch();
   const applyCVMatch = useCallback(
-    (match, comicObjectId) => {
-      dispatch(applyComicVineMatch(match, comicObjectId));
-    },
-    [dispatch],
+    // (match, comicObjectId) => {
+    //   dispatch(applyComicVineMatch(match, comicObjectId));
+    // },
+    [],
   );
   return (
     <>

src/client/components/ComicDetail/TabControls.tsx

@@ -1,18 +1,17 @@
 import React, { ReactElement, useEffect, useState } from "react";
 import { isEmpty, isNil } from "lodash";
-import { useSelector } from "react-redux";
 
 export const TabControls = (props): ReactElement => {
-  const comicBookDetailData = useSelector(
-    (state: RootState) => state.comicInfo.comicBookDetail,
-  );
-  const { filteredTabs } = props;
-
+  // const comicBookDetailData = useSelector(
+  //   (state: RootState) => state.comicInfo.comicBookDetail,
+  // );
+  const { filteredTabs, acquisition } = props;
   const [active, setActive] = useState(filteredTabs[0].id);
   useEffect(() => {
     setActive(filteredTabs[0].id);
-  }, [comicBookDetailData]);
+  }, [acquisition]);
 
+  console.log(filteredTabs);
   return (
     <>
       <div className="tabs">
@@ -25,15 +24,11 @@ export const TabControls = (props): ReactElement => {
             >
               {/* Downloads tab and count badge */}
               <a>
-                {id === 6 &&
-                !isNil(comicBookDetailData.acquisition.directconnect) ? (
+                {id === 6 && !isNil(acquisition.directconnect) ? (
                   <span className="download-icon-labels">
                     <i className="fa-solid fa-download"></i>
                     <span className="tag downloads-count is-info is-light">
-                      {
-                        comicBookDetailData.acquisition.directconnect.downloads
-                          .length
-                      }
+                      {acquisition.directconnect.downloads.length}
                     </span>
                   </span>
                 ) : (

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

@@ -1,5 +1,4 @@
 import React, { ReactElement, useCallback, useState } from "react";
-import { useSelector, useDispatch } from "react-redux";
 import { DnD } from "../../shared/Draggable/DnD";
 import { isEmpty } from "lodash";
 import Sticky from "react-stickynode";
@@ -10,28 +9,27 @@ import { Canvas } from "../../shared/Canvas";
 
 export const ArchiveOperations = (props): ReactElement => {
   const { data } = props;
-  const isComicBookExtractionInProgress = useSelector(
-    (state: RootState) => state.fileOps.comicBookExtractionInProgress,
-  );
-  const extractedComicBookArchive = useSelector(
-    (state: RootState) => state.fileOps.extractedComicBookArchive.analysis,
-  );
+  //   const isComicBookExtractionInProgress = useSelector(
+  //     (state: RootState) => state.fileOps.comicBookExtractionInProgress,
+  //   );
+  //   const extractedComicBookArchive = useSelector(
+  //     (state: RootState) => state.fileOps.extractedComicBookArchive.analysis,
+  //   );
+  //
+  //   const imageAnalysisResult = useSelector((state: RootState) => {
+  //     return state.fileOps.imageAnalysisResults;
+  //   });
 
-  const imageAnalysisResult = useSelector((state: RootState) => {
-    return state.fileOps.imageAnalysisResults;
-  });
-
-  const dispatch = useDispatch();
   const unpackComicArchive = useCallback(() => {
-    dispatch(
-      extractComicArchive(data.rawFileDetails.filePath, {
-        type: "full",
-        purpose: "analysis",
-        imageResizeOptions: {
-          baseWidth: 275,
-        },
-      }),
-    );
+    // dispatch(
+    //   extractComicArchive(data.rawFileDetails.filePath, {
+    //     type: "full",
+    //     purpose: "analysis",
+    //     imageResizeOptions: {
+    //       baseWidth: 275,
+    //     },
+    //   }),
+    // );
   }, []);
 
   // sliding panel config
@@ -64,7 +62,7 @@ export const ArchiveOperations = (props): ReactElement => {
   // sliding panel handlers
   const openImageAnalysisPanel = useCallback((imageFilePath) => {
     setSlidingPanelContentId("imageAnalysis");
-    dispatch(analyzeImage(imageFilePath));
+    // dispatch(analyzeImage(imageFilePath));
     setCurrentImage(imageFilePath);
     setVisible(true);
   }, []);
@@ -126,4 +124,4 @@ export const ArchiveOperations = (props): ReactElement => {
   );
 };
 
-export default ArchiveOperations;
+export default ArchiveOperations;

src/client/components/Import/Import.tsx

@@ -1,14 +1,12 @@
 import React, { ReactElement, useCallback, useEffect } from "react";
-import { useSelector, useDispatch } from "react-redux";
-import {
-  fetchComicBookMetadata,
-  getImportJobResultStatistics,
-  setQueueControl,
-} from "../../actions/fileops.actions";
 import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
 import { format } from "date-fns";
 import Loader from "react-loader-spinner";
 import { isEmpty, isNil, isUndefined } from "lodash";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useStore } from "../../store";
+import { useShallow } from "zustand/react/shallow";
+import axios from "axios";
 
 interface IProps {
   matches?: unknown;
@@ -18,10 +16,7 @@ interface IProps {
 }
 
 /**
- * Returns the average of two numbers.
- *
- * @remarks
- * This method is part of the {@link core-library#Statistics | Statistics subsystem}.
+ * Component to facilitate the import of comics to the ThreeTwo library
  *
  * @param x - The first input number
  * @param y - The second input number
@@ -31,41 +26,70 @@ interface IProps {
  */
 
 export const Import = (props: IProps): ReactElement => {
-  const dispatch = useDispatch();
-  const successfulImportJobCount = useSelector(
-    (state: RootState) => state.fileOps.successfulJobCount,
-  );
-  const failedImportJobCount = useSelector(
-    (state: RootState) => state.fileOps.failedJobCount,
+  const queryClient = useQueryClient();
+  const { importJobQueue, socketIOInstance } = useStore(
+    useShallow((state) => ({
+      importJobQueue: state.importJobQueue,
+      socketIOInstance: state.socketIOInstance,
+    })),
   );
 
-  const lastQueueJob = useSelector(
-    (state: RootState) => state.fileOps.lastQueueJob,
-  );
-  const libraryQueueImportStatus = useSelector(
-    (state: RootState) => state.fileOps.LSQueueImportStatus,
-  );
+  const sessionId = localStorage.getItem("sessionId");
+  const { mutate: initiateImport } = useMutation({
+    mutationFn: async () =>
+      await axios.request({
+        url: `http://localhost:3000/api/library/newImport`,
+        method: "POST",
+        data: { sessionId },
+      }),
+  });
 
-  const allImportJobResults = useSelector(
-    (state: RootState) => state.fileOps.importJobStatistics,
-  );
+  const { data, isError, isLoading } = useQuery({
+    queryKey: ["allImportJobResults"],
+    queryFn: async () =>
+      await axios({
+        method: "GET",
+        url: "http://localhost:3000/api/jobqueue/getJobResultStatistics",
+      }),
+  });
 
-  const initiateImport = useCallback(() => {
-    if (typeof props.path !== "undefined") {
-      dispatch(fetchComicBookMetadata(props.path));
-    }
-  }, [dispatch]);
-
-  const toggleQueue = useCallback(
-    (queueAction: string, queueStatus: string) => {
-      dispatch(setQueueControl(queueAction, queueStatus));
-    },
-    [],
-  );
-  useEffect(() => {
-    dispatch(getImportJobResultStatistics());
-  }, []);
+  // 1a.  Act on each comic issue successfully imported/failed, as indicated
+  //      by the LS_COVER_EXTRACTED/LS_COVER_EXTRACTION_FAILED events
+  socketIOInstance.on("LS_COVER_EXTRACTED", (data) => {
+    const { completedJobCount, importResult } = data;
+    importJobQueue.setJobCount("successful", completedJobCount);
+    importJobQueue.setMostRecentImport(importResult.rawFileDetails.name);
+  });
+  socketIOInstance.on("LS_COVER_EXTRACTION_FAILED", (data) => {
+    const { failedJobCount } = data;
+    importJobQueue.setJobCount("failed", failedJobCount);
+  });
 
+  // 1b.  Clear the localStorage sessionId upon receiving the
+  //      LS_IMPORT_QUEUE_DRAINED event
+  socketIOInstance.on("LS_IMPORT_QUEUE_DRAINED", (data) => {
+    localStorage.removeItem("sessionId");
+    importJobQueue.setStatus("drained");
+    queryClient.invalidateQueries({ queryKey: ["allImportJobResults"] });
+  });
+  const toggleQueue = (queueAction: string, queueStatus: string) => {
+    socketIOInstance.emit(
+      "call",
+      "socket.setQueueStatus",
+      {
+        queueAction,
+        queueStatus,
+      },
+      (data) => console.log(data),
+    );
+  };
+  /**
+   * Method to render import job queue pause/resume controls on the UI
+   *
+   * @param status The `string` status (either `"pause"` or `"resume"`)
+   * @returns ReactElement A `<button/>` that toggles queue status
+   * @remarks Sets the global `importJobQueue.status` state upon toggling
+   */
   const renderQueueControls = (status: string): ReactElement | null => {
     switch (status) {
       case "running":
@@ -73,7 +97,10 @@ export const Import = (props: IProps): ReactElement => {
           <div className="control">
             <button
               className="button is-warning is-light"
-              onClick={() => toggleQueue("pause", "paused")}
+              onClick={() => {
+                toggleQueue("pause", "paused");
+                importJobQueue.setStatus("paused");
+              }}
             >
               <i className="fa-solid fa-pause mr-2"></i> Pause
             </button>
@@ -84,7 +111,10 @@ export const Import = (props: IProps): ReactElement => {
           <div className="control">
             <button
               className="button is-success is-light"
-              onClick={() => toggleQueue("resume", "running")}
+              onClick={() => {
+                toggleQueue("resume", "running");
+                importJobQueue.setStatus("running");
+              }}
             >
               <i className="fa-solid fa-play mr-2"></i> Resume
             </button>
@@ -123,12 +153,15 @@ export const Import = (props: IProps): ReactElement => {
         <p className="buttons">
           <button
             className={
-              libraryQueueImportStatus === "drained" ||
-              libraryQueueImportStatus === undefined
+              importJobQueue.status === "drained" ||
+              importJobQueue.status === undefined
                 ? "button is-medium"
                 : "button is-loading is-medium"
             }
-            onClick={initiateImport}
+            onClick={() => {
+              initiateImport();
+              importJobQueue.setStatus("running");
+            }}
           >
             <span className="icon">
               <i className="fas fa-file-import"></i>
@@ -136,8 +169,9 @@ export const Import = (props: IProps): ReactElement => {
             <span>Start Import</span>
           </button>
         </p>
-        {libraryQueueImportStatus !== "drained" &&
-          !isUndefined(libraryQueueImportStatus) && (
+
+        {importJobQueue.status !== "drained" &&
+          !isUndefined(importJobQueue.status) && (
             <>
               <table className="table">
                 <thead>
@@ -152,29 +186,29 @@ export const Import = (props: IProps): ReactElement => {
                 <tbody>
                   <tr>
                     <th>
-                      {successfulImportJobCount > 0 && (
+                      {importJobQueue.successfulJobCount > 0 && (
                         <div className="box has-background-success-light has-text-centered">
                           <span className="is-size-2 has-text-weight-bold">
-                            {successfulImportJobCount}
+                            {importJobQueue.successfulJobCount}
                           </span>
                         </div>
                       )}
                     </th>
                     <td>
-                      {failedImportJobCount > 0 && (
+                      {importJobQueue.failedJobCount > 0 && (
                         <div className="box has-background-danger has-text-centered">
                           <span className="is-size-2 has-text-weight-bold">
-                            {failedImportJobCount}
+                            {importJobQueue.failedJobCount}
                           </span>
                         </div>
                       )}
                     </td>
 
-                    <td>{renderQueueControls(libraryQueueImportStatus)}</td>
+                    <td>{renderQueueControls(importJobQueue.status)}</td>
                     <td>
-                      {libraryQueueImportStatus !== undefined ? (
+                      {importJobQueue.status !== undefined ? (
                         <span className="tag is-warning">
-                          {libraryQueueImportStatus}
+                          {importJobQueue.status}
                         </span>
                       ) : null}
                     </td>
@@ -182,53 +216,58 @@ export const Import = (props: IProps): ReactElement => {
                 </tbody>
               </table>
               Imported{" "}
-              <span className="has-text-weight-bold">{lastQueueJob}</span>
+              <span className="has-text-weight-bold">
+                {importJobQueue.mostRecentImport}
+              </span>
             </>
           )}
 
         {/* Past imports */}
-
-        <h3 className="subtitle is-4 mt-5">Past Imports</h3>
-        <table className="table">
-          <thead>
-            <tr>
-              <th>Time Started</th>
-              <th>Session Id</th>
-              <th>Imported</th>
-              <th>Failed</th>
-            </tr>
-          </thead>
-
-          <tbody>
-            {allImportJobResults.map((jobResult, id) => {
-              return (
-                <tr key={id}>
-                  <td>
-                    {format(
-                      new Date(jobResult.earliestTimestamp),
-                      "EEEE, hh:mma, do LLLL Y",
-                    )}
-                  </td>
-                  <td>
-                    <span className="tag is-warning">
-                      {jobResult.sessionId}
-                    </span>
-                  </td>
-                  <td>
-                    <span className="tag is-success">
-                      {jobResult.completedJobs}
-                    </span>
-                  </td>
-                  <td>
-                    <span className="tag is-danger">
-                      {jobResult.failedJobs}
-                    </span>
-                  </td>
+        {!isLoading && !isEmpty(data?.data) && (
+          <>
+            <h3 className="subtitle is-4 mt-5">Past Imports</h3>
+            <table className="table">
+              <thead>
+                <tr>
+                  <th>Time Started</th>
+                  <th>Session Id</th>
+                  <th>Imported</th>
+                  <th>Failed</th>
                 </tr>
-              );
-            })}
-          </tbody>
-        </table>
+              </thead>
+
+              <tbody>
+                {data?.data.map((jobResult, id) => {
+                  return (
+                    <tr key={id}>
+                      <td>
+                        {format(
+                          new Date(jobResult.earliestTimestamp),
+                          "EEEE, hh:mma, do LLLL Y",
+                        )}
+                      </td>
+                      <td>
+                        <span className="tag is-warning">
+                          {jobResult.sessionId}
+                        </span>
+                      </td>
+                      <td>
+                        <span className="tag is-success">
+                          {jobResult.completedJobs}
+                        </span>
+                      </td>
+                      <td>
+                        <span className="tag is-danger">
+                          {jobResult.failedJobs}
+                        </span>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </>
+        )}
       </section>
     </div>
   );

src/client/components/Library/Library.tsx

@@ -1,12 +1,12 @@
-import React, { useMemo, ReactElement, useCallback, useEffect } from "react";
+import React, { useMemo, ReactElement, useState } from "react";
 import PropTypes from "prop-types";
 import { useNavigate } from "react-router-dom";
 import { isEmpty, isNil, isUndefined } from "lodash";
 import MetadataPanel from "../shared/MetadataPanel";
 import T2Table from "../shared/T2Table";
-import { useDispatch, useSelector } from "react-redux";
-import { searchIssue } from "../../actions/fileops.actions";
 import ellipsize from "ellipsize";
+import { useQuery, keepPreviousData } from "@tanstack/react-query";
+import axios from "axios";
 
 /**
  * Component that tabulates the contents of the user's ThreeTwo Library.
@@ -16,30 +16,36 @@ import ellipsize from "ellipsize";
  * <Library />
  */
 export const Library = (): ReactElement => {
-  const searchResults = useSelector(
-    (state: RootState) => state.fileOps.libraryComics,
-  );
-  const searchError = useSelector((state: RootState) => state.fileOps.librarySearchError);
-  const dispatch = useDispatch();
-  useEffect(() => {
-    dispatch(
-      searchIssue(
-        {
-          query: {},
-        },
-        {
-          pagination: {
-            size: 15,
-            from: 0,
-          },
-          type: "all",
-          trigger: "libraryPage",
-        },
-      ),
-    );
-  }, []);
+  // Default page state
+  // offset: 0
+  const [offset, setOffset] = useState(0);
 
-  // programatically navigate to comic detail
+  // Method to fetch paginated issues
+  const fetchIssues = async (searchQuery, offset, type) => {
+    let pagination = {
+      size: 15,
+      from: offset,
+    };
+    return await axios({
+      method: "POST",
+      url: "http://localhost:3000/api/search/searchIssue",
+      data: {
+        searchQuery,
+        pagination,
+        type,
+      },
+    });
+  };
+
+  const { data, isLoading, isError, isPlaceholderData } = useQuery({
+    queryKey: ["comics", offset],
+    queryFn: () => fetchIssues({}, offset, "all"),
+    placeholderData: keepPreviousData,
+  });
+
+  const searchResults = data?.data;
+
+  // Programmatically navigate to comic detail
   const navigate = useNavigate();
   const navigateToComicDetail = (row) => {
     navigate(`/comic/details/${row.original._id}`);
@@ -156,23 +162,11 @@ export const Library = (): ReactElement => {
    * @returns void
    *
    **/
-  const nextPage = useCallback((pageIndex: number, pageSize: number) => {
-    dispatch(
-      searchIssue(
-        {
-          query: {},
-        },
-        {
-          pagination: {
-            size: pageSize,
-            from: pageSize * pageIndex + 1,
-          },
-          type: "all",
-          trigger: "libraryPage",
-        },
-      ),
-    );
-  }, []);
+  const nextPage = (pageIndex: number, pageSize: number) => {
+    if (!isPlaceholderData) {
+      setOffset(pageSize * pageIndex + 1);
+    }
+  };
 
   /**
    * Pagination control that fetches the previous x (pageSize) items
@@ -181,29 +175,15 @@ export const Library = (): ReactElement => {
    * @param {number} pageSize
    * @returns void
    **/
-  const previousPage = useCallback((pageIndex: number, pageSize: number) => {
+  const previousPage = (pageIndex: number, pageSize: number) => {
     let from = 0;
     if (pageIndex === 2) {
-      from = (pageIndex - 1) * pageSize + 2 - 17;
+      from = (pageIndex - 1) * pageSize + 2 - (pageSize + 2);
     } else {
-      from = (pageIndex - 1) * pageSize + 2 - 16;
+      from = (pageIndex - 1) * pageSize + 2 - (pageSize + 1);
     }
-    dispatch(
-      searchIssue(
-        {
-          query: {},
-        },
-        {
-          pagination: {
-            size: pageSize,
-            from,
-          },
-          type: "all",
-          trigger: "libraryPage",
-        },
-      ),
-    );
-  }, []);
+    setOffset(from);
+  };
 
   // ImportStatus.propTypes = {
   //   value: PropTypes.bool.isRequired,
@@ -214,13 +194,13 @@ export const Library = (): ReactElement => {
         <div className="header-area">
           <h1 className="title">Library</h1>
         </div>
-        {!isEmpty(searchResults) ? (
+        {!isUndefined(searchResults?.hits) ? (
           <div>
             <div className="library">
               <T2Table
-                totalPages={searchResults.total.value}
+                totalPages={searchResults.hits.total.value}
                 columns={columns}
-                sourceData={searchResults?.hits}
+                sourceData={searchResults?.hits.hits}
                 rowClickHandler={navigateToComicDetail}
                 paginationHandlers={{
                   nextPage,
@@ -239,14 +219,15 @@ export const Library = (): ReactElement => {
                   back.
                 </div>
               </article>
-              <pre>
-                {!isUndefined(searchError.data) &&
-                  JSON.stringify(
-                    searchError.data.meta.body.error.root_cause,
+              {!isUndefined(searchResults?.data?.meta?.body) ? (
+                <pre>
+                  {JSON.stringify(
+                    searchResults.data.meta.body.error.root_cause,
                     null,
                     4,
                   )}
-              </pre>
+                </pre>
+              ) : null}
             </div>
           </div>
         )}

src/client/components/Library/SearchBar.tsx

@@ -2,29 +2,27 @@ import React, { ReactElement, useCallback } from "react";
 import PropTypes from "prop-types";
 import { Form, Field } from "react-final-form";
 import { Link } from "react-router-dom";
-import { useDispatch } from "react-redux";
 import { searchIssue } from "../../actions/fileops.actions";
 
 export const SearchBar = (): ReactElement => {
-  const dispatch = useDispatch();
   const handleSubmit = useCallback((e) => {
-    dispatch(
-      searchIssue(
-        {
-          query: {
-            volumeName: e.search,
-          },
-        },
-        {
-          pagination: {
-            size: 25,
-            from: 0,
-          },
-          type: "volumeName",
-          trigger: "libraryPage",
-        },
-      ),
-    );
+    // dispatch(
+    //   searchIssue(
+    //     {
+    //       query: {
+    //         volumeName: e.search,
+    //       },
+    //     },
+    //     {
+    //       pagination: {
+    //         size: 25,
+    //         from: 0,
+    //       },
+    //       type: "volumeName",
+    //       trigger: "libraryPage",
+    //     },
+    //   ),
+    // );
   }, []);
   return (
     <div className="box">
@@ -56,7 +54,6 @@ export const SearchBar = (): ReactElement => {
           </form>
         )}
       />
-      
     </div>
   );
 };

src/client/components/PullList/PullList.tsx

@@ -1,25 +1,23 @@
 import React, { ReactElement, useEffect, useMemo } from "react";
 import T2Table from "../shared/T2Table";
 import { getWeeklyPullList } from "../../actions/comicinfo.actions";
-import { useDispatch, useSelector } from "react-redux";
 import Card from "../shared/Carda";
 import ellipsize from "ellipsize";
 import { isNil } from "lodash";
 
 export const PullList = (): ReactElement => {
-  const pullListComics = useSelector(
-    (state: RootState) => state.comicInfo.pullList,
-  );
+  // const pullListComics = useSelector(
+  //   (state: RootState) => state.comicInfo.pullList,
+  // );
 
-  const dispatch = useDispatch();
   useEffect(() => {
-    dispatch(
-      getWeeklyPullList({
-        startDate: "2023-7-28",
-        pageSize: "15",
-        currentPage: "1",
-      }),
-    );
+    // dispatch(
+    //   getWeeklyPullList({
+    //     startDate: "2023-7-28",
+    //     pageSize: "15",
+    //     currentPage: "1",
+    //   }),
+    // );
   }, []);
   const nextPageHandler = () => {};
   const previousPageHandler = () => {};

src/client/components/Settings/AirDCPPSettings/AirDCPPHubsForm.tsx

@@ -1,39 +1,68 @@
 import React, { ReactElement, useEffect, useState, useContext } from "react";
 import { Form, Field } from "react-final-form";
-import { useDispatch } from "react-redux";
 import { isEmpty, isNil, isUndefined } from "lodash";
 import Select from "react-select";
-import { saveSettings } from "../../../actions/settings.actions";
-import { AirDCPPSocketContext } from "../../../context/AirDCPPSocket";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useStore } from "../../../store";
+import axios from "axios";
 
-export const AirDCPPHubsForm = (airDCPPClientUserSettings): ReactElement => {
-  const dispatch = useDispatch();
-  const [hubList, setHubList] = useState([]);
-  const airDCPPConfiguration = useContext(AirDCPPSocketContext);
+export const AirDCPPHubsForm = (): ReactElement => {
+  const queryClient = useQueryClient();
   const {
-    airDCPPState: { settings, socket },
-  } = airDCPPConfiguration;
+    airDCPPSocketInstance,
+    airDCPPClientConfiguration,
+    airDCPPSessionInformation,
+  } = useStore((state) => ({
+    airDCPPSocketInstance: state.airDCPPSocketInstance,
+    airDCPPClientConfiguration: state.airDCPPClientConfiguration,
+    airDCPPSessionInformation: state.airDCPPSessionInformation,
+  }));
 
-  useEffect(() => {
-    (async () => {
-      if (!isEmpty(settings)) {
-        const hubs = await socket.get(`hubs`);
-        const hubSelectionOptions = hubs.map(({ hub_url, identity }) => ({
-          value: hub_url,
-          label: identity.name,
-        }));
-
-        setHubList(hubSelectionOptions);
-      }
-    })();
-  }, []);
-
-  const onSubmit = (values) => {
-    if (!isUndefined(values.hubs)) {
-      dispatch(saveSettings({ ...settings, hubs: values.hubs }, settings._id));
-    }
-  };
+  const {
+    data: settings,
+    isLoading,
+    isError,
+  } = useQuery({
+    queryKey: ["settings"],
+    queryFn: async () =>
+      await axios({
+        url: "http://localhost:3000/api/settings/getAllSettings",
+        method: "GET",
+      }),
+  });
 
+  /**
+   * Get the hubs list from an AirDCPP Socket
+   */
+  const { data: hubs } = useQuery({
+    queryKey: [],
+    queryFn: async () => await airDCPPSocketInstance.get(`hubs`),
+    enabled: !!settings,
+  });
+  let hubList = {};
+  if (!isEmpty(hubs)) {
+    console.log("hs", hubs);
+    hubList = hubs.map(({ hub_url, identity }) => ({
+      value: hub_url,
+      label: identity.name,
+    }));
+  }
+  console.log(hubList);
+  const { mutate } = useMutation({
+    mutationFn: async (values) =>
+      await axios({
+        url: `http://localhost:3000/api/settings/saveSettings`,
+        method: "POST",
+        data: {
+          settingsPayload: values,
+          settingsObjectId: settings?.data._id,
+          settingsKey: "directConnect",
+        },
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["settings"] });
+    },
+  });
   const validate = async () => {};
 
   const SelectAdapter = ({ input, ...rest }) => {
@@ -42,53 +71,70 @@ export const AirDCPPHubsForm = (airDCPPClientUserSettings): ReactElement => {
 
   return (
     <>
-      <Form
-        onSubmit={onSubmit}
-        validate={validate}
-        render={({ handleSubmit }) => (
-          <form onSubmit={handleSubmit}>
-            <div>
-              <h3 className="title">Hubs</h3>
-              <h6 className="subtitle has-text-grey-light">
-                Select the hubs you want to perform searches against.
-              </h6>
-            </div>
-            <div className="field">
-              <label className="label">AirDC++ Host</label>
-              <div className="control">
-                <Field
-                  name="hubs"
-                  component={SelectAdapter}
-                  className="basic-multi-select"
-                  placeholder="Select Hubs to Search Against"
-                  options={hubList}
-                />
+      {!isEmpty(hubList) && !isUndefined(hubs) ? (
+        <Form
+          onSubmit={mutate}
+          validate={validate}
+          render={({ handleSubmit }) => (
+            <form onSubmit={handleSubmit}>
+              <div>
+                <h3 className="title">Hubs</h3>
+                <h6 className="subtitle has-text-grey-light">
+                  Select the hubs you want to perform searches against.
+                </h6>
+              </div>
+              <div className="field">
+                <label className="label">AirDC++ Host</label>
+                <div className="control">
+                  <Field
+                    name="hubs"
+                    component={SelectAdapter}
+                    className="basic-multi-select"
+                    placeholder="Select Hubs to Search Against"
+                    options={hubList}
+                  />
+                </div>
               </div>
-            </div>
 
-            <button type="submit" className="button is-primary">
-              Submit
-            </button>
-          </form>
-        )}
-      />
-      <div className="mt-4">
-        <article className="message is-warning">
-          <div className="message-body is-size-6 is-family-secondary">
-            Your selection in the dropdown <strong>will replace</strong> the
-            existing selection.
+              <button type="submit" className="button is-primary">
+                Submit
+              </button>
+            </form>
+          )}
+        />
+      ) : (
+        <>
+          <article className="message">
+            <div className="message-body">
+              No configured hubs detected in AirDC++. <br />
+              Configure to a hub in AirDC++ and then select a default hub here.
+            </div>
+          </article>
+        </>
+      )}
+      {!isEmpty(settings?.data.directConnect?.client.hubs) ? (
+        <>
+          <div className="mt-4">
+            <article className="message is-warning">
+              <div className="message-body is-size-6 is-family-secondary">
+                Your selection in the dropdown <strong>will replace</strong> the
+                existing selection.
+              </div>
+            </article>
           </div>
-        </article>
-      </div>
-      <div className="box mt-3">
-        <h6>Selected hubs</h6>
-        {settings.directConnect.client.hubs.map(({ value, label }) => (
-          <div key={value}>
-            <div>{label}</div>
-            <span className="is-size-7">{value}</span>
+          <div className="box mt-3">
+            <h6>Default Hub For Searches:</h6>
+            {settings?.data.directConnect?.client.hubs.map(
+              ({ value, label }) => (
+                <div key={value}>
+                  <div>{label}</div>
+                  <span className="is-size-7">{value}</span>
+                </div>
+              ),
+            )}
           </div>
-        ))}
-      </div>
+        </>
+      ) : null}
     </>
   );
 };

src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx

@@ -2,60 +2,95 @@ import React, { ReactElement, useCallback } from "react";
 import { AirDCPPSettingsConfirmation } from "./AirDCPPSettingsConfirmation";
 import { isUndefined, isEmpty } from "lodash";
 import { ConnectionForm } from "../../shared/ConnectionForm/ConnectionForm";
-import { useStore } from "../../../store/index";
+import { initializeAirDCPPSocket, useStore } from "../../../store/index";
 import { useShallow } from "zustand/react/shallow";
+import { useMutation } from "@tanstack/react-query";
+import axios from "axios";
 
 export const AirDCPPSettingsForm = (): ReactElement => {
   // cherry-picking selectors for:
   // 1. initial values for the form
   // 2. If initial values are present, get the socket information to display
+  const { setState } = useStore;
   const {
     airDCPPSocketConnected,
     airDCPPDisconnectionInfo,
-    airDCPPSocketConnectionInformation,
+    airDCPPSessionInformation,
     airDCPPClientConfiguration,
+    airDCPPSocketInstance,
+    setAirDCPPSocketInstance,
   } = useStore(
     useShallow((state) => ({
       airDCPPSocketConnected: state.airDCPPSocketConnected,
       airDCPPDisconnectionInfo: state.airDCPPDisconnectionInfo,
       airDCPPClientConfiguration: state.airDCPPClientConfiguration,
-      airDCPPSocketConnectionInformation:
-        state.airDCPPSocketConnectionInformation,
+      airDCPPSessionInformation: state.airDCPPSessionInformation,
+      airDCPPSocketInstance: state.airDCPPSocketInstance,
+      setAirDCPPSocketInstance: state.setAirDCPPSocketInstance,
     })),
   );
 
-  const onSubmit = useCallback(async (values) => {
-    try {
-      // airDCPPSettings.setSettings(values);
-    } catch (error) {
-      console.log(error);
-    }
-  }, []);
-  const removeSettings = useCallback(async () => {
-    // airDCPPSettings.setSettings({});
-  }, []);
+  /**
+   * Mutation to update settings and subsequently initialize
+   * AirDC++ socket with those settings
+   */
+  const { mutate } = useMutation({
+    mutationFn: async (values) =>
+      await axios({
+        url: `http://localhost:3000/api/settings/saveSettings`,
+        method: "POST",
+        data: { settingsPayload: values, settingsKey: "directConnect" },
+      }),
+    onSuccess: async (values) => {
+      const {
+        data: {
+          directConnect: {
+            client: { host },
+          },
+        },
+      } = values;
+      const dcppSocketInstance = await initializeAirDCPPSocket(host);
+      setState({
+        airDCPPClientConfiguration: host,
+        airDCPPSocketInstance: dcppSocketInstance,
+      });
+    },
+  });
+  const deleteSettingsMutation = useMutation(
+    async () =>
+      await axios.post("http://localhost:3000/api/settings/saveSettings", {
+        settingsPayload: {},
+        settingsKey: "directConnect",
+      }),
+  );
+
+  // const removeSettings = useCallback(async () => {
+  //   // airDCPPSettings.setSettings({});
+  // }, []);
   //
   const initFormData = !isUndefined(airDCPPClientConfiguration)
     ? airDCPPClientConfiguration
     : {};
-
+  console.log(airDCPPClientConfiguration);
   return (
     <>
       <ConnectionForm
         initialData={initFormData}
-        submitHandler={onSubmit}
+        submitHandler={mutate}
         formHeading={"Configure AirDC++"}
       />
 
-      {!isEmpty(airDCPPSocketConnectionInformation) ? (
-        <AirDCPPSettingsConfirmation
-          settings={airDCPPSocketConnectionInformation}
-        />
+      {!isEmpty(airDCPPSessionInformation) ? (
+        <AirDCPPSettingsConfirmation settings={airDCPPSessionInformation} />
       ) : null}
 
       {!isEmpty(airDCPPClientConfiguration) ? (
         <p className="control mt-4">
-          <button className="button is-danger" onClick={removeSettings}>
+          as
+          <button
+            className="button is-danger"
+            onClick={() => deleteSettingsMutation.mutate()}
+          >
             Delete
           </button>
         </p>

src/client/components/Settings/Settings.tsx

@@ -14,7 +14,11 @@ export const Settings = (props: ISettingsProps): ReactElement => {
   const settingsContent = [
     {
       id: "adc-hubs",
-      content: <div key="adc-hubs">{/* <AirDCPPHubsForm /> */}</div>,
+      content: (
+        <div key="adc-hubs">
+          <AirDCPPHubsForm />
+        </div>
+      ),
     },
     {
       id: "adc-connection",
@@ -38,7 +42,11 @@ export const Settings = (props: ISettingsProps): ReactElement => {
     },
     {
       id: "flushdb",
-      content: <div key="flushdb">{/* <SystemSettingsForm /> */}</div>,
+      content: (
+        <div key="flushdb">
+          <SystemSettingsForm />
+        </div>
+      ),
     },
   ];
   return (

src/client/components/Settings/SystemSettings/SystemSettingsForm.tsx

@@ -1,15 +1,16 @@
-import React, { ReactElement, useCallback } from "react";
-import { flushDb } from "../../../actions/settings.actions";
-import { useDispatch, useSelector } from "react-redux";
+import React, { ReactElement } from "react";
+import { useMutation } from "@tanstack/react-query";
+import axios from "axios";
 
 export const SystemSettingsForm = (): ReactElement => {
-  const dispatch = useDispatch();
-  const isSettingsCallInProgress = useSelector(
-    (state: RootState) => state.settings.inProgress,
-  );
-  const flushDatabase = useCallback(() => {
-    dispatch(flushDb());
-  }, []);
+  const { mutate: flushDb, isLoading } = useMutation({
+    mutationFn: async () => {
+      await axios({
+        url: `http://localhost:3000/api/library/flushDb`,
+        method: "POST",
+      });
+    },
+  });
 
   return (
     <div className="is-clearfix">
@@ -48,11 +49,9 @@ export const SystemSettingsForm = (): ReactElement => {
 
         <button
           className={
-            isSettingsCallInProgress
-              ? "button is-danger is-loading"
-              : "button is-danger"
+            isLoading ? "button is-danger is-loading" : "button is-danger"
           }
-          onClick={flushDatabase}
+          onClick={() => flushDb()}
         >
           <span className="icon">
             <i className="fas fa-eraser"></i>

src/client/components/Volumes/Volumes.tsx

@@ -1,5 +1,4 @@
 import React, { ReactElement, useEffect, useMemo } from "react";
-import { useDispatch, useSelector } from "react-redux";
 import { searchIssue } from "../../actions/fileops.actions";
 import Card from "../shared/Carda";
 import T2Table from "../shared/T2Table";
@@ -8,24 +7,23 @@ import { convert } from "html-to-text";
 import { isUndefined } from "lodash";
 
 export const Volumes = (props): ReactElement => {
-  const volumes = useSelector((state: RootState) => state.fileOps.volumes);
-  const dispatch = useDispatch();
+  // const volumes = useSelector((state: RootState) => state.fileOps.volumes);
   useEffect(() => {
-    dispatch(
-      searchIssue(
-        {
-          query: {},
-        },
-        {
-          pagination: {
-            size: 25,
-            from: 0,
-          },
-          type: "volumes",
-          trigger: "volumesPage",
-        },
-      ),
-    );
+    // dispatch(
+    //   searchIssue(
+    //     {
+    //       query: {},
+    //     },
+    //     {
+    //       pagination: {
+    //         size: 25,
+    //         from: 0,
+    //       },
+    //       type: "volumes",
+    //       trigger: "volumesPage",
+    //     },
+    //   ),
+    // );
   }, []);
   const columnData = useMemo(
     () => [

src/client/components/WantedComics/WantedComics.tsx

@@ -1,5 +1,4 @@
 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";
 import T2Table from "../shared/T2Table";
@@ -7,26 +6,25 @@ import { isEmpty, isUndefined } from "lodash";
 import MetadataPanel from "../shared/MetadataPanel";
 
 export const WantedComics = (props): ReactElement => {
-  const wantedComics = useSelector(
-    (state: RootState) => state.fileOps.wantedComics,
-  );
-  const dispatch = useDispatch();
+  // const wantedComics = useSelector(
+  //   (state: RootState) => state.fileOps.wantedComics,
+  // );
   useEffect(() => {
-    dispatch(
-      searchIssue(
-        {
-          query: {},
-        },
-        {
-          pagination: {
-            size: 25,
-            from: 0,
-          },
-          type: "wanted",
-          trigger: "wantedComicsPage"
-        },
-      ),
-    );
+    // dispatch(
+    //   searchIssue(
+    //     {
+    //       query: {},
+    //     },
+    //     {
+    //       pagination: {
+    //         size: 25,
+    //         from: 0,
+    //       },
+    //       type: "wanted",
+    //       trigger: "wantedComicsPage"
+    //     },
+    //   ),
+    // );
   }, []);
 
   const columnData = [
@@ -37,7 +35,7 @@ export const WantedComics = (props): ReactElement => {
           header: "Details",
           id: "comicDetails",
           minWidth: 350,
-          accessorFn: data => data,
+          accessorFn: (data) => data,
           cell: (value) => <MetadataPanel data={value.getValue()} />,
         },
       ],
@@ -49,8 +47,10 @@ export const WantedComics = (props): ReactElement => {
           header: "Files",
           accessorKey: "acquisition",
           align: "right",
-          cell: props => {
-            const { directconnect: { downloads } } = props.getValue();
+          cell: (props) => {
+            const {
+              directconnect: { downloads },
+            } = props.getValue();
             return (
               <div
                 style={{
@@ -60,9 +60,7 @@ export const WantedComics = (props): ReactElement => {
                 }}
               >
                 {downloads.length > 0 ? (
-                  <span className="tag is-warning">
-                    {downloads.length}
-                  </span>
+                  <span className="tag is-warning">{downloads.length}</span>
                 ) : null}
               </div>
             );
@@ -72,11 +70,17 @@ export const WantedComics = (props): ReactElement => {
           header: "Download Details",
           id: "downloadDetails",
           accessorKey: "acquisition",
-          cell: data => <ol>
-            {data.getValue().directconnect.downloads.map((download, idx) => {
-              return <li className="is-size-7" key={idx}>{download.name}</li>;
-            })}
-          </ol>
+          cell: (data) => (
+            <ol>
+              {data.getValue().directconnect.downloads.map((download, idx) => {
+                return (
+                  <li className="is-size-7" key={idx}>
+                    {download.name}
+                  </li>
+                );
+              })}
+            </ol>
+          ),
         },
         {
           header: "Type",
@@ -92,7 +96,7 @@ export const WantedComics = (props): ReactElement => {
    * @param {number} pageIndex
    * @param {number} pageSize
    * @returns void
-   *  
+   *
    **/
   const nextPage = useCallback((pageIndex: number, pageSize: number) => {
     dispatch(
@@ -112,7 +116,6 @@ export const WantedComics = (props): ReactElement => {
     );
   }, []);
 
-
   /**
    * Pagination control that fetches the previous x (pageSize) items
    * based on the y (pageIndex) offset from the Elasticsearch index
@@ -138,7 +141,7 @@ export const WantedComics = (props): ReactElement => {
             from,
           },
           type: "wanted",
-          trigger: "wantedComicsPage"
+          trigger: "wantedComicsPage",
         },
       ),
     );
@@ -161,7 +164,7 @@ export const WantedComics = (props): ReactElement => {
                   nextPage: nextPage,
                   previousPage: previousPage,
                 }}
-              // rowClickHandler={navigateToComicDetail}
+                // rowClickHandler={navigateToComicDetail}
               />
               {/* pagination controls */}
             </div>

src/client/components/shared/ErrorPage.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const ErrorPage = () => {
+  return <>Error has been encountered.</>;
+};

src/client/components/shared/Navbar.tsx

@@ -1,15 +1,46 @@
-import React, { useContext } from "react";
+import React from "react";
 import { SearchBar } from "../GlobalSearchBar/SearchBar";
 import { DownloadProgressTick } from "../ComicDetail/DownloadProgressTick";
 import { Link } from "react-router-dom";
-import { isUndefined } from "lodash";
+import { isEmpty, isNil, isUndefined } from "lodash";
 import { format, fromUnixTime } from "date-fns";
+import { useStore } from "../../store/index";
+import { useShallow } from "zustand/react/shallow";
 
 const Navbar: React.FunctionComponent = (props) => {
+  const {
+    airDCPPSocketConnected,
+    airDCPPDisconnectionInfo,
+    airDCPPSessionInformation,
+    airDCPPDownloadTick,
+    importJobQueue,
+  } = useStore(
+    useShallow((state) => ({
+      airDCPPSocketConnected: state.airDCPPSocketConnected,
+      airDCPPDisconnectionInfo: state.airDCPPDisconnectionInfo,
+      airDCPPSessionInformation: state.airDCPPSessionInformation,
+      airDCPPDownloadTick: state.airDCPPDownloadTick,
+      importJobQueue: state.importJobQueue,
+    })),
+  );
+  //   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">
-        <Link to="/" className="navbar-item">
+        <Link to="/dashboard" className="navbar-item">
           <img
             src="/src/client/assets/img/threetwo.svg"
             alt="ThreeTwo! A comic book curator"
@@ -55,6 +86,8 @@ const Navbar: React.FunctionComponent = (props) => {
             Downloads
           </Link>
 
+          {/* <SearchBar /> */}
+
           <Link to="/search" className="navbar-item">
             Search ComicVine
           </Link>
@@ -63,7 +96,102 @@ const Navbar: React.FunctionComponent = (props) => {
         <div className="navbar-end">
           <a className="navbar-item is-hidden-desktop-only"></a>
 
+          <div className="navbar-item has-dropdown is-hoverable">
+            <a className="navbar-link is-arrowless">
+              <i className="fa-solid fa-download"></i>
+              {!isEmpty(airDCPPDownloadTick) && (
+                <div className="pulsating-circle"></div>
+              )}
+            </a>
+            {!isEmpty(airDCPPDownloadTick) ? (
+              <div className="navbar-dropdown is-right is-boxed">
+                <a className="navbar-item">
+                  <DownloadProgressTick data={airDCPPDownloadTick} />
+                </a>
+              </div>
+            ) : null}
+          </div>
+
+          {!isUndefined(importJobQueue.status) &&
+          location.hash !== "#/import" ? (
+            <div className="navbar-item has-dropdown is-hoverable">
+              <a className="navbar-link is-arrowless">
+                <i className="fa-solid fa-file-import has-text-warning-dark"></i>
+              </a>
+
+              <div className="navbar-dropdown is-right is-boxed">
+                <a className="navbar-item">
+                  <ul>
+                    {importJobQueue.successfulJobCount > 0 ? (
+                      <li className="mb-2">
+                        <span className="tag is-success mr-2">
+                          {importJobQueue.successfulJobCount}
+                        </span>
+                        imported.
+                      </li>
+                    ) : null}
+                    {importJobQueue.failedJobCount > 0 ? (
+                      <li>
+                        <span className="tag is-danger mr-2">
+                          {importJobQueue.failedJobCount}
+                        </span>
+                        failed to import.
+                      </li>
+                    ) : null}
+                  </ul>
+                </a>
+              </div>
+            </div>
+          ) : null}
+
           {/* AirDC++ socket connection status */}
+          <div className="navbar-item has-dropdown is-hoverable">
+            {!isUndefined(airDCPPSessionInformation.user) ? (
+              <>
+                <a className="navbar-link is-arrowless has-text-success">
+                  <i className="fa-solid fa-bolt"></i>
+                </a>
+                <div className="navbar-dropdown pr-2 pl-2 is-right airdcpp-status is-boxed">
+                  {/* AirDC++ Session Information */}
+
+                  <p>
+                    Last login was{" "}
+                    <span className="tag">
+                      {format(
+                        fromUnixTime(
+                          airDCPPSessionInformation?.user.last_login,
+                        ),
+                        "dd MMMM, yyyy",
+                      )}
+                    </span>
+                  </p>
+                  <hr className="navbar-divider" />
+                  <p>
+                    <span className="tag has-text-success">
+                      {airDCPPSessionInformation.user.username}
+                    </span>
+                    connected to{" "}
+                    <span className="tag has-text-success">
+                      {airDCPPSessionInformation.system_info.client_version}
+                    </span>{" "}
+                    with session ID{" "}
+                    <span className="tag has-text-success">
+                      {airDCPPSessionInformation.session_id}
+                    </span>
+                  </p>
+                </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 is-boxed">
+                  <pre>{JSON.stringify(airDCPPDisconnectionInfo, null, 2)}</pre>
+                </div>
+              </>
+            )}
+          </div>
 
           <div className="navbar-item has-dropdown is-hoverable is-mega">
             <div className="navbar-link flex">Blog</div>

src/client/components/shared/T2Table.tsx

@@ -12,26 +12,30 @@ import {
 } from "@tanstack/react-table";
 
 export const T2Table = (tableOptions): ReactElement => {
-  const { sourceData, columns, paginationHandlers: { nextPage, previousPage }, totalPages, rowClickHandler } =
-    tableOptions;
+  const {
+    sourceData,
+    columns,
+    paginationHandlers: { nextPage, previousPage },
+    totalPages,
+    rowClickHandler,
+  } = tableOptions;
 
-  const [{ pageIndex, pageSize }, setPagination] =
-    useState<PaginationState>({
-      pageIndex: 1,
-      pageSize: 15,
-    });
+  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
+    pageIndex: 1,
+    pageSize: 15,
+  });
 
   const pagination = useMemo(
     () => ({
       pageIndex,
       pageSize,
     }),
-    [pageIndex, pageSize]
+    [pageIndex, pageSize],
   );
 
   /**
-   * Pagination control to move forward one page 
-   * @returns void 
+   * Pagination control to move forward one page
+   * @returns void
    */
   const goToNextPage = () => {
     setPagination({
@@ -39,10 +43,10 @@ export const T2Table = (tableOptions): ReactElement => {
       pageSize,
     });
     nextPage(pageIndex, pageSize);
-  }
+  };
 
   /**
-   * Pagination control to move backward one page 
+   * Pagination control to move backward one page
    * @returns void
    **/
   const goToPreviousPage = () => {
@@ -51,7 +55,7 @@ export const T2Table = (tableOptions): ReactElement => {
       pageSize,
     });
     previousPage(pageIndex, pageSize);
-  }
+  };
 
   const table = useReactTable({
     data: sourceData,
@@ -75,15 +79,29 @@ export const T2Table = (tableOptions): ReactElement => {
         {/* 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> */}
+            <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">
             <div className="control">
-              <div className="button" onClick={() => goToPreviousPage()}> <i className="fas fa-chevron-left"></i></div>
+              <button
+                className="button"
+                onClick={() => goToPreviousPage()}
+                disabled={pageIndex === 1}
+              >
+                <i className="fas fa-chevron-left"></i>
+              </button>
             </div>
             <div className="control">
-              <div className="button" onClick={() => goToNextPage()}> <i className="fas fa-chevron-right"></i> </div>
+              <button
+                className="button"
+                onClick={() => goToNextPage()}
+                disabled={pageIndex > Math.floor(totalPages / pageSize)}
+              >
+                <i className="fas fa-chevron-right"></i>
+              </button>
             </div>
 
             <div className="field has-addons ml-5">
@@ -112,16 +130,13 @@ export const T2Table = (tableOptions): ReactElement => {
           {table.getHeaderGroups().map((headerGroup, idx) => (
             <tr key={headerGroup.id}>
               {headerGroup.headers.map((header, idx) => (
-                <th
-                  key={header.id}
-                  colSpan={header.colSpan}
-                >
+                <th key={header.id} colSpan={header.colSpan}>
                   {header.isPlaceholder
                     ? null
                     : flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    )}
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
                 </th>
               ))}
             </tr>
@@ -131,11 +146,8 @@ export const T2Table = (tableOptions): ReactElement => {
         <tbody>
           {table.getRowModel().rows.map((row, idx) => {
             return (
-              <tr
-                key={row.id}
-                onClick={() => rowClickHandler(row)}
-              >
-                {row.getVisibleCells().map(cell => (
+              <tr key={row.id} onClick={() => rowClickHandler(row)}>
+                {row.getVisibleCells().map((cell) => (
                   <td key={cell.id}>
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </td>

src/client/context/AirDCPPSocket.tsx

@@ -1,108 +0,0 @@
-import { isEmpty, isUndefined } from "lodash";
-import React, { createContext, useEffect, useState } from "react";
-import { useQuery, useMutation } from "@tanstack/react-query";
-import { useStore } from "../store/index";
-import AirDCPPSocket from "../services/DcppSearchService";
-import axios from "axios";
-
-const AirDCPPSocketContextProvider = ({ children }) => {
-  const { getState, setState } = useStore;
-  // setter for settings for use in the context consumer
-  const setSettings = (settingsObject) => {
-    persistSettings({
-      ...airDCPPState,
-      airDCPPState: {
-        settings: settingsObject,
-        socket: {},
-        socketConnectionInformation: {},
-      },
-    });
-  };
-  // Initial state for AirDC++ configuration
-  const initState = {
-    airDCPPState: {
-      settings: {},
-      socket: {},
-      socketConnectionInformation: {},
-    },
-    setSettings: setSettings,
-  };
-  const [airDCPPState, persistSettings] = useState(initState);
-
-  // 1. get settings from mongo
-  const { data, isLoading, isError } = useQuery({
-    queryKey: ["settings"],
-    queryFn: async () =>
-      await axios({
-        url: "http://localhost:3000/api/settings/getAllSettings",
-        method: "GET",
-      }),
-  });
-
-  const directConnectConfiguration = data?.data.directConnect.client.host;
-
-  // 2. If available, init AirDC++ Socket with those settings
-  useEffect(() => {
-    if (!isEmpty(directConnectConfiguration)) {
-      initializeAirDCPPSocket(directConnectConfiguration);
-    }
-  }, [directConnectConfiguration]);
-
-  // Method to init AirDC++ Socket with supplied settings
-  const initializeAirDCPPSocket = async (configuration) => {
-    console.log("[AirDCPP]: Initializing socket...");
-
-    const initializedAirDCPPSocket = new AirDCPPSocket({
-      protocol: `${configuration.protocol}`,
-      hostname: `${configuration.hostname}:${configuration.port}`,
-      username: `${configuration.username}`,
-      password: `${configuration.password}`,
-    });
-
-    // Set up connect and disconnect handlers
-    initializedAirDCPPSocket.onConnected = (sessionInfo) => {
-      // update global state with socket connection status
-      setState({
-        airDCPPSocketConnected: true,
-      });
-    };
-    initializedAirDCPPSocket.onDisconnected = async (
-      reason,
-      code,
-      wasClean,
-    ) => {
-      // update global state with socket connection status
-      setState({
-        disconnectionInfo: { reason, code, wasClean },
-        airDCPPSocketConnected: false,
-      });
-    };
-    // Attempt connection
-    const socketConnectionInformation =
-      await initializedAirDCPPSocket.connect();
-
-    // update the state with the new socket connection information
-    persistSettings({
-      ...airDCPPState,
-      airDCPPState: {
-        settings: configuration,
-        socket: initializedAirDCPPSocket,
-        socketConnectionInformation,
-      },
-    });
-  };
-
-  console.log("connected?", getState());
-  // the Provider gives access to the context to its children
-  return (
-    <AirDCPPSocketContext.Provider value={airDCPPState}>
-      {children}
-    </AirDCPPSocketContext.Provider>
-  );
-};
-const AirDCPPSocketContext = createContext({
-  airDCPPState: {},
-  saveSettings: () => {},
-});
-
-export { AirDCPPSocketContext, AirDCPPSocketContextProvider };

src/client/index.tsx

@@ -4,10 +4,15 @@ import { createRoot } from "react-dom/client";
 import App from "./components/App";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Settings from "./components/Settings/Settings";
+import { ErrorPage } from "./components/shared/ErrorPage";
 const rootEl = document.getElementById("root");
 const root = createRoot(rootEl);
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import Import from "./components/Import/Import";
+import Dashboard from "./components/Dashboard/Dashboard";
+import TabulatedContentContainer from "./components/Library/TabulatedContentContainer";
+import { ComicDetailContainer } from "./components/ComicDetail/ComicDetailContainer";
 
 const queryClient = new QueryClient();
 
@@ -15,10 +20,20 @@ const router = createBrowserRouter([
   {
     path: "/",
     element: <App />,
-  },
-  {
-    path: "/settings",
-    element: <Settings />,
+    errorElement: <ErrorPage />,
+    children: [
+      { path: "dashboard", element: <Dashboard /> },
+      { path: "settings", element: <Settings /> },
+      {
+        path: "library",
+        element: <TabulatedContentContainer category="library" />,
+      },
+      {
+        path: "comic/details/:comicObjectId",
+        element: <ComicDetailContainer />,
+      },
+      { path: "import", element: <Import path={"./comics"} /> },
+    ],
   },
 ]);
 

src/client/store/index.ts

@@ -1,90 +1,198 @@
 import { create } from "zustand";
-import { isEmpty } from "lodash";
+import { isEmpty, isNil, isUndefined } from "lodash";
+import io from "socket.io-client";
+import { SOCKET_BASE_URI } from "../constants/endpoints";
+import { produce } from "immer";
 import AirDCPPSocket from "../services/DcppSearchService";
 import axios from "axios";
 
+/*  Broadly, this file sets up:
+ *    1. The zustand-based global client state
+ *    2. socket.io client
+ *    3. AirDC++ websocket connection
+ */
 export const useStore = create((set, get) => ({
   // AirDC++ state
+  airDCPPSocketInstance: {},
   airDCPPSocketConnected: false,
   airDCPPDisconnectionInfo: {},
   airDCPPClientConfiguration: {},
-  airDCPPSocketConnectionInformation: {},
+  airDCPPSessionInformation: {},
   setAirDCPPSocketConnectionStatus: () =>
     set((value) => ({
       airDCPPSocketConnected: value,
     })),
-  getAirDCPPConnectionStatus: () => {
-    const airDCPPSocketConnectionStatus = get().airDCPPSocketConnected;
-  },
+  airDCPPDownloadTick: {},
   // Socket.io state
+  socketIOInstance: {},
+
+  // Import job queue and associated statuses
+  importJobQueue: {
+    successfulJobCount: 0,
+    failedJobCount: 0,
+    status: undefined,
+    setStatus: (status: string) =>
+      set(
+        produce((draftState) => {
+          draftState.importJobQueue.status = status;
+        }),
+      ),
+    setJobCount: (jobType: string, count: Number) => {
+      switch (jobType) {
+        case "successful":
+          set(
+            produce((draftState) => {
+              draftState.importJobQueue.successfulJobCount = count;
+            }),
+          );
+          break;
+
+        case "failed":
+          set(
+            produce((draftState) => {
+              draftState.importJobQueue.failedJobCount = count;
+            }),
+          );
+          break;
+      }
+    },
+    mostRecentImport: null,
+    setMostRecentImport: (fileName: string) => {
+      set(
+        produce((state) => {
+          state.importJobQueue.mostRecentImport = fileName;
+        }),
+      );
+    },
+  },
 }));
 
 const { getState, setState } = useStore;
 
-// Method to init AirDC++ Socket with supplied settings
-const initializeAirDCPPSocket = async (configuration) => {
-  console.log("[AirDCPP]: Initializing socket...");
+/** Socket.IO initialization **/
+// 1. Fetch sessionId from localStorage
+const sessionId = localStorage.getItem("sessionId");
+// 2. socket.io instantiation
+const socketIOInstance = io(SOCKET_BASE_URI, {
+  transports: ["websocket"],
+  withCredentials: true,
+  query: { sessionId },
+});
+// 3. Set the instance in global state
+setState({
+  socketIOInstance,
+});
 
-  const initializedAirDCPPSocket = new AirDCPPSocket({
-    protocol: `${configuration.protocol}`,
-    hostname: `${configuration.hostname}:${configuration.port}`,
-    username: `${configuration.username}`,
-    password: `${configuration.password}`,
-  });
-
-  // Set up connect and disconnect handlers
-  initializedAirDCPPSocket.onConnected = (sessionInfo) => {
-    // update global state with socket connection status
-    setState({
-      airDCPPSocketConnected: true,
-    });
-  };
-  initializedAirDCPPSocket.onDisconnected = async (reason, code, wasClean) => {
-    // update global state with socket connection status
-    setState({
-      disconnectionInfo: { reason, code, wasClean },
-      airDCPPSocketConnected: false,
-    });
-  };
-  // AirDC++ Socket-related connection and post-connection
-  // Attempt connection
-  const airDCPPSocketConnectionInformation =
-    await initializedAirDCPPSocket.connect();
-  setState({
-    airDCPPSocketConnectionInformation,
-  });
-
-  // Set up event listeners
-  initializedAirDCPPSocket.addListener(
-    `queue`,
-    "queue_bundle_tick",
-    async (downloadProgressData) => {
-      console.log(downloadProgressData);
+// Socket.io-based session restoration
+if (!isNil(sessionId)) {
+  // 1. Resume the session
+  socketIOInstance.emit(
+    "call",
+    "socket.resumeSession",
+    {
+      sessionId,
     },
+    (data) => console.log(data),
   );
-  initializedAirDCPPSocket.addListener(
-    "queue",
-    "queue_bundle_added",
-    async (data) => {
-      console.log("JEMEN:", data);
+} else {
+  // 1. Inititalize the session and persist the sessionId to localStorage
+  socketIOInstance.on("sessionInitialized", (sessionId) => {
+    localStorage.setItem("sessionId", sessionId);
+  });
+}
+// 2. If a job is in progress, restore the job counts and persist those to global state
+socketIOInstance.on("RESTORE_JOB_COUNTS_AFTER_SESSION_RESTORATION", (data) => {
+  console.log("Active import in progress detected; restoring counts...");
+  const { completedJobCount, failedJobCount, queueStatus } = data;
+  setState((state) => ({
+    importJobQueue: {
+      ...state.importJobQueue,
+      successfulJobCount: completedJobCount,
+      failedJobCount,
+      status: queueStatus,
     },
-  );
+  }));
+});
 
-  initializedAirDCPPSocket.addListener(
-    `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
-        if (count < 1) {
-          console.log(`[AirDCPP]: Download complete.`);
+/**
+ * Method to init AirDC++ Socket with supplied settings
+ * @param configuration - credentials, and hostname details to init AirDC++ connection
+ * @returns Initialized AirDC++ connection socket instance
+ */
+export const initializeAirDCPPSocket = async (configuration): Promise<any> => {
+  try {
+    console.log("[AirDCPP]: Initializing socket...");
 
-          count += 1;
+    const initializedAirDCPPSocket = new AirDCPPSocket({
+      protocol: `${configuration.protocol}`,
+      hostname: `${configuration.hostname}:${configuration.port}`,
+      username: `${configuration.username}`,
+      password: `${configuration.password}`,
+    });
+
+    // Set up connect and disconnect handlers
+    initializedAirDCPPSocket.onConnected = (sessionInfo) => {
+      // update global state with socket connection status
+      setState({
+        airDCPPSocketConnected: true,
+      });
+    };
+    initializedAirDCPPSocket.onDisconnected = async (
+      reason,
+      code,
+      wasClean,
+    ) => {
+      // update global state with socket connection status
+      setState({
+        disconnectionInfo: { reason, code, wasClean },
+        airDCPPSocketConnected: false,
+      });
+    };
+    // AirDC++ Socket-related connection and post-connection
+    // Attempt connection
+    const airDCPPSessionInformation = await initializedAirDCPPSocket.connect();
+    setState({
+      airDCPPSessionInformation,
+    });
+
+    // Set up event listeners
+    initializedAirDCPPSocket.addListener(
+      `queue`,
+      "queue_bundle_tick",
+      async (downloadProgressData) => {
+        console.log(downloadProgressData);
+        setState({
+          airDCPPDownloadTick: downloadProgressData,
+        });
+      },
+    );
+    initializedAirDCPPSocket.addListener(
+      "queue",
+      "queue_bundle_added",
+      async (data) => {
+        console.log("JEMEN:", data);
+      },
+    );
+
+    initializedAirDCPPSocket.addListener(
+      `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
+          if (count < 1) {
+            console.log(`[AirDCPP]: Download complete.`);
+
+            count += 1;
+          }
         }
-      }
-    },
-  );
+      },
+    );
+    return initializedAirDCPPSocket;
+  } catch (error) {
+    console.error(error);
+  }
 };
 
 // 1. get settings from mongo
@@ -93,14 +201,19 @@ const { data } = await axios({
   method: "GET",
 });
 
-const directConnectConfiguration = data?.directConnect.client.host;
+const directConnectConfiguration = data?.directConnect?.client.host;
 
 // 2. If available, init AirDC++ Socket with those settings
-if (!isEmpty(directConnectConfiguration)) {
-  initializeAirDCPPSocket(directConnectConfiguration);
+if (!isNil(directConnectConfiguration)) {
+  const airDCPPSocketInstance = await initializeAirDCPPSocket(
+    directConnectConfiguration,
+  );
   setState({
+    airDCPPSocketInstance,
     airDCPPClientConfiguration: directConnectConfiguration,
   });
+} else {
+  console.log("problem");
 }
 
 console.log("connected?", getState());

yarn.lock

@@ -153,7 +153,7 @@
   dependencies:
     "@babel/types" "^7.23.0"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.22.15", "@babel/helper-module-imports@^7.22.5":
+"@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.22.15", "@babel/helper-module-imports@^7.22.5":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0"
   integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==
@@ -1045,7 +1045,7 @@
     "@babel/parser" "^7.22.15"
     "@babel/types" "^7.22.15"
 
-"@babel/traverse@^7.18.9", "@babel/traverse@^7.22.8", "@babel/traverse@^7.23.2", "@babel/traverse@^7.4.5":
+"@babel/traverse@^7.18.9", "@babel/traverse@^7.22.8", "@babel/traverse@^7.23.2":
   version "7.23.2"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.2.tgz#329c7a06735e144a506bdb2cad0268b7f46f4ad8"
   integrity sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==
@@ -1154,7 +1154,7 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43"
   integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==
 
-"@emotion/is-prop-valid@^1.1.0", "@emotion/is-prop-valid@^1.1.2", "@emotion/is-prop-valid@^1.2.1":
+"@emotion/is-prop-valid@^1.1.2", "@emotion/is-prop-valid@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
   integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==
@@ -1220,16 +1220,6 @@
     "@emotion/serialize" "^1.0.2"
     "@emotion/utils" "^1.1.0"
 
-"@emotion/stylis@^0.8.4":
-  version "0.8.5"
-  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
-  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
-
-"@emotion/unitless@^0.7.4":
-  version "0.7.5"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
-  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
-
 "@emotion/unitless@^0.8.0", "@emotion/unitless@^0.8.1":
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3"
@@ -1269,111 +1259,221 @@
   resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622"
   integrity sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==
 
+"@esbuild/android-arm64@0.19.7":
+  version "0.19.7"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.19.7.tgz#646156aea43e8e6723de6e94a4ac07c5aed41be1"
+  integrity sha512-YEDcw5IT7hW3sFKZBkCAQaOCJQLONVcD4bOyTXMZz5fr66pTHnAet46XAtbXAkJRfIn2YVhdC6R9g4xa27jQ1w==
+
 "@esbuild/android-arm@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.18.20.tgz#fedb265bc3a589c84cc11f810804f234947c3682"
   integrity sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==
 
+"@esbuild/android-arm@0.19.7":
+  version "0.19.7"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.19.7.tgz#0827b49aed813c33ea18ee257c1728cdc4a01030"
+  integrity sha512-YGSPnndkcLo4PmVl2tKatEn+0mlVMr3yEpOOT0BeMria87PhvoJb5dg5f5Ft9fbCVgtAz4pWMzZVgSEGpDAlww==
+
 "@esbuild/android-x64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.18.20.tgz#35cf419c4cfc8babe8893d296cd990e9e9f756f2"
   integrity sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==
 
+"@esbuild/android-x64@0.19.7":
+  version "0.19.7"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.19.7.tgz#fa294ed5214d88219d519e0ab1bbb0253a89b864"
+  integrity sha512-jhINx8DEjz68cChFvM72YzrqfwJuFbfvSxZAk4bebpngGfNNRm+zRl4rtT9oAX6N9b6gBcFaJHFew5Blf6CvUw==
+
 "@esbuild/darwin-arm64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz#08172cbeccf95fbc383399a7f39cfbddaeb0d7c1"
   integrity sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==
 
+"@esbuild/darwin-arm64@0.19.7":
+  version "0.19.7"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.19.7.tgz#e24d2ed545749ff251eabe8bce11fefa688892d3"
+  integrity sha512-dr81gbmWN//3ZnBIm6YNCl4p3pjnabg1/ZVOgz2fJoUO1a3mq9WQ/1iuEluMs7mCL+Zwv7AY5e3g1hjXqQZ9Iw==
+
 "@esbuild/darwin-x64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz#d70d5790d8bf475556b67d0f8b7c5bdff053d85d"
   integrity sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==
 
+"@esbuild/darwin-x64@0.19.7":
+  version "0.19.7"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.19.7.tgz#02d1f8a572874c90d8f55dde8a859e5145bd06f6"
+  integrity sha512-Lc0q5HouGlzQEwLkgEKnWcSazqr9l9OdV2HhVasWJzLKeOt0PLhHaUHuzb8s/UIya38DJDoUm74GToZ6Wc7NGQ==
+
 "@esbuild/freebsd-arm64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz#98755cd12707f93f210e2494d6a4b51b96977f54"
   integrity sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==
 
+"@esbuild/freebsd-arm64@0.19.7":
+  version "0.19.7"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.7.tgz#bc6a69b9a7915da278f0a5ebaec069c813982c22"
+  integrity sha512-+y2YsUr0CxDFF7GWiegWjGtTUF6gac2zFasfFkRJPkMAuMy9O7+2EH550VlqVdpEEchWMynkdhC9ZjtnMiHImQ==
+
 "@esbuild/freebsd-x64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz#c1eb2bff03915f87c29cece4c1a7fa1f423b066e"
   integrity sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==
 
+"@esbuild/freebsd-x64@0.19.7":
+  version "0.19.7"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.19.7.tgz#ec3708488625d70e565968ceea1355e7c8613865"
+  integrity sha512-CdXOxIbIzPJmJhrpmJTLx+o35NoiKBIgOvmvT+jeSadYiWJn0vFKsl+0bSG/5lwjNHoIDEyMYc/GAPR9jxusTA==
+
 "@esbuild/linux-arm64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz#bad4238bd8f4fc25b5a021280c770ab5fc3a02a0"
   integrity sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==
 
+"@esbuild/linux-arm64@0.19.7":
+  version "0.19.7"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.19.7.tgz#8e04b66c306858f92d4f90f8222775270755e88a"
+  integrity sha512-inHqdOVCkUhHNvuQPT1oCB7cWz9qQ/Cz46xmVe0b7UXcuIJU3166aqSunsqkgSGMtUCWOZw3+KMwI6otINuC9g==
+
 "@esbuild/linux-arm@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz#3e617c61f33508a27150ee417543c8ab5acc73b0"
   integrity sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==
 
+"@esbuild/linux-arm@0.19.7":
+  version "0.19.7"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.19.7.tgz#12d5b65e089029ee1fe4c591b60969c9b1a85355"
+  integrity sha512-Y+SCmWxsJOdQtjcBxoacn/pGW9HDZpwsoof0ttL+2vGcHokFlfqV666JpfLCSP2xLxFpF1lj7T3Ox3sr95YXww==
+
 "@esbuild/linux-ia32@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz#699391cccba9aee6019b7f9892eb99219f1570a7"
   integrity sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==
 
+"@esbuild/linux-ia32@0.19.7":
+  version "0.19.7"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.19.7.tgz#01eabc2a3ad9039e115db650268e4f48f910dbe2"
+  integrity sha512-2BbiL7nLS5ZO96bxTQkdO0euGZIUQEUXMTrqLxKUmk/Y5pmrWU84f+CMJpM8+EHaBPfFSPnomEaQiG/+Gmh61g==
+
 "@esbuild/linux-loong64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz#e6fccb7aac178dd2ffb9860465ac89d7f23b977d"
   integrity sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==
 
+"@esbuild/linux-loong64@0.19.7":
+  version "0.19.7"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.19.7.tgz#70681113632970e6a5766607bbdb98aa18cf4d5f"
+  integrity sha512-BVFQla72KXv3yyTFCQXF7MORvpTo4uTA8FVFgmwVrqbB/4DsBFWilUm1i2Oq6zN36DOZKSVUTb16jbjedhfSHw==
+
 "@esbuild/linux-mips64el@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz#eeff3a937de9c2310de30622a957ad1bd9183231"
   integrity sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==
 
+"@esbuild/linux-mips64el@0.19.7":
+  version "0.19.7"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.19.7.tgz#f63c022a71a3d70c482d1943a27cb8997021e230"
+  integrity sha512-DzAYckIaK+pS31Q/rGpvUKu7M+5/t+jI+cdleDgUwbU7KdG2eC3SUbZHlo6Q4P1CfVKZ1lUERRFP8+q0ob9i2w==
+
 "@esbuild/linux-ppc64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz#2f7156bde20b01527993e6881435ad79ba9599fb"
   integrity sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==
 
+"@esbuild/linux-ppc64@0.19.7":
+  version "0.19.7"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.19.7.tgz#614eafd08b0c50212f287b948b3c08d6e60f221f"
+  integrity sha512-JQ1p0SmUteNdUaaiRtyS59GkkfTW0Edo+e0O2sihnY4FoZLz5glpWUQEKMSzMhA430ctkylkS7+vn8ziuhUugQ==
+
 "@esbuild/linux-riscv64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz#6628389f210123d8b4743045af8caa7d4ddfc7a6"
   integrity sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==
 
+"@esbuild/linux-riscv64@0.19.7":
+  version "0.19.7"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.19.7.tgz#31d3b63f92f65968268a8e61ba59872538e80e88"
+  integrity sha512-xGwVJ7eGhkprY/nB7L7MXysHduqjpzUl40+XoYDGC4UPLbnG+gsyS1wQPJ9lFPcxYAaDXbdRXd1ACs9AE9lxuw==
+
 "@esbuild/linux-s390x@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz#255e81fb289b101026131858ab99fba63dcf0071"
   integrity sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==
 
+"@esbuild/linux-s390x@0.19.7":
+  version "0.19.7"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.19.7.tgz#be94974e0caa0783ae05f9477fd7170b9ac29cb0"
+  integrity sha512-U8Rhki5PVU0L0nvk+E8FjkV8r4Lh4hVEb9duR6Zl21eIEYEwXz8RScj4LZWA2i3V70V4UHVgiqMpszXvG0Yqhg==
+
 "@esbuild/linux-x64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz#c7690b3417af318a9b6f96df3031a8865176d338"
   integrity sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==
 
+"@esbuild/linux-x64@0.19.7":
+  version "0.19.7"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.19.7.tgz#84e8018a913dd4ecee954623e395984aef3d0007"
+  integrity sha512-ZYZopyLhm4mcoZXjFt25itRlocKlcazDVkB4AhioiL9hOWhDldU9n38g62fhOI4Pth6vp+Mrd5rFKxD0/S+7aQ==
+
 "@esbuild/netbsd-x64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz#30e8cd8a3dded63975e2df2438ca109601ebe0d1"
   integrity sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==
 
+"@esbuild/netbsd-x64@0.19.7":
+  version "0.19.7"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.19.7.tgz#98898ba8800374c9df9bb182ca4f69fcecaf4411"
+  integrity sha512-/yfjlsYmT1O3cum3J6cmGG16Fd5tqKMcg5D+sBYLaOQExheAJhqr8xOAEIuLo8JYkevmjM5zFD9rVs3VBcsjtQ==
+
 "@esbuild/openbsd-x64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz#7812af31b205055874c8082ea9cf9ab0da6217ae"
   integrity sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==
 
+"@esbuild/openbsd-x64@0.19.7":
+  version "0.19.7"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.19.7.tgz#46dc4eda2adb51f16361b1ad10e9b3f4938c4573"
+  integrity sha512-MYDFyV0EW1cTP46IgUJ38OnEY5TaXxjoDmwiTXPjezahQgZd+j3T55Ht8/Q9YXBM0+T9HJygrSRGV5QNF/YVDQ==
+
 "@esbuild/sunos-x64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz#d5c275c3b4e73c9b0ecd38d1ca62c020f887ab9d"
   integrity sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==
 
+"@esbuild/sunos-x64@0.19.7":
+  version "0.19.7"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.19.7.tgz#1650d40dd88412ecc11490119cd23cbaf661a591"
+  integrity sha512-JcPvgzf2NN/y6X3UUSqP6jSS06V0DZAV/8q0PjsZyGSXsIGcG110XsdmuWiHM+pno7/mJF6fjH5/vhUz/vA9fw==
+
 "@esbuild/win32-arm64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz#73bc7f5a9f8a77805f357fab97f290d0e4820ac9"
   integrity sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==
 
+"@esbuild/win32-arm64@0.19.7":
+  version "0.19.7"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.19.7.tgz#e61de6c4eb204d83fd912f3ae6812cc8c7d32d25"
+  integrity sha512-ZA0KSYti5w5toax5FpmfcAgu3ZNJxYSRm0AW/Dao5up0YV1hDVof1NvwLomjEN+3/GMtaWDI+CIyJOMTRSTdMw==
+
 "@esbuild/win32-ia32@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz#ec93cbf0ef1085cc12e71e0d661d20569ff42102"
   integrity sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==
 
+"@esbuild/win32-ia32@0.19.7":
+  version "0.19.7"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.19.7.tgz#3d9c159d42c67e37a433e44ef8217c661cb6f6d0"
+  integrity sha512-CTOnijBKc5Jpk6/W9hQMMvJnsSYRYgveN6O75DTACCY18RA2nqka8dTZR+x/JqXCRiKk84+5+bRKXUSbbwsS0A==
+
 "@esbuild/win32-x64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz#786c5f41f043b07afb1af37683d7c33668858f6d"
   integrity sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==
 
+"@esbuild/win32-x64@0.19.7":
+  version "0.19.7"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.19.7.tgz#02c4446f802706098d8e6ee70cf2b7aba96ded0b"
+  integrity sha512-gRaP2sk6hc98N734luX4VpF318l3w+ofrtTu9j5L8EQXF+FzQKV6alCOHMVoJJHvVK/mGbwBXfOL1HETQu9IGQ==
+
 "@eslint-community/eslint-utils@^4.2.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
@@ -2174,6 +2274,66 @@
     estree-walker "^2.0.2"
     picomatch "^2.3.1"
 
+"@rollup/rollup-android-arm-eabi@4.5.1":
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.5.1.tgz#11bea66c013e5a88a0f53f315b2d49cfd663584e"
+  integrity sha512-YaN43wTyEBaMqLDYeze+gQ4ZrW5RbTEGtT5o1GVDkhpdNcsLTnLRcLccvwy3E9wiDKWg9RIhuoy3JQKDRBfaZA==
+
+"@rollup/rollup-android-arm64@4.5.1":
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.5.1.tgz#cae505492204c018d1c6335f3b845319b15dc669"
+  integrity sha512-n1bX+LCGlQVuPlCofO0zOKe1b2XkFozAVRoczT+yxWZPGnkEAKTTYVOGZz8N4sKuBnKMxDbfhUsB1uwYdup/sw==
+
+"@rollup/rollup-darwin-arm64@4.5.1":
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.5.1.tgz#5442ca442fca1a166e41e03b983b2f3e3235c17c"
+  integrity sha512-QqJBumdvfBqBBmyGHlKxje+iowZwrHna7pokj/Go3dV1PJekSKfmjKrjKQ/e6ESTGhkfPNLq3VXdYLAc+UtAQw==
+
+"@rollup/rollup-darwin-x64@4.5.1":
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.5.1.tgz#e5140b0aaab0ea1424a4c8a1e76442105866290c"
+  integrity sha512-RrkDNkR/P5AEQSPkxQPmd2ri8WTjSl0RYmuFOiEABkEY/FSg0a4riihWQGKDJ4LnV9gigWZlTMx2DtFGzUrYQw==
+
+"@rollup/rollup-linux-arm-gnueabihf@4.5.1":
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.5.1.tgz#501a336b1dc4cb350a1b8b4e24bba4d049902d74"
+  integrity sha512-ZFPxvUZmE+fkB/8D9y/SWl/XaDzNSaxd1TJUSE27XAKlRpQ2VNce/86bGd9mEUgL3qrvjJ9XTGwoX0BrJkYK/A==
+
+"@rollup/rollup-linux-arm64-gnu@4.5.1":
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.5.1.tgz#bdb0c8552d167477d2624a4a6df0f71f128dc546"
+  integrity sha512-FEuAjzVIld5WVhu+M2OewLmjmbXWd3q7Zcx+Rwy4QObQCqfblriDMMS7p7+pwgjZoo9BLkP3wa9uglQXzsB9ww==
+
+"@rollup/rollup-linux-arm64-musl@4.5.1":
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.5.1.tgz#f7e8036c2f771bb366ca0d8c79d2132cffb1d295"
+  integrity sha512-f5Gs8WQixqGRtI0Iq/cMqvFYmgFzMinuJO24KRfnv7Ohi/HQclwrBCYkzQu1XfLEEt3DZyvveq9HWo4bLJf1Lw==
+
+"@rollup/rollup-linux-x64-gnu@4.5.1":
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.5.1.tgz#079ca543a649b1dcf9832a34dff94ebb46c96745"
+  integrity sha512-CWPkPGrFfN2vj3mw+S7A/4ZaU3rTV7AkXUr08W9lNP+UzOvKLVf34tWCqrKrfwQ0NTk5GFqUr2XGpeR2p6R4gw==
+
+"@rollup/rollup-linux-x64-musl@4.5.1":
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.5.1.tgz#9cc8c0ea1c0e0d3b18888d5b2fd51ef6c9b42481"
+  integrity sha512-ZRETMFA0uVukUC9u31Ed1nx++29073goCxZtmZARwk5aF/ltuENaeTtRVsSQzFlzdd4J6L3qUm+EW8cbGt0CKQ==
+
+"@rollup/rollup-win32-arm64-msvc@4.5.1":
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.5.1.tgz#df70597f6639549e79f0801004525d6a7a0075e4"
+  integrity sha512-ihqfNJNb2XtoZMSCPeoo0cYMgU04ksyFIoOw5S0JUVbOhafLot+KD82vpKXOurE2+9o/awrqIxku9MRR9hozHQ==
+
+"@rollup/rollup-win32-ia32-msvc@4.5.1":
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.5.1.tgz#6f9e8b30a4d6b5c564bfe55cdf44a5b493139838"
+  integrity sha512-zK9MRpC8946lQ9ypFn4gLpdwr5a01aQ/odiIJeL9EbgZDMgbZjjT/XzTqJvDfTmnE1kHdbG20sAeNlpc91/wbg==
+
+"@rollup/rollup-win32-x64-msvc@4.5.1":
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.5.1.tgz#0e79117bacb5817ff9a88ab19cb59df839638d6d"
+  integrity sha512-5I3Nz4Sb9TYOtkRwlH0ow+BhMH2vnh38tZ4J4mggE48M/YyJyp/0sPSxhw1UeS1+oBgQ8q7maFtSeKpeRJu41Q==
+
 "@rooks/use-did-update@^4.10.0":
   version "4.11.2"
   resolved "https://registry.yarnpkg.com/@rooks/use-did-update/-/use-did-update-4.11.2.tgz#7a499ff28e5419d29cc7d7fea32783021e426a77"
@@ -3943,7 +4103,7 @@ babel-plugin-polyfill-regenerator@^0.5.3:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.4.3"
 
-"babel-plugin-styled-components@>= 1.12.0", babel-plugin-styled-components@^2.1.4:
+babel-plugin-styled-components@^2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz#9a1f37c7f32ef927b4b008b529feb4a2c82b1092"
   integrity sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==
@@ -4618,7 +4778,7 @@ css-select@~1.2.0:
     domutils "1.5.1"
     nth-check "~1.0.1"
 
-css-to-react-native@^3.0.0, css-to-react-native@^3.2.0:
+css-to-react-native@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32"
   integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==
@@ -5020,9 +5180,9 @@ ejs@^3.1.6, ejs@^3.1.8:
     jake "^10.8.5"
 
 electron-to-chromium@^1.4.535:
-  version "1.4.577"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.577.tgz#a732f11cf4532be96e5e3f1197dcda54c2cec7ad"
-  integrity sha512-/5xHPH6f00SxhHw6052r+5S1xO7gHNc89hV7tqlvnStvKbSrDqc/u6AlwPvVWWNj+s4/KL6T6y8ih+nOY0qYNA==
+  version "1.4.578"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.578.tgz#7a3510f333bcd55e87882799ebeb7518d6ab4d95"
+  integrity sha512-V0ZhSu1BQZKfG0yNEL6Dadzik8E1vAzfpVOapdSiT9F6yapEJ3Bk+4tZ4SMPdWiUchCgnM/ByYtBzp5ntzDMIA==
 
 ellipsize@^0.5.1:
   version "0.5.1"
@@ -5252,7 +5412,7 @@ esbuild-register@^3.5.0:
   dependencies:
     debug "^4.3.4"
 
-esbuild@^0.18.0, esbuild@^0.18.10:
+esbuild@^0.18.0:
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.18.20.tgz#4709f5a34801b43b799ab7d6d82f7284a9b7a7a6"
   integrity sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==
@@ -5280,6 +5440,34 @@ esbuild@^0.18.0, esbuild@^0.18.10:
     "@esbuild/win32-ia32" "0.18.20"
     "@esbuild/win32-x64" "0.18.20"
 
+esbuild@^0.19.3:
+  version "0.19.7"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.19.7.tgz#b9a7235097b81278dcf090e2532ed13c95a2ee84"
+  integrity sha512-6brbTZVqxhqgbpqBR5MzErImcpA0SQdoKOkcWK/U30HtQxnokIpG3TX2r0IJqbFUzqLjhU/zC1S5ndgakObVCQ==
+  optionalDependencies:
+    "@esbuild/android-arm" "0.19.7"
+    "@esbuild/android-arm64" "0.19.7"
+    "@esbuild/android-x64" "0.19.7"
+    "@esbuild/darwin-arm64" "0.19.7"
+    "@esbuild/darwin-x64" "0.19.7"
+    "@esbuild/freebsd-arm64" "0.19.7"
+    "@esbuild/freebsd-x64" "0.19.7"
+    "@esbuild/linux-arm" "0.19.7"
+    "@esbuild/linux-arm64" "0.19.7"
+    "@esbuild/linux-ia32" "0.19.7"
+    "@esbuild/linux-loong64" "0.19.7"
+    "@esbuild/linux-mips64el" "0.19.7"
+    "@esbuild/linux-ppc64" "0.19.7"
+    "@esbuild/linux-riscv64" "0.19.7"
+    "@esbuild/linux-s390x" "0.19.7"
+    "@esbuild/linux-x64" "0.19.7"
+    "@esbuild/netbsd-x64" "0.19.7"
+    "@esbuild/openbsd-x64" "0.19.7"
+    "@esbuild/sunos-x64" "0.19.7"
+    "@esbuild/win32-arm64" "0.19.7"
+    "@esbuild/win32-ia32" "0.19.7"
+    "@esbuild/win32-x64" "0.19.7"
+
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
@@ -5940,7 +6128,7 @@ fscreen@^1.0.2:
   resolved "https://registry.yarnpkg.com/fscreen/-/fscreen-1.2.0.tgz#1a8c88e06bc16a07b473ad96196fb06d6657f59e"
   integrity sha512-hlq4+BU0hlPmwsFjwGGzZ+OZ9N/wq9Ljg/sq3pX+2CD7hrJsX9tJgWWK/wiNTFM212CLHWhicOoqwXyZGGetJg==
 
-fsevents@^2.3.2, fsevents@~2.3.2:
+fsevents@^2.3.2, fsevents@~2.3.2, fsevents@~2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
   integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
@@ -6232,7 +6420,7 @@ history@^5.3.0:
   dependencies:
     "@babel/runtime" "^7.7.6"
 
-hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1:
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -6355,6 +6543,11 @@ ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
   integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
 
+immer@^10.0.3:
+  version "10.0.3"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-10.0.3.tgz#a8de42065e964aa3edf6afc282dfc7f7f34ae3c9"
+  integrity sha512-pwupu3eWfouuaowscykeckFmVTpqbzW+rXFCX8rQLkZzM9ftBmU/++Ra+o+L27mz03zJTlyV4UUr+fdKNffo4A==
+
 immutable@^4.0.0, immutable@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.4.tgz#2e07b33837b4bb7662f288c244d1ced1ef65a78f"
@@ -8336,7 +8529,7 @@ postcss-value-parser@^4.0.2:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.4.27, postcss@^8.4.31:
+postcss@^8.4.31:
   version "8.4.31"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
   integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
@@ -8785,7 +8978,7 @@ react-select-async-paginate@^0.7.2:
     sleep-promise "^9.1.0"
     use-is-mounted-ref "^1.5.0"
 
-react-select@^5.3.2:
+react-select@^5.8.0:
   version "5.8.0"
   resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.8.0.tgz#bd5c467a4df223f079dd720be9498076a3f085b5"
   integrity sha512-TfjLDo58XrhP6VG5M/Mi56Us0Yt8X7xD6cDybC7yoRMUNm7BGO7qk8J0TLQOua/prb8vUOtsfnXZwfm30HGsAA==
@@ -9150,13 +9343,32 @@ rimraf@~2.6.2:
   dependencies:
     glob "^7.1.3"
 
-"rollup@^2.25.0 || ^3.3.0", rollup@^3.27.1:
+"rollup@^2.25.0 || ^3.3.0":
   version "3.29.4"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.29.4.tgz#4d70c0f9834146df8705bfb69a9a19c9e1109981"
   integrity sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==
   optionalDependencies:
     fsevents "~2.3.2"
 
+rollup@^4.2.0:
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.5.1.tgz#95661ead5373d46e1c91b38fc1549bc59fc72aa4"
+  integrity sha512-0EQribZoPKpb5z1NW/QYm3XSR//Xr8BeEXU49Lc/mQmpmVVG5jPUVrpc2iptup/0WMrY9mzas0fxH+TjYvG2CA==
+  optionalDependencies:
+    "@rollup/rollup-android-arm-eabi" "4.5.1"
+    "@rollup/rollup-android-arm64" "4.5.1"
+    "@rollup/rollup-darwin-arm64" "4.5.1"
+    "@rollup/rollup-darwin-x64" "4.5.1"
+    "@rollup/rollup-linux-arm-gnueabihf" "4.5.1"
+    "@rollup/rollup-linux-arm64-gnu" "4.5.1"
+    "@rollup/rollup-linux-arm64-musl" "4.5.1"
+    "@rollup/rollup-linux-x64-gnu" "4.5.1"
+    "@rollup/rollup-linux-x64-musl" "4.5.1"
+    "@rollup/rollup-win32-arm64-msvc" "4.5.1"
+    "@rollup/rollup-win32-ia32-msvc" "4.5.1"
+    "@rollup/rollup-win32-x64-msvc" "4.5.1"
+    fsevents "~2.3.2"
+
 run-parallel@^1.1.9:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
@@ -9198,7 +9410,7 @@ safe-regex-test@^1.0.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-sass@^1.66.1:
+sass@^1.69.5:
   version "1.69.5"
   resolved "https://registry.yarnpkg.com/sass/-/sass-1.69.5.tgz#23e18d1c757a35f2e52cc81871060b9ad653dfde"
   integrity sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==
@@ -9511,6 +9723,7 @@ string-length@^4.0.1:
     strip-ansi "^6.0.0"
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -9585,6 +9798,7 @@ string_decoder@~1.1.1:
     safe-buffer "~5.1.0"
 
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  name strip-ansi-cjs
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -9625,23 +9839,7 @@ strip-json-comments@^3.0.1, strip-json-comments@^3.1.0, strip-json-comments@^3.1
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
-styled-components@^5:
-  version "5.3.11"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.11.tgz#9fda7bf1108e39bf3f3e612fcc18170dedcd57a8"
-  integrity sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/traverse" "^7.4.5"
-    "@emotion/is-prop-valid" "^1.1.0"
-    "@emotion/stylis" "^0.8.4"
-    "@emotion/unitless" "^0.7.4"
-    babel-plugin-styled-components ">= 1.12.0"
-    css-to-react-native "^3.0.0"
-    hoist-non-react-statics "^3.0.0"
-    shallowequal "^1.1.0"
-    supports-color "^5.5.0"
-
-styled-components@^6.0.7:
+styled-components@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.0.tgz#228e3ab9c1ee1daa4b0a06aae30df0ed14fda274"
   integrity sha512-VWNfYYBuXzuLS/QYEeoPgMErP26WL+dX9//rEh80B2mmlS1yRxRxuL5eax4m6ybYEUoHWlTy2XOU32767mlMkg==
@@ -10271,16 +10469,16 @@ vite-plugin-html@^3.2.0:
     node-html-parser "^5.3.3"
     pathe "^0.2.0"
 
-vite@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-4.5.0.tgz#ec406295b4167ac3bc23e26f9c8ff559287cff26"
-  integrity sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==
+vite@^5.0.0:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-5.0.2.tgz#3c94627dace83b9bf04b64eaf618038e30fb95c0"
+  integrity sha512-6CCq1CAJCNM1ya2ZZA7+jS2KgnhbzvxakmlIjN24cF/PXhRMzpM/z8QgsVJA/Dm5fWUWnVEsmtBoMhmerPxT0g==
   dependencies:
-    esbuild "^0.18.10"
-    postcss "^8.4.27"
-    rollup "^3.27.1"
+    esbuild "^0.19.3"
+    postcss "^8.4.31"
+    rollup "^4.2.0"
   optionalDependencies:
-    fsevents "~2.3.2"
+    fsevents "~2.3.3"
 
 voca@^1.4.0:
   version "1.4.1"
@@ -10414,6 +10612,7 @@ wordwrap@^1.0.0:
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  name wrap-ansi-cjs
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==