🏗 WIP fixes for AirDCPP socket connection Part Deux

src/client/components/AirDCPPSettings/AirDCPPSettingsConfirmation.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement } from "react";
 
 export const AirDCPPSettingsConfirmation = (settingsObject): ReactElement => {
   const { settings } = settingsObject;
-
+  console.log(settings);
   return (
     <div className="mt-4 is-clearfix">
       <div className="card">
@@ -11,52 +11,17 @@ export const AirDCPPSettingsConfirmation = (settingsObject): ReactElement => {
           <div className="content is-size-7">
             <dl>
               <dt>{settings._id}</dt>
-              <dt>
-                Client version:{" "}
-                {
-                  settings.directConnect.client.airDCPPUserSettings.system_info
-                    .client_version
-                }
-              </dt>
-              <dt>
-                Hostname:{" "}
-                {
-                  settings.directConnect.client.airDCPPUserSettings.system_info
-                    .hostname
-                }
-              </dt>
-              <dt>
-                Platform:{" "}
-                {
-                  settings.directConnect.client.airDCPPUserSettings.system_info
-                    .platform
-                }
-              </dt>
+              <dt>Client version: {settings.system_info.client_version}</dt>
+              <dt>Hostname: {settings.system_info.hostname}</dt>
+              <dt>Platform: {settings.system_info.platform}</dt>
 
-              <dt>
-                Username:{" "}
-                {
-                  settings.directConnect.client.airDCPPUserSettings.user
-                    .username
-                }
-              </dt>
+              <dt>Username: {settings.user.username}</dt>
 
-              <dt>
-                Active Sessions:{" "}
-                {
-                  settings.directConnect.client.airDCPPUserSettings.user
-                    .active_sessions
-                }
-              </dt>
+              <dt>Active Sessions: {settings.user.active_sessions}</dt>
               <dt>
                 Permissions:{" "}
                 <pre>
-                  {JSON.stringify(
-                    settings.directConnect.client.airDCPPUserSettings.user
-                      .permissions,
-                    undefined,
-                    2,
-                  )}
+                  {JSON.stringify(settings.user.permissions, undefined, 2)}
                 </pre>
               </dt>
             </dl>

src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useCallback, useContext } from "react";
+import React, { ReactElement, useCallback, useContext, useEffect } from "react";
 import { Form, Field } from "react-final-form";
 import { useDispatch } from "react-redux";
 import { saveSettings, deleteSettings } from "../../actions/settings.actions";
@@ -8,33 +8,29 @@ import { isUndefined, isEmpty, isNil } from "lodash";
 
 export const AirDCPPSettingsForm = (): ReactElement => {
   const dispatch = useDispatch();
-  const airDCPPConfiguration = useContext(AirDCPPSocketContext);
-  const { AirDCPPSocket, settings } = airDCPPConfiguration;
-
-  const onSubmit = async (values) => {
+  const airDCPPSettings = useContext(AirDCPPSocketContext);
+  const onSubmit = useCallback(async (values) => {
     try {
-      if (!isNil(AirDCPPSocket.session_id)) {
-        dispatch(
-          saveSettings({
-            host: values,
-            airDCPPUserSettings: settings,
-          }),
-        );
-      }
+      airDCPPSettings.setSettings(values);
+      dispatch(
+        saveSettings({
+          host: values,
+        }),
+      );
     } catch (error) {
       console.log(error);
     }
-  };
-
+  }, []);
   const removeSettings = useCallback(async () => {
     dispatch(deleteSettings());
   }, []);
-
   const validate = async () => {};
-  const initFormData =
-    !isEmpty(settings.directConnect) || !isUndefined(settings.directConnect)
-      ? settings.directConnect.client.host
-      : {};
+
+  // const initFormData = !isUndefined(airDCPPSettings)
+  //   ? airDCPPSettings.airDCPPState.settings.directConnect.client.host
+  //   : {};
+  const initFormData = {};
+
   return (
     <>
       <Form
@@ -111,17 +107,20 @@ export const AirDCPPSettingsForm = (): ReactElement => {
           </form>
         )}
       />
-      {!isEmpty(settings) ? (
-        <AirDCPPSettingsConfirmation settings={settings} />
+      {!isUndefined(airDCPPSettings.airDCPPState.socketConnectionInformation) ? (
+        <AirDCPPSettingsConfirmation
+          settings={airDCPPSettings.airDCPPState.socketConnectionInformation}
+        />
       ) : null}
 
-      {!isEmpty(settings) ? (
+      {/* {!isUndefined(settings) &&
+      !isEmpty(settings.directConnect.client.airDCPPUserSettings) ? (
         <p className="control mt-4">
           <button className="button is-danger" onClick={removeSettings}>
             Delete
           </button>
         </p>
-      ) : null}
+      ) : null} */}
     </>
   );
 };

src/client/components/App.tsx

@@ -25,10 +25,14 @@ import { isEmpty, isNil, isUndefined } from "lodash";
 
 const AirDCPPSocketComponent = (): ReactElement => {
   const airDCPPConfiguration = useContext(AirDCPPSocketContext);
-  const { AirDCPPSocket, settings } = airDCPPConfiguration;
+  console.log(airDCPPConfiguration);
+
   useEffect(() => {
     const foo = async () => {
-      if (!isUndefined(AirDCPPSocket)) {
+      if (
+        !isUndefined(airDCPPConfiguration.airDCPPState) &&
+        !isEmpty(airDCPPConfiguration.airDCPPState.settings)
+      ) {
         await AirDCPPSocket.addListener(
           "queue",
           "queue_bundle_added",
@@ -40,7 +44,7 @@ const AirDCPPSocketComponent = (): ReactElement => {
       }
     };
     foo();
-  }, [settings]);
+  }, []);
   return <></>;
 };
 export const App = (): ReactElement => {

src/client/components/SystemSettings/SystemSettingsForm.tsx

@@ -2,8 +2,7 @@ import React, { ReactElement, useCallback } from "react";
 import { flushDb } from "../../actions/settings.actions";
 import { useDispatch, useSelector } from "react-redux";
 
-export const SystemSettingsForm = (settingsObject): ReactElement => {
-
+export const SystemSettingsForm = (): ReactElement => {
   const dispatch = useDispatch();
   const isSettingsCallInProgress = useSelector(
     (state: RootState) => state.settings.inProgress,