diff --git a/package.json b/package.json index 9b07795..2884c85 100644 --- a/package.json +++ b/package.json @@ -20,8 +20,8 @@ "@dnd-kit/utilities": "^3.2.1", "@fortawesome/fontawesome-free": "^6.3.0", "@redux-devtools/extension": "^3.2.5", - "@reduxjs/toolkit": "^1.9.7", "@rollup/plugin-node-resolve": "^15.0.1", + "@tanstack/react-query": "^5.0.5", "@tanstack/react-table": "^8.9.3", "@types/mime-types": "^2.1.0", "@types/react-router-dom": "^5.3.3", @@ -56,7 +56,6 @@ "react-loader-spinner": "^4.0.0", "react-masonry-css": "^1.0.16", "react-modal": "^3.15.1", - "react-redux": "^8.0.5", "react-router": "^6.9.0", "react-router-dom": "^6.9.0", "react-select": "^5.3.2", @@ -66,9 +65,6 @@ "react-stickynode": "^4.1.0", "react-textarea-autosize": "^8.3.4", "reapop": "^4.2.1", - "redux-first-history": "^5.1.1", - "redux-socket.io-middleware": "^1.0.4", - "redux-thunk": "^2.4.2", "slick-carousel": "^1.8.1", "socket.io-client": "^4.3.2", "styled-components": "^6.0.7", @@ -86,6 +82,8 @@ "@storybook/react": "^7.4.1", "@storybook/react-vite": "^7.4.1", "@storybook/testing-library": "^0.2.0", + "@tanstack/eslint-plugin-query": "^5.0.5", + "@tanstack/react-query-devtools": "^5.1.0", "@tsconfig/node14": "^1.0.0", "@types/ellipsize": "^0.1.1", "@types/express": "^4.17.8", diff --git a/src/client/components/App.tsx b/src/client/components/App.tsx index 529c59a..967ca75 100644 --- a/src/client/components/App.tsx +++ b/src/client/components/App.tsx @@ -23,7 +23,11 @@ import { AIRDCPP_DOWNLOAD_PROGRESS_TICK, LS_SINGLE_IMPORT, } from "../constants/action-types"; -import { useDispatch, useSelector } from "react-redux"; + +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; + +const queryClient = new QueryClient({}); /** * Method that initializes an AirDC++ socket connection @@ -32,128 +36,93 @@ import { useDispatch, useSelector } from "react-redux"; * @returns void */ const AirDCPPSocketComponent = (): ReactElement => { - const airDCPPConfiguration = useContext(AirDCPPSocketContext); - const dispatch = useDispatch(); - - useEffect(() => { - const initializeAirDCPPEventListeners = async () => { - if ( - !isUndefined(airDCPPConfiguration.airDCPPState) && - !isEmpty(airDCPPConfiguration.airDCPPState.settings) && - !isEmpty(airDCPPConfiguration.airDCPPState.socket) - ) { - await airDCPPConfiguration.airDCPPState.socket.addListener( - "queue", - "queue_bundle_added", - async (data) => { - console.log("JEMEN:", data); - }, - ); - // download tick listener - await airDCPPConfiguration.airDCPPState.socket.addListener( - `queue`, - "queue_bundle_tick", - async (downloadProgressData) => { - dispatch({ - type: AIRDCPP_DOWNLOAD_PROGRESS_TICK, - downloadProgressData, - }); - }, - ); - // download complete listener - await airDCPPConfiguration.airDCPPState.socket.addListener( - `queue`, - "queue_bundle_status", - async (bundleData) => { - let count = 0; - if (bundleData.status.completed && bundleData.status.downloaded) { - // dispatch the action for raw import, with the metadata - if (count < 1) { - console.log(`[AirDCPP]: Download complete.`); - dispatch({ - type: LS_SINGLE_IMPORT, - meta: { remote: true }, - data: bundleData, - }); - count += 1; - } - } - }, - ); - console.log( - "[AirDCPP]: Listener registered - listening to queue bundle download ticks", - ); - console.log( - "[AirDCPP]: Listener registered - listening to queue bundle changes", - ); - console.log( - "[AirDCPP]: Listener registered - listening to transfer completion", - ); - } - }; - initializeAirDCPPEventListeners(); - }, [airDCPPConfiguration]); + // const airDCPPConfiguration = useContext(AirDCPPSocketContext); + // const dispatch = useDispatch(); + // + // useEffect(() => { + // const initializeAirDCPPEventListeners = async () => { + // if ( + // !isUndefined(airDCPPConfiguration.airDCPPState) && + // !isEmpty(airDCPPConfiguration.airDCPPState.settings) && + // !isEmpty(airDCPPConfiguration.airDCPPState.socket) + // ) { + // await airDCPPConfiguration.airDCPPState.socket.addListener( + // "queue", + // "queue_bundle_added", + // async (data) => { + // console.log("JEMEN:", data); + // }, + // ); + // // download tick listener + // await airDCPPConfiguration.airDCPPState.socket.addListener( + // `queue`, + // "queue_bundle_tick", + // async (downloadProgressData) => { + // dispatch({ + // type: AIRDCPP_DOWNLOAD_PROGRESS_TICK, + // downloadProgressData, + // }); + // }, + // ); + // // download complete listener + // await airDCPPConfiguration.airDCPPState.socket.addListener( + // `queue`, + // "queue_bundle_status", + // async (bundleData) => { + // let count = 0; + // if (bundleData.status.completed && bundleData.status.downloaded) { + // // dispatch the action for raw import, with the metadata + // if (count < 1) { + // console.log(`[AirDCPP]: Download complete.`); + // dispatch({ + // type: LS_SINGLE_IMPORT, + // meta: { remote: true }, + // data: bundleData, + // }); + // count += 1; + // } + // } + // }, + // ); + // console.log( + // "[AirDCPP]: Listener registered - listening to queue bundle download ticks", + // ); + // console.log( + // "[AirDCPP]: Listener registered - listening to queue bundle changes", + // ); + // console.log( + // "[AirDCPP]: Listener registered - listening to transfer completion", + // ); + // } + // }; + // initializeAirDCPPEventListeners(); + // }, [airDCPPConfiguration]); return <>; }; export const App = (): ReactElement => { - const dispatch = useDispatch(); - useEffect(() => { - // Check if there is a sessionId in localStorage - const sessionId = localStorage.getItem("sessionId"); - if (!isNil(sessionId)) { - // Resume the session - dispatch({ - type: "RESUME_SESSION", - meta: { remote: true }, - session: { sessionId }, - }); - } else { - // Inititalize the session and persist the sessionId to localStorage - socketIOConnectionInstance.on("sessionInitialized", (sessionId) => { - localStorage.setItem("sessionId", sessionId); - }); - } - }, []); + // useEffect(() => { + // // Check if there is a sessionId in localStorage + // const sessionId = localStorage.getItem("sessionId"); + // if (!isNil(sessionId)) { + // // Resume the session + // dispatch({ + // type: "RESUME_SESSION", + // meta: { remote: true }, + // session: { sessionId }, + // }); + // } else { + // // Inititalize the session and persist the sessionId to localStorage + // socketIOConnectionInstance.on("sessionInitialized", (sessionId) => { + // localStorage.setItem("sessionId", sessionId); + // }); + // } + // }, []); return ( - - -
- - - } /> - } /> - } - /> - } /> - } /> - } /> - } - /> - } - /> - } /> - } - /> - } - /> - } - /> - -
- - + + {/* The rest of your application */} + + {/* */}; + ); }; diff --git a/src/client/components/Dashboard/Dashboard.tsx b/src/client/components/Dashboard/Dashboard.tsx index 601f966..7b41f0d 100644 --- a/src/client/components/Dashboard/Dashboard.tsx +++ b/src/client/components/Dashboard/Dashboard.tsx @@ -15,7 +15,6 @@ import { isEmpty, isNil } from "lodash"; import Header from "../shared/Header"; export const Dashboard = (): ReactElement => { - const dispatch = useDispatch(); // useEffect(() => { // dispatch(fetchVolumeGroups()); // dispatch( diff --git a/src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx b/src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx index dce90cc..9a0abe2 100644 --- a/src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx +++ b/src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx @@ -1,13 +1,10 @@ import React, { ReactElement, useCallback } from "react"; import { saveSettings } from "../../../actions/settings.actions"; import { ConnectionForm } from "../../shared/ConnectionForm/ConnectionForm"; -import { useConnectToQBittorrentClientQuery } from "../../../services/torrents.api"; export const QbittorrentConnectionForm = (): ReactElement => { - const { data, isLoading } = useConnectToQBittorrentClientQuery({}); const onSubmit = useCallback(async (values) => { try { - dispatch(saveSettings(values, "bittorrent")); } catch (error) { console.log(error); } @@ -15,13 +12,11 @@ export const QbittorrentConnectionForm = (): ReactElement => { return ( <> - {!isLoading && ( - - )} + 
{JSON.stringify(data?.qbittorrentClientInfo, null, 2)}
); diff --git a/src/client/components/Settings/Settings.tsx b/src/client/components/Settings/Settings.tsx index 6849494..ead14a1 100644 --- a/src/client/components/Settings/Settings.tsx +++ b/src/client/components/Settings/Settings.tsx @@ -7,22 +7,18 @@ import { ServiceStatuses } from "../ServiceStatuses/ServiceStatuses"; import settingsObject from "../../constants/settings/settingsMenu.json"; import { isUndefined, map } from "lodash"; -interface ISettingsProps { } +interface ISettingsProps {} export const Settings = (props: ISettingsProps): ReactElement => { const [active, setActive] = useState("gen-db"); const settingsContent = [ { id: "adc-hubs", - content:
{}
, + content:
{/* */}
, }, { id: "adc-connection", - content: ( -
- -
- ), + content:
{/* */}
, }, { id: "qbt-connection", @@ -34,15 +30,11 @@ export const Settings = (props: ISettingsProps): ReactElement => { }, { id: "core-service", - content: , + content: <>a, }, { id: "flushdb", - content: ( -
- -
- ), + content:
{/* */}
, }, ]; return ( diff --git a/src/client/components/shared/Navbar.tsx b/src/client/components/shared/Navbar.tsx index 9c6792e..f512a61 100644 --- a/src/client/components/shared/Navbar.tsx +++ b/src/client/components/shared/Navbar.tsx @@ -2,46 +2,10 @@ import React, { useContext } from "react"; import { SearchBar } from "../GlobalSearchBar/SearchBar"; import { DownloadProgressTick } from "../ComicDetail/DownloadProgressTick"; import { Link } from "react-router-dom"; -import { useSelector } from "react-redux"; import { isUndefined } from "lodash"; import { format, fromUnixTime } from "date-fns"; const Navbar: React.FunctionComponent = (props) => { - const downloadProgressTick = useSelector( - (state: RootState) => state.airdcpp.downloadProgressData, - ); - - const airDCPPSocketConnectionStatus = useSelector( - (state: RootState) => state.airdcpp.isAirDCPPSocketConnected, - ); - const airDCPPSessionInfo = useSelector( - (state: RootState) => state.airdcpp.airDCPPSessionInfo, - ); - const qBittorrentConnectionInfo = useSelector( - (state: RootState) => state.settings.data, - ); - const socketDisconnectionReason = useSelector( - (state: RootState) => state.airdcpp.socketDisconnectionReason, - ); - - // Import-related selector hooks - 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, - ); return (