🧩 Added react-query query to qBittorrentSettings page

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

@@ -1,25 +1,58 @@
-import React, { ReactElement, useCallback } from "react";
-import { saveSettings } from "../../../actions/settings.actions";
+import React, { ReactElement, useCallback, useEffect } from "react";
 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 (
-    <>
-      <ConnectionForm
-        initialData={data?.bittorrent.client.host}
-        submitHandler={onSubmit}
-        formHeading={"Qbittorrent Configuration"}
-      />
-      <pre>{JSON.stringify(data?.qbittorrentClientInfo, null, 2)}</pre>
-    </>
-  );
+  return <></>;
 };
 
 export default QbittorrentConnectionForm;