Dark mode refactor (#98)

* 🏗️ Acquisition Panel refactor WIP

* 🔧 Formatted the search query box

* 🔧 Implementing download method

* 🏗️ Refactored the AirDC++ download panel

* 🌜 Initial Dark Mode support

* 🌜 Trying dark mode on the react-select

* Update App.scss

* 🏗️ Migrating Navbar to TailwindCSS

* 🖼️ Added solar icons

* 🔧 Added solar icons

* 🔧 Added code for dark mode toggle

* 🏗️ Wiring up the dark mode toggle

* 🌜 Added Dark mode to the body

* 🏗️ Building out the import page

* 🪑 Cleaning up the table styles

* 🏗️ Cleaned up past imports table

* 🏗️ Refactored Import socket events

* 🏗️ Refactored the card grid on dashboard

* 🏗️ Building variants for Cards

* 🏗️ Added a horizontal medium variant

* 🏗️ Cleaning up forms and cards

* 🔧 Styling form inputs

* 🏗️ Form refactor

* 🔠 Added a monospace font

* 🪑 Refactoring the table

* 🧹 Formatting in connection confirmation panels

* 🏗️ Refactoring table for library

* 🏗️ Added icons and details to metadata

* 🏗️ Cleaned the table further

* 🏗️ Fixed fonts, and comic detail page first draft

* ❌ Removing yarn.lockfile

src/client/store/index.ts

@@ -5,6 +5,7 @@ import { SOCKET_BASE_URI } from "../constants/endpoints";
 import { produce } from "immer";
 import AirDCPPSocket from "../services/DcppSearchService";
 import axios from "axios";
+import { QueryClient } from "@tanstack/react-query";
 
 /*  Broadly, this file sets up:
  *    1. The zustand-based global client state
@@ -23,6 +24,7 @@ export const useStore = create((set, get) => ({
       airDCPPSocketConnected: value,
     })),
   airDCPPDownloadTick: {},
+  airDCPPTransfers: {},
   // Socket.io state
   socketIOInstance: {},
 
@@ -68,6 +70,7 @@ export const useStore = create((set, get) => ({
 }));
 
 const { getState, setState } = useStore;
+const queryClient = new QueryClient();
 
 /** Socket.IO initialization **/
 // 1. Fetch sessionId from localStorage
@@ -114,6 +117,42 @@ socketIOInstance.on("RESTORE_JOB_COUNTS_AFTER_SESSION_RESTORATION", (data) => {
   }));
 });
 
+// 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;
+  setState((state) => ({
+    importJobQueue: {
+      ...state.importJobQueue,
+      successfulJobCount: completedJobCount,
+      mostRecentImport: importResult.rawFileDetails.name,
+    },
+  }));
+});
+socketIOInstance.on("LS_COVER_EXTRACTION_FAILED", (data) => {
+  const { failedJobCount } = data;
+  setState((state) => ({
+    importJobQueue: {
+      ...state.importJobQueue,
+      failedJobCount,
+    },
+  }));
+});
+
+// 1b.  Clear the localStorage sessionId upon receiving the
+//      LS_IMPORT_QUEUE_DRAINED event
+socketIOInstance.on("LS_IMPORT_QUEUE_DRAINED", (data) => {
+  localStorage.removeItem("sessionId");
+  setState((state) => ({
+    importJobQueue: {
+      ...state.importJobQueue,
+      status: "drained",
+    },
+  }));
+  console.log("a", queryClient);
+  queryClient.invalidateQueries({ queryKey: ["allImportJobResults"] });
+});
+
 /**
  * Method to init AirDC++ Socket with supplied settings
  * @param configuration - credentials, and hostname details to init AirDC++ connection