🔧 Fixing state and context issues WIP for ADCPP socket

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" : ""