From a0f7280fbb9b3c75236d73eb6fb9f7b2342228df Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Sun, 5 Nov 2023 01:26:56 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=97=EF=B8=8F=20Refactored=20AirDCPP=20?= =?UTF-8?q?context=20using=20react-query?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/components/App.tsx | 5 +- .../AirDCPPSettings/AirDCPPSettingsForm.tsx | 43 +++++++------ .../QbittorrentConnectionForm.tsx | 1 - src/client/components/Settings/Settings.tsx | 6 +- src/client/context/AirDCPPSocket.tsx | 62 +++++++++---------- src/client/index.tsx | 10 ++- 6 files changed, 66 insertions(+), 61 deletions(-) diff --git a/src/client/components/App.tsx b/src/client/components/App.tsx index d7d5342..a794f2c 100644 --- a/src/client/components/App.tsx +++ b/src/client/components/App.tsx @@ -12,10 +12,7 @@ import Downloads from "./Downloads/Downloads"; import { Routes, Route } from "react-router-dom"; import Navbar from "./shared/Navbar"; import "../assets/scss/App.scss"; -import { - AirDCPPSocketContextProvider, - AirDCPPSocketContext, -} from "../context/AirDCPPSocket"; + import { SocketIOProvider } from "../context/SocketIOContext"; import socketIOConnectionInstance from "../shared/socket.io/instance"; import { isEmpty, isNil, isUndefined } from "lodash"; diff --git a/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx b/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx index 63e267b..5ce5174 100644 --- a/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx +++ b/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx @@ -1,5 +1,4 @@ import React, { ReactElement, useCallback, useContext } from "react"; -import { useDispatch } from "react-redux"; import { saveSettings, deleteSettings, @@ -10,31 +9,31 @@ import { isUndefined, isEmpty } from "lodash"; import { ConnectionForm } from "../../shared/ConnectionForm/ConnectionForm"; export const AirDCPPSettingsForm = (): ReactElement => { - const dispatch = useDispatch(); const airDCPPSettings = useContext(AirDCPPSocketContext); + console.log(airDCPPSettings); - const onSubmit = useCallback(async (values) => { - try { - airDCPPSettings.setSettings(values); - dispatch(saveSettings(values, "directConnect")); - } catch (error) { - console.log(error); - } - }, []); - const removeSettings = useCallback(async () => { - airDCPPSettings.setSettings({}); - dispatch(deleteSettings()); - }, []); - - const initFormData = !isUndefined( - airDCPPSettings.airDCPPState.settings.directConnect, - ) - ? airDCPPSettings.airDCPPState.settings.directConnect.client.host - : {}; + // const onSubmit = useCallback(async (values) => { + // try { + // airDCPPSettings.setSettings(values); + // // dispatch(saveSettings(values, "directConnect")); + // } catch (error) { + // console.log(error); + // } + // }, []); + // const removeSettings = useCallback(async () => { + // airDCPPSettings.setSettings({}); + // // dispatch(deleteSettings()); + // }, []); + // + // const initFormData = !isUndefined( + // airDCPPSettings.airDCPPState.settings.directConnect, + // ) + // ? airDCPPSettings.airDCPPState.settings.directConnect.client.host + // : {}; return ( <> - { Delete

- ) : null} + ) : null} */} ); }; diff --git a/src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx b/src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx index 8a8f8df..f0cbfda 100644 --- a/src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx +++ b/src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx @@ -4,7 +4,6 @@ import { useQuery, useMutation } from "@tanstack/react-query"; import axios from "axios"; export const QbittorrentConnectionForm = (): ReactElement => { - // axios interceptors to destructure response // fetch settings const { data, isLoading, isError } = useQuery({ queryKey: ["settings"], diff --git a/src/client/components/Settings/Settings.tsx b/src/client/components/Settings/Settings.tsx index ead14a1..06c0f85 100644 --- a/src/client/components/Settings/Settings.tsx +++ b/src/client/components/Settings/Settings.tsx @@ -18,7 +18,11 @@ export const Settings = (props: ISettingsProps): ReactElement => { }, { id: "adc-connection", - content:
{/* */}
, + content: ( +
+ +
+ ), }, { id: "qbt-connection", diff --git a/src/client/context/AirDCPPSocket.tsx b/src/client/context/AirDCPPSocket.tsx index ff783fe..10dd0ad 100644 --- a/src/client/context/AirDCPPSocket.tsx +++ b/src/client/context/AirDCPPSocket.tsx @@ -1,10 +1,11 @@ import { isEmpty, isUndefined } from "lodash"; import React, { createContext, useEffect, useState } from "react"; -import { useDispatch, useSelector } from "react-redux"; import { toggleAirDCPPSocketConnectionStatus } from "../actions/airdcpp.actions"; import { getSettings } from "../actions/settings.actions"; +import { useQuery, useMutation } from "@tanstack/react-query"; import AirDCPPSocket from "../services/DcppSearchService"; +import axios from "axios"; const AirDCPPSocketContextProvider = ({ children }) => { // setter for settings for use in the context consumer @@ -14,7 +15,7 @@ const AirDCPPSocketContextProvider = ({ children }) => { airDCPPState: { settings: settingsObject, socket: {}, - socketConectionInformation: {}, + socketConnectionInformation: {}, }, }); }; @@ -27,59 +28,58 @@ const AirDCPPSocketContextProvider = ({ children }) => { }, setSettings: setSettings, }; - const dispatch = useDispatch(); const [airDCPPState, persistSettings] = useState(initState); - const airDCPPSettings = useSelector( - (state: RootState) => state.settings.data, - ); // 1. get settings from mongo - useEffect(() => { - dispatch(getSettings()); - }, []); + const { data, isLoading, isError } = useQuery({ + queryKey: ["settings"], + queryFn: async () => + await axios({ + url: "http://localhost:3000/api/settings/getAllSettings", + method: "GET", + }), + }); + + const directConnectConfiguration = data?.data.directConnect.client.host; // 2. If available, init AirDC++ Socket with those settings useEffect(() => { - if (!isEmpty(airDCPPSettings)) { - initializeAirDCPPSocket(airDCPPSettings); + if (!isEmpty(directConnectConfiguration)) { + initializeAirDCPPSocket(directConnectConfiguration); } - }, [airDCPPSettings]); + }, [directConnectConfiguration]); // Method to init AirDC++ Socket with supplied settings const initializeAirDCPPSocket = async (configuration) => { console.log("[AirDCPP]: Initializing socket..."); - const { - directConnect: { - client: { host }, - }, - } = configuration; const initializedAirDCPPSocket = new AirDCPPSocket({ - protocol: `${host.protocol}`, - hostname: `${host.hostname}:${host.port}`, - username: `${host.username}`, - password: `${host.password}`, + protocol: `${configuration.protocol}`, + hostname: `${configuration.hostname}:${configuration.port}`, + username: `${configuration.username}`, + password: `${configuration.password}`, }); // connect and disconnect handlers initializedAirDCPPSocket.onConnected = (sessionInfo) => { - dispatch(toggleAirDCPPSocketConnectionStatus("connected", sessionInfo)); + // dispatch(toggleAirDCPPSocketConnectionStatus("connected", sessionInfo)); }; initializedAirDCPPSocket.onDisconnected = async ( reason, code, wasClean, ) => { - dispatch( - toggleAirDCPPSocketConnectionStatus("disconnected", { - reason, - code, - wasClean, - }), - ); + // dispatch( + // toggleAirDCPPSocketConnectionStatus("disconnected", { + // reason, + // code, + // wasClean, + // }), + // ); }; - const socketConnectionInformation = await initializedAirDCPPSocket.connect(); + const socketConnectionInformation = + await initializedAirDCPPSocket.connect(); // update the state with the new socket connection information persistSettings({ @@ -101,7 +101,7 @@ const AirDCPPSocketContextProvider = ({ children }) => { }; const AirDCPPSocketContext = createContext({ airDCPPState: {}, - saveSettings: () => { }, + saveSettings: () => {}, }); export { AirDCPPSocketContext, AirDCPPSocketContextProvider }; diff --git a/src/client/index.tsx b/src/client/index.tsx index 3c6ce5f..4bb121d 100644 --- a/src/client/index.tsx +++ b/src/client/index.tsx @@ -8,6 +8,10 @@ const rootEl = document.getElementById("root"); const root = createRoot(rootEl); import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; +import { + AirDCPPSocketContextProvider, + AirDCPPSocketContext, +} from "./context/AirDCPPSocket"; const queryClient = new QueryClient(); @@ -25,8 +29,10 @@ const router = createBrowserRouter([ root.render( - - + + + + , );