src/client/components/App.tsx

@@ -24,11 +24,6 @@ import {
   LS_SINGLE_IMPORT,
 } from "../constants/action-types";
 
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-
-const queryClient = new QueryClient({});
-
 /**
  * Method that initializes an AirDC++ socket connection
  * 1. Initializes event listeners for download init, tick and complete events
@@ -118,11 +113,10 @@ export const App = (): ReactElement => {
   //   }
   // }, []);
   return (
-    <QueryClientProvider client={queryClient}>
+    <>
       {/* The rest of your application */}
-      <ReactQueryDevtools initialIsOpen={true} />
       {/* <AirDCPPSocketComponent /> */};
-    </QueryClientProvider>
+    </>
   );
 };
 

src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx

@@ -1,25 +1,58 @@
-import React, { ReactElement, useCallback } from "react";
+import React, { ReactElement, useCallback, useEffect } from "react";
-import { saveSettings } from "../../../actions/settings.actions";
 import { ConnectionForm } from "../../shared/ConnectionForm/ConnectionForm";
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
 
 export const QbittorrentConnectionForm = (): ReactElement => {
+  // fetch settings
+  const {
+    data: data,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["host"],
+    queryFn: async () =>
+      await axios({
+        url: "http://localhost:3000/api/settings/getAllSettings",
+        method: "GET",
+      }),
+  });
+
+  const hostDetails = data?.data.bittorrent.client.host;
+  // connect to qbittorrent client
+  useQuery({
+    queryKey: [],
+    queryFn: async () =>
+      await axios({
+        url: "http://localhost:3060/api/qbittorrent/connect",
+        method: "POST",
+        data: hostDetails,
+      }),
+    enabled: !!hostDetails,
+  });
+
+  // get qbittorrent client info
+  const {
+    data: {},
+  } = useQuery({
+    queryKey: ["qbittorrentClientInfo"],
+    queryFn: async () =>
+      await axios({
+        url: "http://localhost:3060/api/qbittorrent/getClientInfo",
+        method: "GET",
+      }),
+    enabled: !!hostDetails,
+  });
+
   const onSubmit = useCallback(async (values) => {
     try {
+      // dispatch(saveSettings(values, "bittorrent"));
     } catch (error) {
       console.log(error);
     }
   }, []);
 
-  return (
+  return <></>;
-    <>
-      <ConnectionForm
-        initialData={data?.bittorrent.client.host}
-        submitHandler={onSubmit}
-        formHeading={"Qbittorrent Configuration"}
-      />
-      <pre>{JSON.stringify(data?.qbittorrentClientInfo, null, 2)}</pre>
-    </>
-  );
 };
 
 export default QbittorrentConnectionForm;

src/client/index.tsx

@@ -6,6 +6,10 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Settings from "./components/Settings/Settings";
 const rootEl = document.getElementById("root");
 const root = createRoot(rootEl);
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+
+const queryClient = new QueryClient();
 
 const router = createBrowserRouter([
   {
@@ -20,6 +24,9 @@ const router = createBrowserRouter([
 
 root.render(
   <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
       <RouterProvider router={router} />
+      <ReactQueryDevtools initialIsOpen={true} />
+    </QueryClientProvider>
   </React.StrictMode>,
 );