From 214f29f9a80ea714ffc1566fef34f489b7471b20 Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Thu, 9 Nov 2023 10:21:20 -0600 Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=97=EF=B8=8F=20Refactored=20Import=20p?= =?UTF-8?q?age=20to=20read=20from=20global=20state?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/client/components/Import/Import.tsx | 160 ++++++++++-------- src/client/components/Settings/Settings.tsx | 6 +- .../SystemSettings/SystemSettingsForm.tsx | 27 ++- src/client/components/shared/Navbar.tsx | 4 - src/client/context/AirDCPPSocket.tsx | 108 ------------ src/client/index.tsx | 6 +- src/client/store/index.ts | 43 ++++- yarn.lock | 8 + 9 files changed, 163 insertions(+), 200 deletions(-) delete mode 100644 src/client/context/AirDCPPSocket.tsx diff --git a/package.json b/package.json index a1229b8..f6d81bb 100644 --- a/package.json +++ b/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", diff --git a/src/client/components/Import/Import.tsx b/src/client/components/Import/Import.tsx index d961df6..7a9d4fd 100644 --- a/src/client/components/Import/Import.tsx +++ b/src/client/components/Import/Import.tsx @@ -1,5 +1,4 @@ import React, { ReactElement, useCallback, useEffect } from "react"; -import { useSelector, useDispatch } from "react-redux"; import { fetchComicBookMetadata, getImportJobResultStatistics, @@ -9,6 +8,10 @@ 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 } from "@tanstack/react-query"; +import { useStore } from "../../store"; +import { useShallow } from "zustand/react/shallow"; +import axios from "axios"; interface IProps { matches?: unknown; @@ -31,41 +34,62 @@ 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 { importJobQueue, socketIOInstance } = useStore( + useShallow((state) => ({ + importJobQueue: state.importJobQueue, + 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, + // ); + // + // const allImportJobResults = useSelector( + // (state: RootState) => state.fileOps.importJobStatistics, + // ); - const lastQueueJob = useSelector( - (state: RootState) => state.fileOps.lastQueueJob, - ); - const libraryQueueImportStatus = useSelector( - (state: RootState) => state.fileOps.LSQueueImportStatus, - ); - - const allImportJobResults = useSelector( - (state: RootState) => state.fileOps.importJobStatistics, - ); - - const initiateImport = useCallback(() => { - if (typeof props.path !== "undefined") { - dispatch(fetchComicBookMetadata(props.path)); - } - }, [dispatch]); + 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 }, + }), + }); + // Act on each comic issue successfully imported, as indicated + // by the LS_COVER_EXTRACTED event + socketIOInstance.on("LS_COVER_EXTRACTED", (data) => { + const { completedJobCount } = data; + importJobQueue.setJobCount("successful", completedJobCount); + }); + socketIOInstance.on("LS_COVER_EXTRACTION_FAILED", (data) => { + console.log(data); + const { failedJobCount } = data; + importJobQueue.setJobCount("failed", failedJobCount); + }); const toggleQueue = useCallback( (queueAction: string, queueStatus: string) => { - dispatch(setQueueControl(queueAction, queueStatus)); + // dispatch(setQueueControl(queueAction, queueStatus)); }, [], ); useEffect(() => { - dispatch(getImportJobResultStatistics()); + // dispatch(getImportJobResultStatistics()); }, []); + const libraryQueueImportStatus = undefined; const renderQueueControls = (status: string): ReactElement | null => { switch (status) { case "running": @@ -128,7 +152,7 @@ export const Import = (props: IProps): ReactElement => { ? "button is-medium" : "button is-loading is-medium" } - onClick={initiateImport} + onClick={() => initiateImport()} > @@ -136,60 +160,58 @@ export const Import = (props: IProps): ReactElement => { Start Import

- {libraryQueueImportStatus !== "drained" && - !isUndefined(libraryQueueImportStatus) && ( - <> - - - - - - - - - - - - - + <> +
Completed JobsFailed JobsQueue ControlsQueue Status
- {successfulImportJobCount > 0 && ( -
- - {successfulImportJobCount} - -
- )} - 		- {failedImportJobCount > 0 && ( -
- - {failedImportJobCount} - -
- )} -
+ + + + + + + + - + + + + + + {/* - - -
Completed JobsFailed JobsQueue ControlsQueue Status
{renderQueueControls(libraryQueueImportStatus)}
+ {importJobQueue.successfulJobCount > 0 && ( +
+ + {importJobQueue.successfulJobCount} + +
+ )} + 		+ {importJobQueue.failedJobCount > 0 && ( +
+ + {importJobQueue.failedJobCount} + +
+ )} + 		{renderQueueControls(libraryQueueImportStatus)} {libraryQueueImportStatus !== undefined ? ( {libraryQueueImportStatus} ) : null} -
- Imported{" "} - {lastQueueJob} - - )} + */} + + + + Imported{" "} + {/* {lastQueueJob} */} + {/* Past imports */}

Past Imports

- + {/*
@@ -228,7 +250,7 @@ export const Import = (props: IProps): ReactElement => { ); })} -
Time Started
+ */} ); diff --git a/src/client/components/Settings/Settings.tsx b/src/client/components/Settings/Settings.tsx index 06c0f85..7821155 100644 --- a/src/client/components/Settings/Settings.tsx +++ b/src/client/components/Settings/Settings.tsx @@ -38,7 +38,11 @@ export const Settings = (props: ISettingsProps): ReactElement => { }, { id: "flushdb", - content:
{/* */}
, + content: ( +
+ +
+ ), }, ]; return ( diff --git a/src/client/components/Settings/SystemSettings/SystemSettingsForm.tsx b/src/client/components/Settings/SystemSettings/SystemSettingsForm.tsx index d19c9e5..68e41aa 100644 --- a/src/client/components/Settings/SystemSettings/SystemSettingsForm.tsx +++ b/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 (
@@ -48,11 +49,9 @@ export const SystemSettingsForm = (): ReactElement => {