🏗️ Trying out react-query

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

@@ -1,13 +1,10 @@
 import React, { ReactElement, useCallback } from "react";
 import { saveSettings } from "../../../actions/settings.actions";
 import { ConnectionForm } from "../../shared/ConnectionForm/ConnectionForm";
-import { useConnectToQBittorrentClientQuery } from "../../../services/torrents.api";
 
 export const QbittorrentConnectionForm = (): ReactElement => {
-  const { data, isLoading } = useConnectToQBittorrentClientQuery({});
   const onSubmit = useCallback(async (values) => {
     try {
-      dispatch(saveSettings(values, "bittorrent"));
     } catch (error) {
       console.log(error);
     }
@@ -15,13 +12,11 @@ export const QbittorrentConnectionForm = (): ReactElement => {
 
   return (
     <>
-      {!isLoading && (
-        <ConnectionForm
-          initialData={data?.bittorrent.client.host}
-          submitHandler={onSubmit}
-          formHeading={"Qbittorrent Configuration"}
-        />
-      )}
+      <ConnectionForm
+        initialData={data?.bittorrent.client.host}
+        submitHandler={onSubmit}
+        formHeading={"Qbittorrent Configuration"}
+      />
       <pre>{JSON.stringify(data?.qbittorrentClientInfo, null, 2)}</pre>
     </>
   );

src/client/components/Settings/Settings.tsx

@@ -7,22 +7,18 @@ import { ServiceStatuses } from "../ServiceStatuses/ServiceStatuses";
 import settingsObject from "../../constants/settings/settingsMenu.json";
 import { isUndefined, map } from "lodash";
 
-interface ISettingsProps { }
+interface ISettingsProps {}
 
 export const Settings = (props: ISettingsProps): ReactElement => {
   const [active, setActive] = useState("gen-db");
   const settingsContent = [
     {
       id: "adc-hubs",
-      content: <div key="adc-hubs">{<AirDCPPHubsForm />}</div>,
+      content: <div key="adc-hubs">{/* <AirDCPPHubsForm /> */}</div>,
     },
     {
       id: "adc-connection",
-      content: (
-        <div key="adc-connection">
-          <AirDCPPSettingsForm />
-        </div>
-      ),
+      content: <div key="adc-connection">{/* <AirDCPPSettingsForm /> */}</div>,
     },
     {
       id: "qbt-connection",
@@ -34,15 +30,11 @@ export const Settings = (props: ISettingsProps): ReactElement => {
     },
     {
       id: "core-service",
-      content: <ServiceStatuses />,
+      content: <>a</>,
     },
     {
       id: "flushdb",
-      content: (
-        <div key="flushdb">
-          <SystemSettingsForm />
-        </div>
-      ),
+      content: <div key="flushdb">{/* <SystemSettingsForm /> */}</div>,
     },
   ];
   return (