🧸 Zustand and Tanstack Query (#96)

* ↪️ Removed node-sass, added sass

* 🏗️ Refactoring Navbar to read from zustand store

* ⬆️ Bumped deps

* 🏗️ Refactored AirDC++ session status indicator

* 🏗️ Refactored Import page to read from global state

* 🏗 Wired up the event emit correctly

* 🏗️ Added import queue related state

* 🏗 Implemented setQueueAction

* 🏗️ Wired up job queue control methods

* 🏗️ Added null check and removed useless deps

* 🏗️ Refactored the Import page

* ↪️ Added cache invalidation to job statistics query

* 🏗️ Refactoring the Library page

* 🏗️ Fixed pagination and disabled states

* ✏️ Changed page to offset

To better reflect what we are doing with the pagination controls

* 🏗️ Refactoring ComicDetail page and its children

* 🏗️ Refactored ComicDetailContainer with useQuery

* 🔧 Fixed the error check on Library page

* 🏗️ Refactoring AcquisitionPanel

* 🏗️ Refactoring the AirDC++ Forms

* 🦃 Thanksgiving Day bug fixes

* ⬆️ Bumped up Vite to 5.0

* 🔧 Refactoring AcquisitionPanel

* 🏗️ Wiring up the DC++ search method

* 🏗️ Refactoring AirDC++ search method

* 🔎 Added some validation to ADC++ Hubs settings form

* 🏗️ Fixed the ADC++ search results

* 🏗️ Cleanup of the search results pane

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}