From a73250d99c50ae25565979f48540f8d0f6b0c7a3 Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Thu, 9 Jun 2022 00:55:39 -0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=97=20Refactoring=20AirDCPPSocket=20in?= =?UTF-8?q?it=20and=20download=20handling?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/actions/airdcpp.actions.tsx | 1 - src/client/assets/scss/App.scss | 5 ++ src/client/components/App.tsx | 34 ++++++++--- .../ComicDetail/AcquisitionPanel.tsx | 57 ++++++++----------- .../ComicDetail/ComicDetailContainer.tsx | 22 +------ .../ComicDetail/DownloadProgressTick.tsx | 35 ++++++++++++ .../components/ComicDetail/DownloadsPanel.tsx | 52 ----------------- .../Dashboard/LibraryStatistics.tsx | 2 +- src/client/components/Navbar.tsx | 23 +++++--- src/client/context/AirDCPPSocket.ts | 5 -- src/client/context/AirDCPPSocket.tsx | 45 +++++++++++++++ src/client/context/SettingsContext.tsx | 0 12 files changed, 155 insertions(+), 126 deletions(-) create mode 100644 src/client/components/ComicDetail/DownloadProgressTick.tsx delete mode 100644 src/client/context/AirDCPPSocket.ts create mode 100644 src/client/context/AirDCPPSocket.tsx create mode 100644 src/client/context/SettingsContext.tsx diff --git a/src/client/actions/airdcpp.actions.tsx b/src/client/actions/airdcpp.actions.tsx index 0f99fc2..e7f092f 100644 --- a/src/client/actions/airdcpp.actions.tsx +++ b/src/client/actions/airdcpp.actions.tsx @@ -265,7 +265,6 @@ export const getTransfers = true, ); } - console.log(ADCPPSocket); const foo = await ADCPPSocket.get("queue/bundles/1/50", {}); console.log(foo); } catch (err) { diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss index 52d76d5..a36489d 100644 --- a/src/client/assets/scss/App.scss +++ b/src/client/assets/scss/App.scss @@ -58,6 +58,11 @@ pre { .navbar { border-bottom: 1px solid #f2f1f9; + .download-progress-meter { + margin-left: -300px; + min-width: 500px; + + } } .navbar-item.is-mega { diff --git a/src/client/components/App.tsx b/src/client/components/App.tsx index e90dd19..093b70b 100644 --- a/src/client/components/App.tsx +++ b/src/client/components/App.tsx @@ -1,5 +1,5 @@ -import React, { ReactElement, useState } from "react"; -import { useSelector } from "react-redux"; +import React, { ReactElement, useContext, useEffect, useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; import Dashboard from "./Dashboard/Dashboard"; import Import from "./Import"; @@ -18,7 +18,11 @@ import { Routes, Route } from "react-router-dom"; import Navbar from "./Navbar"; import "../assets/scss/App.scss"; import Notifications from "react-notification-system-redux"; -import { AirDCPPSocketContext } from "../context/AirDCPPSocket"; +import { + AirDCPPSocketContextProvider, + AirDCPPSocketContext, +} from "../context/AirDCPPSocket"; +import { isNil } from "lodash"; //Optional styling const style = { @@ -66,10 +70,26 @@ const style = { export const App = (): ReactElement => { const notifications = useSelector((state: RootState) => state.notifications); - const [ADCPPSocket, setADCPPSocket] = useState({}); + const airDCPPConfiguration = useContext(AirDCPPSocketContext); + const { AirDCPPSocket } = airDCPPConfiguration; + useEffect(() => { + const addQueueListener = async () => { + if (!isNil(AirDCPPSocket)) { + await AirDCPPSocket.addListener( + "queue", + "queue_bundle_added", + async (data) => console.log("JEMEN:", data), + ); + console.log( + "[AirDCPP]: Listener registered - listening to queue bundle changes", + ); + } + }; + addQueueListener(); + }, [AirDCPPSocket]); return ( - +
{ } /> } /> } /> - } /> + } /> } /> { } />
- + ); }; diff --git a/src/client/components/ComicDetail/AcquisitionPanel.tsx b/src/client/components/ComicDetail/AcquisitionPanel.tsx index 7454983..aab76fd 100644 --- a/src/client/components/ComicDetail/AcquisitionPanel.tsx +++ b/src/client/components/ComicDetail/AcquisitionPanel.tsx @@ -20,14 +20,14 @@ interface IAcquisitionPanelProps { query: any; comicObjectid: any; comicObject: any; - userSettings: any; + settings: any; } export const AcquisitionPanel = ( props: IAcquisitionPanelProps, ): ReactElement => { const issueName = props.query.issue.name || ""; - const { userSettings } = props; + // const { settings } = props; const sanitizedIssueName = issueName.replace(/[^a-zA-Z0-9 ]/g, " "); // Selectors for picking state @@ -44,23 +44,21 @@ export const AcquisitionPanel = ( (state: RootState) => state.airdcpp.searchInstance, ); - // const userSettings = useSelector((state: RootState) => state.settings.data); - const { ADCPPSocket } = useContext(AirDCPPSocketContext); + // const settings = useSelector((state: RootState) => state.settings.data); + const airDCPPConfiguration = useContext(AirDCPPSocketContext); + const { AirDCPPSocket, settings } = airDCPPConfiguration; const dispatch = useDispatch(); const [dcppQuery, setDcppQuery] = useState({}); - console.log(ADCPPSocket); + console.log(airDCPPConfiguration) useEffect(() => { - if (!isNil(userSettings.directConnect)) { + if (!isNil(settings)) { // AirDC++ search query const dcppSearchQuery = { query: { pattern: `${sanitizedIssueName.replace(/#/g, "")}`, extensions: ["cbz", "cbr", "cb7"], }, - hub_urls: map( - userSettings.directConnect.client.hubs, - (item) => item.value, - ), + hub_urls: map(settings.directConnect.client.hubs, (item) => item.value), priority: 5, }; setDcppQuery(dcppSearchQuery); @@ -74,20 +72,17 @@ export const AcquisitionPanel = ( pattern: `${searchQuery.issueName}`, extensions: ["cbz", "cbr", "cb7"], }, - hub_urls: map( - userSettings.directConnect.client.hubs, - (item) => item.value, - ), + hub_urls: map(settings.directConnect.client.hubs, (item) => item.value), priority: 5, }; dispatch( - search(manualQuery, ADCPPSocket, { - username: `${userSettings.directConnect.client.host.username}`, - password: `${userSettings.directConnect.client.host.password}`, + search(manualQuery, AirDCPPSocket, { + username: `${settings.directConnect.client.host.username}`, + password: `${settings.directConnect.client.host.password}`, }), ); }, - [dispatch, ADCPPSocket], + [dispatch, AirDCPPSocket], ); // download via AirDC++ @@ -99,18 +94,18 @@ export const AcquisitionPanel = ( resultId, comicBookObjectId, comicObject, - ADCPPSocket, + AirDCPPSocket, { - username: `${userSettings.directConnect.client.host.username}`, - password: `${userSettings.directConnect.client.host.password}`, + username: `${settings.directConnect.client.host.username}`, + password: `${settings.directConnect.client.host.password}`, }, ), ); // this is to update the download count badge on the downloads tab dispatch( - getBundlesForComic(comicBookObjectId, ADCPPSocket, { - username: `${userSettings.directConnect.client.host.username}`, - password: `${userSettings.directConnect.client.host.password}`, + getBundlesForComic(comicBookObjectId, AirDCPPSocket, { + username: `${settings.directConnect.client.host.username}`, + password: `${settings.directConnect.client.host.password}`, }), ); }, @@ -119,7 +114,7 @@ export const AcquisitionPanel = ( return ( <>
- {!isEmpty(ADCPPSocket) ? ( + {!isEmpty(AirDCPPSocket) ? (
- {userSettings.directConnect.client.hubs.map( - ({ value }) => ( - - {value} - - ), - )} + {settings.directConnect.client.hubs.map(({ value }) => ( + + {value} + + ))}
diff --git a/src/client/components/ComicDetail/ComicDetailContainer.tsx b/src/client/components/ComicDetail/ComicDetailContainer.tsx index 43d4215..9f4416e 100644 --- a/src/client/components/ComicDetail/ComicDetailContainer.tsx +++ b/src/client/components/ComicDetail/ComicDetailContainer.tsx @@ -5,38 +5,18 @@ import { useParams } from "react-router-dom"; import { getComicBookDetailById } from "../../actions/comicinfo.actions"; import { ComicDetail } from "../ComicDetail/ComicDetail"; -import { getSettings } from "../../actions/settings.actions"; -import { AirDCPPSocketContext } from "../../context/AirDCPPSocket"; -import AirDCPPSocket from "../../services/DcppSearchService"; - - export const ComicDetailContainer = (): ReactElement | null => { const comicBookDetailData = useSelector( (state: RootState) => state.comicInfo.comicBookDetail, ); const dispatch = useDispatch(); - useEffect(() => { - dispatch(getSettings()); - }, [dispatch]); - const userSettings = useSelector((state: RootState) => state.settings.data); - const { ADCPPSocket, setADCPPSocket } = useContext(AirDCPPSocketContext); - useEffect(() => { - if (isEmpty(ADCPPSocket) && !isNil(userSettings.directConnect)) { - setADCPPSocket( - new AirDCPPSocket({ - protocol: `${userSettings.directConnect.client.host.protocol}`, - hostname: `${userSettings.directConnect.client.host.hostname}`, - }), - ); - } - }, [userSettings]); const { comicObjectId } = useParams<{ comicObjectId: string }>(); useEffect(() => { dispatch(getComicBookDetailById(comicObjectId)); // dispatch(getSettings()); }, [dispatch]); return !isEmpty(comicBookDetailData) ? ( - + ) : null; }; diff --git a/src/client/components/ComicDetail/DownloadProgressTick.tsx b/src/client/components/ComicDetail/DownloadProgressTick.tsx new file mode 100644 index 0000000..5eb524e --- /dev/null +++ b/src/client/components/ComicDetail/DownloadProgressTick.tsx @@ -0,0 +1,35 @@ +import prettyBytes from "pretty-bytes"; +import React, { ReactElement } from "react"; + +export const DownloadProgressTick = (props): ReactElement => { + return ( +
+

{props.data.name}

+
+ + {prettyBytes(props.data.downloaded_bytes)} of{" "} + {prettyBytes(props.data.size)}{" "} + + + {(parseInt(props.data.downloaded_bytes) / parseInt(props.data.size)) * + 100} + % + +
+
+ {prettyBytes(props.data.speed)} per second. +
+
+ Time left: + {Math.round(parseInt(props.data.seconds_left) / 60)} +
+
{props.data.target}
+
+ ); +}; + +export default DownloadProgressTick; diff --git a/src/client/components/ComicDetail/DownloadsPanel.tsx b/src/client/components/ComicDetail/DownloadsPanel.tsx index ede1f88..291c707 100644 --- a/src/client/components/ComicDetail/DownloadsPanel.tsx +++ b/src/client/components/ComicDetail/DownloadsPanel.tsx @@ -19,9 +19,6 @@ interface IDownloadsPanelProps { export const DownloadsPanel = ( props: IDownloadsPanelProps, ): ReactElement | null => { - const downloadProgressTick = useSelector( - (state: RootState) => state.airdcpp.downloadProgressData, - ); const bundles = useSelector((state: RootState) => { return state.airdcpp.bundles; }); @@ -41,58 +38,12 @@ export const DownloadsPanel = ( password: `${userSettings.directConnect.client.host.password}`, }), ); - dispatch( - getDownloadProgress(props.comicObjectId, ADCPPSocket, { - username: `${userSettings.directConnect.client.host.username}`, - password: `${userSettings.directConnect.client.host.password}`, - }), - ); } } catch (error) { throw new Error(error); } }, [dispatch]); - const ProgressTick = (props) => { - return ( -
- {JSON.stringify(props.data.downloadProgressTick)} - -
-
-
-
{props.data.name}
-
- - {prettyBytes(props.data.downloaded_bytes)} of{" "} - {prettyBytes(props.data.size)}{" "} - - - {(parseInt(props.data.downloaded_bytes) / - parseInt(props.data.size)) * - 100} - % - -
-
- {prettyBytes(props.data.speed)} per second. -
-
- Time left: - {Math.round(parseInt(props.data.seconds_left) / 60)} -
-
{props.data.target}
-
-
-
-
- ); - }; - const Bundles = (props) => { return !isEmpty(props.data) ? (
@@ -130,9 +81,6 @@ export const DownloadsPanel = ( return !isNil(props.data) ? ( <>
- {!isNil(downloadProgressTick) ? ( - - ) : null} {!isEmpty(ADCPPSocket) ? ( ) : ( diff --git a/src/client/components/Dashboard/LibraryStatistics.tsx b/src/client/components/Dashboard/LibraryStatistics.tsx index 7233f9a..5d5eca8 100644 --- a/src/client/components/Dashboard/LibraryStatistics.tsx +++ b/src/client/components/Dashboard/LibraryStatistics.tsx @@ -9,7 +9,7 @@ export const LibraryStatistics = ( return (

- Statistics + Your Library In Numbers

A brief snapshot of your library.

diff --git a/src/client/components/Navbar.tsx b/src/client/components/Navbar.tsx index 802c388..72974d3 100644 --- a/src/client/components/Navbar.tsx +++ b/src/client/components/Navbar.tsx @@ -1,5 +1,6 @@ import React from "react"; import { SearchBar } from "./GlobalSearchBar/SearchBar"; +import { DownloadProgressTick } from "./ComicDetail/DownloadProgressTick"; import { Link } from "react-router-dom"; const Navbar: React.FunctionComponent = (props) => { @@ -62,15 +63,23 @@ const Navbar: React.FunctionComponent = (props) => {
-
- + {/* + {!isUndefined(downloadProgressTick) ? ( +
+ + + +
+ ) : null} +
*/}
Blog
diff --git a/src/client/context/AirDCPPSocket.ts b/src/client/context/AirDCPPSocket.ts deleted file mode 100644 index f9c6833..0000000 --- a/src/client/context/AirDCPPSocket.ts +++ /dev/null @@ -1,5 +0,0 @@ -import React from "react"; - -const AirDCPPSocketContext = React.createContext(null); - -export { AirDCPPSocketContext }; diff --git a/src/client/context/AirDCPPSocket.tsx b/src/client/context/AirDCPPSocket.tsx new file mode 100644 index 0000000..928df61 --- /dev/null +++ b/src/client/context/AirDCPPSocket.tsx @@ -0,0 +1,45 @@ +import axios from "axios"; +import React, { createContext, useEffect, useState } from "react"; +import { SETTINGS_SERVICE_BASE_URI } from "../constants/endpoints"; +import AirDCPPSocket from "../services/DcppSearchService"; + +const AirDCPPSocketContext = createContext({}); +const AirDCPPSocketContextProvider = ({ children }) => { + const [airDCPPConfiguration, setValue] = useState({}); + useEffect(() => { + const initializeAirDCPPSocket = () => { + axios({ + url: `${SETTINGS_SERVICE_BASE_URI}/getSettings`, + method: "POST", + data: "", + }).then(async (data) => { + const { directConnect } = data.data; + const initializedAirDCPPSocket = new AirDCPPSocket({ + protocol: `${directConnect.client.host.protocol}`, + hostname: `${directConnect.client.host.hostname}`, + }); + await initializedAirDCPPSocket.connect( + `${directConnect.client.host.username}`, + `${directConnect.client.host.password}`, + true, + ); + setValue({ + AirDCPPSocket: initializedAirDCPPSocket, + settings: data.data, + }); + }); + }; + initializeAirDCPPSocket(); + }, []); + + // the Provider gives access to the context to its children + + console.log(airDCPPConfiguration); + return ( + + {children} + + ); +}; + +export { AirDCPPSocketContext, AirDCPPSocketContextProvider }; diff --git a/src/client/context/SettingsContext.tsx b/src/client/context/SettingsContext.tsx new file mode 100644 index 0000000..e69de29