🔧 Removed context

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",

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)

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(
+      // update global state with socket connection status
-      //   toggleAirDCPPSocketConnectionStatus("disconnected", {
+      setState({
-      //     reason,
+        disconnectionInfo: { reason, code, wasClean },
-      //     code,
+        airDCPPSocketConnected: false,
-      //     wasClean,
+      });
-      //   }),
-      // );
     };
-
+    // 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 (
     <AirDCPPSocketContext.Provider value={airDCPPState}>

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(
-  <React.StrictMode>
+  <QueryClientProvider client={queryClient}>
-    <QueryClientProvider client={queryClient}>
+    <RouterProvider router={router} />
-      <AirDCPPSocketContextProvider>
+    <ReactQueryDevtools initialIsOpen={true} />
-        <RouterProvider router={router} />
+  </QueryClientProvider>,
-        <ReactQueryDevtools initialIsOpen={true} />
-      </AirDCPPSocketContextProvider>
-    </QueryClientProvider>
-  </React.StrictMode>,
 );

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());