🏗️ Added import queue related state

src/client/components/App.tsx

@@ -22,13 +22,6 @@ import {
   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

src/client/components/Import/Import.tsx

@@ -40,16 +40,7 @@ export const Import = (props: IProps): ReactElement => {
       socketIOInstance: state.socketIOInstance,
     })),
   );
-  //   const successfulImportJobCount = useSelector(
+
-  //     (state: RootState) => state.fileOps.successfulJobCount,
-  //   );
-  //   const failedImportJobCount = useSelector(
-  //     (state: RootState) => state.fileOps.failedJobCount,
-  //   );
-  //
-  //   const lastQueueJob = useSelector(
-  //     (state: RootState) => state.fileOps.lastQueueJob,
-  //   );
   //   const libraryQueueImportStatus = useSelector(
   //     (state: RootState) => state.fileOps.LSQueueImportStatus,
   //   );
@@ -68,17 +59,23 @@ export const Import = (props: IProps): ReactElement => {
       }),
   });
 
-  // Act on each comic issue successfully imported, as indicated
+  // 1a.  Act on each comic issue successfully imported/failed, as indicated
-  // by the LS_COVER_EXTRACTED event
+  //      by the LS_COVER_EXTRACTED/LS_COVER_EXTRACTION_FAILED events
   socketIOInstance.on("LS_COVER_EXTRACTED", (data) => {
-    const { completedJobCount } = data;
+    const { completedJobCount, importResult } = data;
     importJobQueue.setJobCount("successful", completedJobCount);
+    importJobQueue.setMostRecentImport(importResult.rawFileDetails.name);
   });
   socketIOInstance.on("LS_COVER_EXTRACTION_FAILED", (data) => {
-    console.log(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");
+  });
   const toggleQueue = useCallback(
     (queueAction: string, queueStatus: string) => {
       // dispatch(setQueueControl(queueAction, queueStatus));
@@ -205,7 +202,9 @@ 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 */}

src/client/components/shared/Navbar.tsx

@@ -56,7 +56,7 @@ const Navbar: React.FunctionComponent = (props) => {
   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"

src/client/index.tsx

@@ -10,6 +10,7 @@ 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";
 
 const queryClient = new QueryClient();
 
@@ -19,6 +20,7 @@ const router = createBrowserRouter([
     element: <App />,
     errorElement: <ErrorPage />,
     children: [
+      { path: "dashboard", element: <Dashboard /> },
       { path: "settings", element: <Settings /> },
       { path: "import", element: <Import path={"./comics"} /> },
     ],

src/client/store/index.ts

@@ -21,7 +21,7 @@ export const useStore = create((set, get) => ({
   // Socket.io state
   socketIOInstance: {},
 
-  // Import job results
+  // Import job queue and associated statuses
   importJobQueue: {
     successfulJobCount: 0,
     failedJobCount: 0,
@@ -44,6 +44,14 @@ export const useStore = create((set, get) => ({
           break;
       }
     },
+    mostRecentImport: null,
+    setMostRecentImport: (fileName: string) => {
+      set(
+        produce((state) => {
+          state.importJobQueue.mostRecentImport = fileName;
+        }),
+      );
+    },
   },
 }));
 
@@ -67,7 +75,7 @@ if (!isNil(sessionId)) {
     "call",
     "socket.resumeSession",
     {
-      session: { sessionId },
+      sessionId,
     },
     (data) => console.log(data),
   );