🏗️ Refactored AirDCPP context using react-query

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

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) => {
+  //   const onSubmit = useCallback(async (values) => {
-    try {
+  //     try {
-      airDCPPSettings.setSettings(values);
+  //       airDCPPSettings.setSettings(values);
-      dispatch(saveSettings(values, "directConnect"));
+  //       // dispatch(saveSettings(values, "directConnect"));
-    } catch (error) {
+  //     } catch (error) {
-      console.log(error);
+  //       console.log(error);
-    }
+  //     }
-  }, []);
+  //   }, []);
-  const removeSettings = useCallback(async () => {
+  //   const removeSettings = useCallback(async () => {
-    airDCPPSettings.setSettings({});
+  //     airDCPPSettings.setSettings({});
-    dispatch(deleteSettings());
+  //     // dispatch(deleteSettings());
-  }, []);
+  //   }, []);
-
+  //
-  const initFormData = !isUndefined(
+  //   const initFormData = !isUndefined(
-    airDCPPSettings.airDCPPState.settings.directConnect,
+  //     airDCPPSettings.airDCPPState.settings.directConnect,
-  )
+  //   )
-    ? airDCPPSettings.airDCPPState.settings.directConnect.client.host
+  //     ? airDCPPSettings.airDCPPState.settings.directConnect.client.host
-    : {};
+  //     : {};
 
   return (
     <>
-      <ConnectionForm
+      {/* <ConnectionForm
         initialData={initFormData}
         submitHandler={onSubmit}
         formHeading={"Configure AirDC++"}
@@ -52,7 +51,7 @@ export const AirDCPPSettingsForm = (): ReactElement => {
             Delete
           </button>
         </p>
-      ) : null}
+      ) : null} */}
     </>
   );
 };

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

src/client/components/Settings/Settings.tsx

@@ -18,7 +18,11 @@ export const Settings = (props: ISettingsProps): ReactElement => {
     },
     {
       id: "adc-connection",
-      content: <div key="adc-connection">{/* <AirDCPPSettingsForm /> */}</div>,
+      content: (
+        <div key="adc-connection">
+          <AirDCPPSettingsForm />
+        </div>
+      ),
     },
     {
       id: "qbt-connection",

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(() => {
+  const { data, isLoading, isError } = useQuery({
-    dispatch(getSettings());
+    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)) {
+    if (!isEmpty(directConnectConfiguration)) {
-      initializeAirDCPPSocket(airDCPPSettings);
+      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}`,
+      protocol: `${configuration.protocol}`,
-      hostname: `${host.hostname}:${host.port}`,
+      hostname: `${configuration.hostname}:${configuration.port}`,
-      username: `${host.username}`,
+      username: `${configuration.username}`,
-      password: `${host.password}`,
+      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(
+      // dispatch(
-        toggleAirDCPPSocketConnectionStatus("disconnected", {
+      //   toggleAirDCPPSocketConnectionStatus("disconnected", {
-          reason,
+      //     reason,
-          code,
+      //     code,
-          wasClean,
+      //     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 };

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