From f9afc5a2497d97089357fc306645acd3b81bf12c Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Wed, 22 Nov 2023 18:28:23 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=97=EF=B8=8F=20Refactoring=20the=20Air?=
 =?UTF-8?q?DC++=20Forms?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AirDCPPSettings/AirDCPPHubsForm.tsx       | 18 ++++++++------
 .../AirDCPPSettings/AirDCPPSettingsForm.tsx   | 24 +++++++++++++++----
 src/client/components/shared/Navbar.tsx       |  6 -----
 3 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/src/client/components/Settings/AirDCPPSettings/AirDCPPHubsForm.tsx b/src/client/components/Settings/AirDCPPSettings/AirDCPPHubsForm.tsx
index 0524f95..25e6153 100644
--- a/src/client/components/Settings/AirDCPPSettings/AirDCPPHubsForm.tsx
+++ b/src/client/components/Settings/AirDCPPSettings/AirDCPPHubsForm.tsx
@@ -22,7 +22,11 @@ export const AirDCPPHubsForm = (airDCPPClientUserSettings): ReactElement => {
     })),
   );
 
-  const { data, isLoading, isError } = useQuery({
+  const {
+    data: settings,
+    isLoading,
+    isError,
+  } = useQuery({
     queryKey: ["settings"],
     queryFn: async () =>
       await axios({
@@ -31,12 +35,12 @@ export const AirDCPPHubsForm = (airDCPPClientUserSettings): ReactElement => {
       }),
   });
 
-  console.log("Asd", data);
-  const {
-    settings: {
-      data: { directConnect },
-    },
-  } = data;
+  console.log("Asd", settings);
+  // const {
+  //   settings: {
+  //     data: { directConnect },
+  //   },
+  // } = data;
 
   const { data: hubs } = useQuery({
     queryKey: [],
diff --git a/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx b/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx
index 9cd5786..77df3e8 100644
--- a/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx
+++ b/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx
@@ -27,6 +27,10 @@ export const AirDCPPSettingsForm = (): ReactElement => {
     })),
   );
 
+  /**
+   * Mutation to update settings and subsequently initialize
+   * AirDC++ socket with those settings
+   */
   const { mutate } = useMutation({
     mutationFn: async (values) =>
       await axios({
@@ -42,14 +46,20 @@ export const AirDCPPSettingsForm = (): ReactElement => {
           },
         },
       } = values;
-      console.log("asdas", host);
       initializeAirDCPPSocket(host);
     },
   });
+  const deleteSettingsMutation = useMutation(
+    async () =>
+      await axios.post("http://localhost:3000/api/settings/saveSettings", {
+        settingsPayload: {},
+        settingsKey: "directConnect",
+      }),
+  );
 
-  const removeSettings = useCallback(async () => {
-    // airDCPPSettings.setSettings({});
-  }, []);
+  // const removeSettings = useCallback(async () => {
+  //   // airDCPPSettings.setSettings({});
+  // }, []);
   //
   const initFormData = !isUndefined(airDCPPClientConfiguration)
     ? airDCPPClientConfiguration
@@ -69,7 +79,11 @@ export const AirDCPPSettingsForm = (): ReactElement => {
 
       {!isEmpty(airDCPPClientConfiguration) ? (
         <p className="control mt-4">
-          <button className="button is-danger" onClick={removeSettings}>
+          as
+          <button
+            className="button is-danger"
+            onClick={() => deleteSettingsMutation.mutate()}
+          >
             Delete
           </button>
         </p>
diff --git a/src/client/components/shared/Navbar.tsx b/src/client/components/shared/Navbar.tsx
index f167063..a32173d 100644
--- a/src/client/components/shared/Navbar.tsx
+++ b/src/client/components/shared/Navbar.tsx
@@ -180,12 +180,6 @@ const Navbar: React.FunctionComponent = (props) => {
                       {airDCPPSessionInformation.session_id}
                     </span>
                   </p>
-
-                  {
-                    <pre>
-                      {JSON.stringify(airDCPPSessionInformation, null, 2)}
-                    </pre>
-                  }
                 </div>
               </>
             ) : (