🏗️ Refactoring the AirDC++ Forms

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);
+  console.log("Asd", settings);
-  const {
+  // const {
-    settings: {
+  //   settings: {
-      data: { directConnect },
+  //     data: { directConnect },
-    },
+  //   },
-  } = data;
+  // } = data;
 
   const { data: hubs } = useQuery({
     queryKey: [],

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 () => {
+  // const removeSettings = useCallback(async () => {
-    // airDCPPSettings.setSettings({});
+  //   // 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>

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>
               </>
             ) : (