🔧 Fixing state and context issues WIP for ADCPP socket

src/client/actions/settings.actions.tsx

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

src/client/components/AirDCPPSettings/AirDCPPHubsForm.tsx

@@ -30,7 +30,7 @@ export const AirDCPPHubsForm = (airDCPPClientUserSettings): ReactElement => {
 
   const onSubmit = (values) => {
     if (!isUndefined(values.hubs)) {
-      dispatch(saveSettings({ hubs: values.hubs }, settings._id));
+      dispatch(saveSettings({ ...settings, hubs: values.hubs }, settings._id));
     }
   };
 

src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx

@@ -26,7 +26,6 @@ export const AirDCPPSettingsForm = (): ReactElement => {
     dispatch(deleteSettings());
   }, []);
   const validate = async () => {};
-  console.log(airDCPPSettings.airDCPPState);
   const initFormData = !isUndefined(
     airDCPPSettings.airDCPPState.settings.directConnect,
   )

src/client/components/App.tsx

@@ -30,7 +30,8 @@ const AirDCPPSocketComponent = (): ReactElement => {
     const foo = async () => {
       if (
         !isUndefined(airDCPPConfiguration.airDCPPState) &&
-        !isEmpty(airDCPPConfiguration.airDCPPState.settings)
+        !isEmpty(airDCPPConfiguration.airDCPPState.settings) &&
+        !isEmpty(airDCPPConfiguration.airDCPPState.socket)
       ) {
         await airDCPPConfiguration.airDCPPState.socket.addListener(
           "queue",

src/client/components/ComicDetail/DownloadsPanel.tsx

@@ -25,7 +25,11 @@ export const DownloadsPanel = (
 
   // AirDCPP Socket initialization
   const userSettings = useSelector((state: RootState) => state.settings.data);
-  const { ADCPPSocket } = useContext(AirDCPPSocketContext);
+  const airDCPPConfiguration = useContext(AirDCPPSocketContext);
+
+  const {
+    airDCPPState: { socket, settings },
+  } = airDCPPConfiguration;
 
   const dispatch = useDispatch();
   // Fetch the downloaded files and currently-downloading file(s) from AirDC++
@@ -33,16 +37,16 @@ export const DownloadsPanel = (
     try {
       if (!isEmpty(userSettings)) {
         dispatch(
-          getBundlesForComic(props.comicObjectId, ADCPPSocket, {
-            username: `${userSettings.directConnect.client.host.username}`,
-            password: `${userSettings.directConnect.client.host.password}`,
+          getBundlesForComic(props.comicObjectId, socket, {
+            username: `${settings.directConnect.client.host.username}`,
+            password: `${settings.directConnect.client.host.password}`,
           }),
         );
       }
     } catch (error) {
       throw new Error(error);
     }
-  }, [dispatch]);
+  }, [dispatch, airDCPPConfiguration]);
 
   const Bundles = (props) => {
     return !isEmpty(props.data) ? (
@@ -81,7 +85,7 @@ export const DownloadsPanel = (
   return !isNil(props.data) ? (
     <>
       <div className="columns is-multiline">
-        {!isEmpty(ADCPPSocket) ? (
+        {!isEmpty(socket) ? (
           <Bundles data={bundles} />
         ) : (
           <div className="column is-three-fifths">

src/client/components/Settings.tsx

@@ -12,22 +12,22 @@ export const Settings = (props: ISettingsProps): ReactElement => {
   const settingsContent = [
     {
       id: "adc-hubs",
-      content: <>{<AirDCPPHubsForm />}</>,
+      content: <div key="adc-hubs">{<AirDCPPHubsForm />}</div>,
     },
     {
       id: "adc-connection",
       content: (
-        <>
+        <div key="adc-connection">
           <AirDCPPSettingsForm />
-        </>
+        </div>
       ),
     },
     {
       id: "flushdb",
       content: (
-        <>
+        <div key="flushdb">
           <SystemSettingsForm />
-        </>
+        </div>
       ),
     },
   ];
@@ -46,7 +46,7 @@ export const Settings = (props: ISettingsProps): ReactElement => {
                     <ul className="menu-list" key={settingObject.id}>
                       {map(settingObject.children, (item, idx) => {
                         return (
-                          <li key={item.id}>
+                          <li key={idx}>
                             <a
                               className={
                                 item.id.toString() === active ? "is-active" : ""

src/client/context/AirDCPPSocket.tsx

@@ -1,4 +1,4 @@
-import { isEmpty } from "lodash";
+import { isEmpty, isUndefined } from "lodash";
 import React, { createContext, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { getSettings } from "../actions/settings.actions";
@@ -18,7 +18,11 @@ const AirDCPPSocketContextProvider = ({ children }) => {
   };
   // 1. default zero-state for AirDC++ configuration
   const initState = {
-    airDCPPState: { settings: {}, socket: {}, socketConnectionInformation: {} },
+    airDCPPState: {
+      settings: {},
+      socket: {},
+      socketConnectionInformation: {},
+    },
     setSettings: setSettings,
   };
   const dispatch = useDispatch();
@@ -41,6 +45,7 @@ const AirDCPPSocketContextProvider = ({ children }) => {
 
   // Method to init AirDC++ Socket with supplied settings
   const initializeAirDCPPSocket = async (configuration) => {
+    console.log("[AirDCPP]: Initializing socket...");
     const {
       directConnect: {
         client: { host },