diff --git a/package.json b/package.json index 2884c85..b5a915f 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,8 @@ "threetwo-ui-typings": "^1.0.14", "vite": "^4.4.9", "vite-plugin-html": "^3.2.0", - "websocket": "^1.0.34" + "websocket": "^1.0.34", + "zustand": "^4.4.6" }, "devDependencies": { "@storybook/addon-essentials": "^7.4.1", diff --git a/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx b/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx index 7420c4d..6c7d031 100644 --- a/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx +++ b/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx @@ -15,14 +15,12 @@ export const AirDCPPSettingsForm = (): ReactElement => { 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) diff --git a/src/client/context/AirDCPPSocket.tsx b/src/client/context/AirDCPPSocket.tsx index 10dd0ad..e5d874b 100644 --- a/src/client/context/AirDCPPSocket.tsx +++ b/src/client/context/AirDCPPSocket.tsx @@ -1,13 +1,12 @@ import { isEmpty, isUndefined } from "lodash"; import React, { createContext, useEffect, useState } from "react"; -import { toggleAirDCPPSocketConnectionStatus } from "../actions/airdcpp.actions"; -import { getSettings } from "../actions/settings.actions"; import { useQuery, useMutation } from "@tanstack/react-query"; - +import { useStore } from "../store/index"; import AirDCPPSocket from "../services/DcppSearchService"; import axios from "axios"; const AirDCPPSocketContextProvider = ({ children }) => { + const { getState, setState } = useStore; // setter for settings for use in the context consumer const setSettings = (settingsObject) => { persistSettings({ @@ -19,7 +18,7 @@ const AirDCPPSocketContextProvider = ({ children }) => { }, }); }; - // 1. default zero-state for AirDC++ configuration + // Initial state for AirDC++ configuration const initState = { airDCPPState: { settings: {}, @@ -60,24 +59,25 @@ const AirDCPPSocketContextProvider = ({ children }) => { password: `${configuration.password}`, }); - // connect and disconnect handlers + // Set up connect and disconnect handlers initializedAirDCPPSocket.onConnected = (sessionInfo) => { - // dispatch(toggleAirDCPPSocketConnectionStatus("connected", sessionInfo)); + // update global state with socket connection status + setState({ + airDCPPSocketConnected: true, + }); }; initializedAirDCPPSocket.onDisconnected = async ( reason, code, wasClean, ) => { - // dispatch( - // toggleAirDCPPSocketConnectionStatus("disconnected", { - // reason, - // code, - // wasClean, - // }), - // ); + // update global state with socket connection status + setState({ + disconnectionInfo: { reason, code, wasClean }, + airDCPPSocketConnected: false, + }); }; - + // Attempt connection const socketConnectionInformation = await initializedAirDCPPSocket.connect(); @@ -92,6 +92,7 @@ const AirDCPPSocketContextProvider = ({ children }) => { }); }; + console.log("connected?", getState()); // the Provider gives access to the context to its children return ( diff --git a/src/client/index.tsx b/src/client/index.tsx index 4bb121d..16f5cf0 100644 --- a/src/client/index.tsx +++ b/src/client/index.tsx @@ -8,10 +8,6 @@ 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(); @@ -27,12 +23,8 @@ const router = createBrowserRouter([ ]); root.render( - - - - - - - - , + + + + , ); diff --git a/src/client/store/index.ts b/src/client/store/index.ts new file mode 100644 index 0000000..c140acb --- /dev/null +++ b/src/client/store/index.ts @@ -0,0 +1,70 @@ +import { create } from "zustand"; +import { isEmpty, isUndefined } from "lodash"; +import React, { createContext, useEffect, useState } from "react"; +import { useQuery, useMutation } from "@tanstack/react-query"; +import AirDCPPSocket from "../services/DcppSearchService"; +import axios from "axios"; + +export const useStore = create((set, get) => ({ + airDCPPSocketConnected: false, + disconnectionInfo: {}, + setAirDCPPSocketConnectionStatus: () => + set((value) => ({ + airDCPPSocketConnected: value, + })), + getAirDCPPConnectionStatus: () => { + const airDCPPSocketConnectionStatus = get().airDCPPSocketConnected; + }, +})); + +const { getState, setState } = useStore; + +// 1. get settings from mongo +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(directConnectConfiguration)) { + initializeAirDCPPSocket(directConnectConfiguration); + } +}, [directConnectConfiguration]); + +// Method to init AirDC++ Socket with supplied settings +const initializeAirDCPPSocket = async (configuration) => { + console.log("[AirDCPP]: Initializing socket..."); + + const initializedAirDCPPSocket = new AirDCPPSocket({ + protocol: `${configuration.protocol}`, + hostname: `${configuration.hostname}:${configuration.port}`, + username: `${configuration.username}`, + password: `${configuration.password}`, + }); + + // Set up connect and disconnect handlers + initializedAirDCPPSocket.onConnected = (sessionInfo) => { + // update global state with socket connection status + setState({ + airDCPPSocketConnected: true, + }); + }; + initializedAirDCPPSocket.onDisconnected = async (reason, code, wasClean) => { + // update global state with socket connection status + setState({ + disconnectionInfo: { reason, code, wasClean }, + airDCPPSocketConnected: false, + }); + }; + // Attempt connection + const socketConnectionInformation = await initializedAirDCPPSocket.connect(); +}; + +console.log("connected?", getState());