🦃 Thanksgiving Day bug fixes

src/client/components/Settings/AirDCPPSettings/AirDCPPHubsForm.tsx

@@ -8,19 +8,17 @@ import { useStore } from "../../../store";
 import { useShallow } from "zustand/react/shallow";
 import axios from "axios";
 
-export const AirDCPPHubsForm = (airDCPPClientUserSettings): ReactElement => {
+export const AirDCPPHubsForm = (): ReactElement => {
   const queryClient = useQueryClient();
   const {
     airDCPPSocketInstance,
     airDCPPClientConfiguration,
     airDCPPSessionInformation,
-  } = useStore(
-    useShallow((state) => ({
-      airDCPPSocketInstance: state.airDCPPSocketInstance,
-      airDCPPClientConfiguration: state.airDCPPClientConfiguration,
-      airDCPPSessionInformation: state.airDCPPSessionInformation,
-    })),
-  );
+  } = useStore((state) => ({
+    airDCPPSocketInstance: state.airDCPPSocketInstance,
+    airDCPPClientConfiguration: state.airDCPPClientConfiguration,
+    airDCPPSessionInformation: state.airDCPPSessionInformation,
+  }));
 
   const {
     data: settings,
@@ -35,17 +33,12 @@ export const AirDCPPHubsForm = (airDCPPClientUserSettings): ReactElement => {
       }),
   });
 
-  console.log("Asd", settings);
-  // const {
-  //   settings: {
-  //     data: { directConnect },
-  //   },
-  // } = data;
-
+  /**
+   * Get the hubs list from an AirDCPP Socket
+   */
   const { data: hubs } = useQuery({
     queryKey: [],
     queryFn: async () => await airDCPPSocketInstance.get(`hubs`),
-    enabled: !!settings,
   });
   let hubList = {};
   if (hubs) {
@@ -105,24 +98,28 @@ export const AirDCPPHubsForm = (airDCPPClientUserSettings): ReactElement => {
           </form>
         )}
       />
-      <div className="mt-4">
-        <article className="message is-warning">
-          <div className="message-body is-size-6 is-family-secondary">
-            Your selection in the dropdown <strong>will replace</strong> the
-            existing selection.
+
+      {settings?.directConnect?.client.hubs ? (
+        <>
+          <div className="mt-4">
+            <article className="message is-warning">
+              <div className="message-body is-size-6 is-family-secondary">
+                Your selection in the dropdown <strong>will replace</strong> the
+                existing selection.
+              </div>
+            </article>
           </div>
-        </article>
-      </div>
-      <div className="box mt-3">
-        <h6>Selected hubs</h6>
-        {settings &&
-          settings?.directConnect?.client.hubs.map(({ value, label }) => (
-            <div key={value}>
-              <div>{label}</div>
-              <span className="is-size-7">{value}</span>
-            </div>
-          ))}
-      </div>
+          <div className="box mt-3">
+            <h6>Selected hubs</h6>
+            {settings?.directConnect?.client.hubs.map(({ value, label }) => (
+              <div key={value}>
+                <div>{label}</div>
+                <span className="is-size-7">{value}</span>
+              </div>
+            ))}
+          </div>
+        </>
+      ) : null}
     </>
   );
 };

src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx

@@ -11,12 +11,14 @@ export const AirDCPPSettingsForm = (): ReactElement => {
   // cherry-picking selectors for:
   // 1. initial values for the form
   // 2. If initial values are present, get the socket information to display
+  const { setState } = useStore;
   const {
     airDCPPSocketConnected,
     airDCPPDisconnectionInfo,
     airDCPPSessionInformation,
     airDCPPClientConfiguration,
     airDCPPSocketInstance,
+    setAirDCPPSocketInstance,
   } = useStore(
     useShallow((state) => ({
       airDCPPSocketConnected: state.airDCPPSocketConnected,
@@ -24,6 +26,7 @@ export const AirDCPPSettingsForm = (): ReactElement => {
       airDCPPClientConfiguration: state.airDCPPClientConfiguration,
       airDCPPSessionInformation: state.airDCPPSessionInformation,
       airDCPPSocketInstance: state.airDCPPSocketInstance,
+      setAirDCPPSocketInstance: state.setAirDCPPSocketInstance,
     })),
   );
 
@@ -38,7 +41,7 @@ export const AirDCPPSettingsForm = (): ReactElement => {
         method: "POST",
         data: { settingsPayload: values, settingsKey: "directConnect" },
       }),
-    onSuccess: (values) => {
+    onSuccess: async (values) => {
       const {
         data: {
           directConnect: {
@@ -46,7 +49,9 @@ export const AirDCPPSettingsForm = (): ReactElement => {
           },
         },
       } = values;
-      initializeAirDCPPSocket(host);
+      const dcppSocketInstance = await initializeAirDCPPSocket(host);
+      console.log("jogiya", dcppSocketInstance);
+      setState({ airDCPPSocketInstance: dcppSocketInstance });
     },
   });
   const deleteSettingsMutation = useMutation(

src/client/components/shared/Navbar.tsx

@@ -23,7 +23,6 @@ const Navbar: React.FunctionComponent = (props) => {
       importJobQueue: state.importJobQueue,
     })),
   );
-  console.log(airDCPPSessionInformation);
   //   const downloadProgressTick = useSelector(
   //     (state: RootState) => state.airdcpp.downloadProgressData,
   //   );

src/client/store/index.ts

@@ -1,5 +1,5 @@
 import { create } from "zustand";
-import { isEmpty, isNil } from "lodash";
+import { isEmpty, isNil, isUndefined } from "lodash";
 import io from "socket.io-client";
 import { SOCKET_BASE_URI } from "../constants/endpoints";
 import { produce } from "immer";
@@ -151,7 +151,6 @@ export const initializeAirDCPPSocket = async (configuration): Promise<any> => {
     // AirDC++ Socket-related connection and post-connection
     // Attempt connection
     const airDCPPSessionInformation = await initializedAirDCPPSocket.connect();
-    console.log("zondhale", airDCPPSessionInformation);
     setState({
       airDCPPSessionInformation,
     });