🏗 WIP fixes for AirDCPP socket connection Part Deux

src/client/actions/settings.actions.tsx

@@ -10,19 +10,18 @@ import {
   SETTINGS_SERVICE_BASE_URI,
 } from "../constants/endpoints";
 
-export const saveSettings =
+export const saveSettings = (settingsPayload) => async (dispatch) => {
-  (settingsPayload, settingsObjectId?) => async (dispatch) => {
+  const result = await axios({
-    const result = await axios({
+    url: `${SETTINGS_SERVICE_BASE_URI}/saveSettings`,
-      url: `${SETTINGS_SERVICE_BASE_URI}/saveSettings`,
+    method: "POST",
-      method: "POST",
+    data: { settingsPayload },
-      data: { settingsPayload, settingsObjectId },
+  });
-    });
+  console.log(result.data);
-    console.log(result.data);
+  dispatch({
-    dispatch({
+    type: SETTINGS_OBJECT_FETCHED,
-      type: SETTINGS_OBJECT_FETCHED,
+    data: result.data,
-      data: result.data,
+  });
-    });
+};
-  };
 
 export const getSettings = (settingsKey?) => async (dispatch) => {
   const result = await axios({

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>
+              <dt>Client version: {settings.system_info.client_version}</dt>
-                Client version:{" "}
+              <dt>Hostname: {settings.system_info.hostname}</dt>
-                {
+              <dt>Platform: {settings.system_info.platform}</dt>
-                  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>
+              <dt>Username: {settings.user.username}</dt>
-                Username:{" "}
-                {
-                  settings.directConnect.client.airDCPPUserSettings.user
-                    .username
-                }
-              </dt>
 
-              <dt>
+              <dt>Active Sessions: {settings.user.active_sessions}</dt>
-                Active Sessions:{" "}
-                {
-                  settings.directConnect.client.airDCPPUserSettings.user
-                    .active_sessions
-                }
-              </dt>
               <dt>
                 Permissions:{" "}
                 <pre>
-                  {JSON.stringify(
+                  {JSON.stringify(settings.user.permissions, undefined, 2)}
-                    settings.directConnect.client.airDCPPUserSettings.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 airDCPPSettings = useContext(AirDCPPSocketContext);
-  const { AirDCPPSocket, settings } = airDCPPConfiguration;
+  const onSubmit = useCallback(async (values) => {
-
-  const onSubmit = async (values) => {
     try {
-      if (!isNil(AirDCPPSocket.session_id)) {
+      airDCPPSettings.setSettings(values);
-        dispatch(
+      dispatch(
-          saveSettings({
+        saveSettings({
-            host: values,
+          host: values,
-            airDCPPUserSettings: settings,
+        }),
-          }),
+      );
-        );
-      }
     } catch (error) {
       console.log(error);
     }
-  };
+  }, []);
-
   const removeSettings = useCallback(async () => {
     dispatch(deleteSettings());
   }, []);
-
   const validate = async () => {};
-  const initFormData =
+
-    !isEmpty(settings.directConnect) || !isUndefined(settings.directConnect)
+  // const initFormData = !isUndefined(airDCPPSettings)
-      ? settings.directConnect.client.host
+  //   ? airDCPPSettings.airDCPPState.settings.directConnect.client.host
-      : {};
+  //   : {};
+  const initFormData = {};
+
   return (
     <>
       <Form
@@ -111,17 +107,20 @@ export const AirDCPPSettingsForm = (): ReactElement => {
           </form>
         )}
       />
-      {!isEmpty(settings) ? (
+      {!isUndefined(airDCPPSettings.airDCPPState.socketConnectionInformation) ? (
-        <AirDCPPSettingsConfirmation settings={settings} />
+        <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,

src/client/context/AirDCPPSocket.tsx

@@ -1,46 +1,81 @@
-import axios from "axios";
+import { isEmpty, isUndefined } from "lodash";
 import React, { createContext, useEffect, useMemo, useState } from "react";
-import { SETTINGS_SERVICE_BASE_URI } from "../constants/endpoints";
+import { useDispatch, useSelector } from "react-redux";
+import { getSettings } from "../actions/settings.actions";
 import AirDCPPSocket from "../services/DcppSearchService";
 
-const AirDCPPSocketContext = createContext({});
 const AirDCPPSocketContextProvider = ({ children }) => {
-  const [airDCPPConfiguration, setValue] = useState({});
+  // setter for settings for use in the context consumer
+  const setSettings = (settingsObject) => {
+    persistSettings({
+      ...airDCPPState,
+      airDCPPState: {
+        settings: settingsObject,
+        socket: {},
+        socketConnectionInformation: {},
+      },
+    });
+  };
+  // 1. default zero-state for AirDC++ configuration
+  const initState = {
+    airDCPPState: { settings: {}, socket: {}, socketConnectionInformation: {} },
+    setSettings: setSettings,
+  };
+  const dispatch = useDispatch();
+  const [airDCPPState, persistSettings] = useState(initState);
+  const airDCPPSettings = useSelector(
+    (state: RootState) => state.settings.data,
+  );
 
+  // 1. get settings from mongo
   useEffect(() => {
-    const initializeAirDCPPSocket = () => {
+    dispatch(getSettings());
-      axios({
-        url: `${SETTINGS_SERVICE_BASE_URI}/getSettings`,
-        method: "POST",
-        data: "",
-      })
-        .then(async (data) => {
-          const { directConnect } = data.data;
-          const initializedAirDCPPSocket = new AirDCPPSocket({
-            protocol: `${directConnect.client.host.protocol}`,
-            hostname: `${directConnect.client.host.hostname}`,
-          });
-
-          await initializedAirDCPPSocket.connect(
-            `${directConnect.client.host.username}`,
-            `${directConnect.client.host.password}`,
-            true,
-          );
-          setValue({
-            AirDCPPSocket: initializedAirDCPPSocket,
-            settings: data.data,
-          });
-        })
-        .catch((error) => console.log(error));
-    };
-    initializeAirDCPPSocket();
   }, []);
+
+  // 2. If available, init AirDC++ Socket with those settings
+  useEffect(() => {
+    if (!isEmpty(airDCPPSettings)) {
+      initializeAirDCPPSocket(airDCPPSettings);
+    }
+  }, [airDCPPSettings]);
+
+  // Method to init AirDC++ Socket with supplied settings
+  const initializeAirDCPPSocket = async (configuration) => {
+    const {
+      directConnect: {
+        client: { host },
+      },
+    } = configuration;
+    const initializedAirDCPPSocket = new AirDCPPSocket({
+      protocol: `${host.protocol}`,
+      hostname: `${host.hostname}`,
+    });
+
+    const socketConnectionInformation = await initializedAirDCPPSocket.connect(
+      `${host.username}`,
+      `${host.password}`,
+      true,
+    );
+    persistSettings({
+      ...airDCPPState,
+      airDCPPState: {
+        settings: configuration,
+        socket: initializedAirDCPPSocket,
+        socketConnectionInformation,
+      },
+    });
+  };
+
   // the Provider gives access to the context to its children
   return (
-    <AirDCPPSocketContext.Provider value={airDCPPConfiguration}>
+    <AirDCPPSocketContext.Provider value={airDCPPState}>
       {children}
     </AirDCPPSocketContext.Provider>
   );
 };
+const AirDCPPSocketContext = createContext({
+  airDCPPState: {},
+  saveSettings: () => {},
+});
 
 export { AirDCPPSocketContext, AirDCPPSocketContextProvider };