diff --git a/src/client/components/Import/Import.tsx b/src/client/components/Import/Import.tsx index 1c52b25..592ce83 100644 --- a/src/client/components/Import/Import.tsx +++ b/src/client/components/Import/Import.tsx @@ -53,25 +53,6 @@ export const Import = (props: IProps): ReactElement => { }), }); - // 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", @@ -94,29 +75,35 @@ export const Import = (props: IProps): ReactElement => { switch (status) { case "running": return ( -
+
); case "paused": return ( -
+
); @@ -132,7 +119,7 @@ export const Import = (props: IProps): ReactElement => {
-
+

@@ -143,25 +130,16 @@ export const Import = (props: IProps): ReactElement => { Import comics into the ThreeTwo library.

- -
- -
-
+
-
+

Importing will add comics identified from the mapped folder into ThreeTwo's database. @@ -195,78 +173,73 @@ export const Import = (props: IProps): ReactElement => { Start Import

*/} -
- +
+ {importJobQueue.status === "drained" || + (importJobQueue.status === undefined && ( + + ))}
- {importJobQueue.status !== "drained" && - !isUndefined(importJobQueue.status) && ( -
- - - - - - - - - + {/* Activity */} + {(importJobQueue.status === "running" || + importJobQueue.status === "paused") && ( + <> + + + Import Activity + + + +
+
+ {/* Successful import counts */} +
+
+ {importJobQueue.successfulJobCount} +
+
+ imported +
+
+ {/* Failed job counts */} +
+
+ {importJobQueue.failedJobCount} +
+
+ failed +
+
-
- - - - - - - - -
Completed JobsFailed JobsQueue ControlsQueue Status
- {importJobQueue.successfulJobCount > 0 && ( -
- - {importJobQueue.successfulJobCount} - -
- )} - 		- {importJobQueue.failedJobCount > 0 && ( -
- - {importJobQueue.failedJobCount} - -
- )} - 		{renderQueueControls(importJobQueue.status)} - {importJobQueue.status !== undefined ? ( - - {importJobQueue.status} - - ) : null} -
- Imported{" "} - - {importJobQueue.mostRecentImport} +
+
{renderQueueControls(importJobQueue.status)}
+
+ +
+
+ + Imported: {importJobQueue.mostRecentImport}
- )} + + )} {/* Past imports */} {!isLoading && !isEmpty(data?.data) && (
- + Past Imports diff --git a/src/client/components/shared/Navbar2.tsx b/src/client/components/shared/Navbar2.tsx index 9c1936c..95ad9db 100644 --- a/src/client/components/shared/Navbar2.tsx +++ b/src/client/components/shared/Navbar2.tsx @@ -76,15 +76,15 @@ export const Navbar2 = (): ReactElement => {
    {/* Settings Icon and text */}
  • - Settings - +
  • diff --git a/src/client/store/index.ts b/src/client/store/index.ts index eb5b5c1..bc836c3 100644 --- a/src/client/store/index.ts +++ b/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 @@ -69,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 @@ -115,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