🏗️ Refactoring AcquisitionPanel

src/client/components/ComicDetail/AcquisitionPanel.tsx

@@ -14,6 +14,8 @@ import { RootState, SearchInstance } from "threetwo-ui-typings";
 import ellipsize from "ellipsize";
 import { Form, Field } from "react-final-form";
 import { isEmpty, isNil, map } from "lodash";
+import { useStore } from "../../store";
+import { useShallow } from "zustand/react/shallow";
 
 interface IAcquisitionPanelProps {
   query: any;
@@ -25,26 +27,38 @@ interface IAcquisitionPanelProps {
 export const AcquisitionPanel = (
   props: IAcquisitionPanelProps,
 ): ReactElement => {
+  const {
+    airDCPPSocketInstance,
+    airDCPPClientConfiguration,
+    airDCPPSessionInformation,
+  } = useStore(
+    useShallow((state) => ({
+      airDCPPSocketInstance: state.airDCPPSocketInstance,
+      airDCPPClientConfiguration: state.airDCPPClientConfiguration,
+      airDCPPSessionInformation: state.airDCPPSessionInformation,
+    })),
+  );
+  console.log("ulhas umlaut", airDCPPSessionInformation);
   const issueName = props.query.issue.name || "";
   // const { settings } = props;
   const sanitizedIssueName = issueName.replace(/[^a-zA-Z0-9 ]/g, " ");
 
   // Selectors for picking state
-  const airDCPPSearchResults = useSelector((state: RootState) => {
+  // const airDCPPSearchResults = useSelector((state: RootState) => {
-    return state.airdcpp.searchResults;
+  //   return state.airdcpp.searchResults;
-  });
+  // });
-  const isAirDCPPSearchInProgress = useSelector(
+  // const isAirDCPPSearchInProgress = useSelector(
-    (state: RootState) => state.airdcpp.isAirDCPPSearchInProgress,
+  //   (state: RootState) => state.airdcpp.isAirDCPPSearchInProgress,
-  );
+  // );
-  const searchInfo = useSelector(
+  // const searchInfo = useSelector(
-    (state: RootState) => state.airdcpp.searchInfo,
+  //   (state: RootState) => state.airdcpp.searchInfo,
-  );
+  // );
-  const searchInstance: SearchInstance = useSelector(
+  // const searchInstance: SearchInstance = useSelector(
-    (state: RootState) => state.airdcpp.searchInstance,
+  //   (state: RootState) => state.airdcpp.searchInstance,
-  );
+  // );
 
   // const settings = useSelector((state: RootState) => state.settings.data);
-  const airDCPPConfiguration = useContext(AirDCPPSocketContext);
+  // const airDCPPConfiguration = useContext(AirDCPPSocketContext);
 
   const [dcppQuery, setDcppQuery] = useState({});
 

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

@@ -1,38 +1,67 @@
 import React, { ReactElement, useEffect, useState, useContext } from "react";
 import { Form, Field } from "react-final-form";
-import { useDispatch } from "react-redux";
 import { isEmpty, isNil, isUndefined } from "lodash";
 import Select from "react-select";
 import { saveSettings } from "../../../actions/settings.actions";
-import { AirDCPPSocketContext } from "../../../context/AirDCPPSocket";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useStore } from "../../../store";
+import { useShallow } from "zustand/react/shallow";
+import axios from "axios";
 
 export const AirDCPPHubsForm = (airDCPPClientUserSettings): ReactElement => {
-  const dispatch = useDispatch();
+  const queryClient = useQueryClient();
-  const [hubList, setHubList] = useState([]);
-  const airDCPPConfiguration = useContext(AirDCPPSocketContext);
   const {
-    airDCPPState: { settings, socket },
+    airDCPPSocketInstance,
-  } = airDCPPConfiguration;
+    airDCPPClientConfiguration,
+    airDCPPSessionInformation,
+  } = useStore(
+    useShallow((state) => ({
+      airDCPPSocketInstance: state.airDCPPSocketInstance,
+      airDCPPClientConfiguration: state.airDCPPClientConfiguration,
+      airDCPPSessionInformation: state.airDCPPSessionInformation,
+    })),
+  );
 
-  useEffect(() => {
+  const { data, isLoading, isError } = useQuery({
-    (async () => {
+    queryKey: ["settings"],
-      if (!isEmpty(settings)) {
+    queryFn: async () =>
-        const hubs = await socket.get(`hubs`);
+      await axios({
-        const hubSelectionOptions = hubs.map(({ hub_url, identity }) => ({
+        url: "http://localhost:3000/api/settings/getAllSettings",
-          value: hub_url,
+        method: "GET",
-          label: identity.name,
+      }),
-        }));
+  });
 
-        setHubList(hubSelectionOptions);
+  console.log("Asd", data);
-      }
+  const {
-    })();
+    settings: {
-  }, []);
+      data: { directConnect },
+    },
+  } = data;
 
-  const onSubmit = (values) => {
+  const { data: hubs } = useQuery({
-    if (!isUndefined(values.hubs)) {
+    queryKey: [],
-      dispatch(saveSettings({ ...settings, hubs: values.hubs }, settings._id));
+    queryFn: async () => await airDCPPSocketInstance.get(`hubs`),
-    }
+    enabled: !!settings,
-  };
+  });
+  let hubList = {};
+  if (hubs) {
+    hubList = hubs.map(({ hub_url, identity }) => ({
+      value: hub_url,
+      label: identity.name,
+    }));
+  }
+
+  const { mutate } = useMutation({
+    mutationFn: async (values) =>
+      await axios({
+        url: `http://localhost:3000/api/settings/saveSettings`,
+        method: "POST",
+        data: { settingsPayload: values, settingsKey: "directConnect" },
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["settings"] });
+    },
+  });
 
   const validate = async () => {};
 
@@ -43,7 +72,7 @@ export const AirDCPPHubsForm = (airDCPPClientUserSettings): ReactElement => {
   return (
     <>
       <Form
-        onSubmit={onSubmit}
+        onSubmit={mutate}
         validate={validate}
         render={({ handleSubmit }) => (
           <form onSubmit={handleSubmit}>
@@ -82,12 +111,13 @@ export const AirDCPPHubsForm = (airDCPPClientUserSettings): ReactElement => {
       </div>
       <div className="box mt-3">
         <h6>Selected hubs</h6>
-        {settings.directConnect.client.hubs.map(({ value, label }) => (
+        {settings &&
-          <div key={value}>
+          settings?.directConnect?.client.hubs.map(({ value, label }) => (
-            <div>{label}</div>
+            <div key={value}>
-            <span className="is-size-7">{value}</span>
+              <div>{label}</div>
-          </div>
+              <span className="is-size-7">{value}</span>
-        ))}
+            </div>
+          ))}
       </div>
     </>
   );

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

@@ -2,8 +2,10 @@ import React, { ReactElement, useCallback } from "react";
 import { AirDCPPSettingsConfirmation } from "./AirDCPPSettingsConfirmation";
 import { isUndefined, isEmpty } from "lodash";
 import { ConnectionForm } from "../../shared/ConnectionForm/ConnectionForm";
-import { useStore } from "../../../store/index";
+import { initializeAirDCPPSocket, useStore } from "../../../store/index";
 import { useShallow } from "zustand/react/shallow";
+import { useMutation } from "@tanstack/react-query";
+import axios from "axios";
 
 export const AirDCPPSettingsForm = (): ReactElement => {
   // cherry-picking selectors for:
@@ -24,13 +26,27 @@ export const AirDCPPSettingsForm = (): ReactElement => {
       airDCPPSocketInstance: state.airDCPPSocketInstance,
     })),
   );
-  const onSubmit = useCallback(async (values) => {
+
-    try {
+  const { mutate } = useMutation({
-      // airDCPPSettings.setSettings(values);
+    mutationFn: async (values) =>
-    } catch (error) {
+      await axios({
-      console.log(error);
+        url: `http://localhost:3000/api/settings/saveSettings`,
-    }
+        method: "POST",
-  }, []);
+        data: { settingsPayload: values, settingsKey: "directConnect" },
+      }),
+    onSuccess: (values) => {
+      const {
+        data: {
+          directConnect: {
+            client: { host },
+          },
+        },
+      } = values;
+      console.log("asdas", host);
+      initializeAirDCPPSocket(host);
+    },
+  });
+
   const removeSettings = useCallback(async () => {
     // airDCPPSettings.setSettings({});
   }, []);
@@ -43,7 +59,7 @@ export const AirDCPPSettingsForm = (): ReactElement => {
     <>
       <ConnectionForm
         initialData={initFormData}
-        submitHandler={onSubmit}
+        submitHandler={mutate}
         formHeading={"Configure AirDC++"}
       />
 

src/client/components/Settings/Settings.tsx

@@ -14,7 +14,11 @@ export const Settings = (props: ISettingsProps): ReactElement => {
   const settingsContent = [
     {
       id: "adc-hubs",
-      content: <div key="adc-hubs">{/* <AirDCPPHubsForm /> */}</div>,
+      content: (
+        <div key="adc-hubs">
+          <AirDCPPHubsForm />
+        </div>
+      ),
     },
     {
       id: "adc-connection",

src/client/components/shared/Navbar.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { SearchBar } from "../GlobalSearchBar/SearchBar";
 import { DownloadProgressTick } from "../ComicDetail/DownloadProgressTick";
 import { Link } from "react-router-dom";
-import { isEmpty, isUndefined } from "lodash";
+import { isEmpty, isNil, isUndefined } from "lodash";
 import { format, fromUnixTime } from "date-fns";
 import { useStore } from "../../store/index";
 import { useShallow } from "zustand/react/shallow";
@@ -23,6 +23,7 @@ const Navbar: React.FunctionComponent = (props) => {
       importJobQueue: state.importJobQueue,
     })),
   );
+  console.log(airDCPPSessionInformation);
   //   const downloadProgressTick = useSelector(
   //     (state: RootState) => state.airdcpp.downloadProgressData,
   //   );
@@ -146,7 +147,7 @@ const Navbar: React.FunctionComponent = (props) => {
 
           {/* AirDC++ socket connection status */}
           <div className="navbar-item has-dropdown is-hoverable">
-            {airDCPPSocketConnected ? (
+            {!isUndefined(airDCPPSessionInformation.user) ? (
               <>
                 <a className="navbar-link is-arrowless has-text-success">
                   <i className="fa-solid fa-bolt"></i>
@@ -158,7 +159,9 @@ const Navbar: React.FunctionComponent = (props) => {
                     Last login was{" "}
                     <span className="tag">
                       {format(
-                        fromUnixTime(airDCPPSessionInformation.user.last_login),
+                        fromUnixTime(
+                          airDCPPSessionInformation?.user.last_login,
+                        ),
                         "dd MMMM, yyyy",
                       )}
                     </span>
@@ -178,7 +181,11 @@ const Navbar: React.FunctionComponent = (props) => {
                     </span>
                   </p>
 
-                  {/* <pre>{JSON.stringify(airDCPPSessionInfo, null, 2)}</pre> */}
+                  {
+                    <pre>
+                      {JSON.stringify(airDCPPSessionInformation, null, 2)}
+                    </pre>
+                  }
                 </div>
               </>
             ) : (

src/client/store/index.ts

@@ -69,7 +69,7 @@ export const useStore = create((set, get) => ({
 
 const { getState, setState } = useStore;
 
-// Socket.IO initialization
+/** Socket.IO initialization **/
 // 1. Fetch sessionId from localStorage
 const sessionId = localStorage.getItem("sessionId");
 // 2. socket.io instantiation
@@ -119,72 +119,81 @@ socketIOInstance.on("RESTORE_JOB_COUNTS_AFTER_SESSION_RESTORATION", (data) => {
  * @param configuration - credentials, and hostname details to init AirDC++ connection
  * @returns Initialized AirDC++ connection socket instance
  */
-const initializeAirDCPPSocket = async (configuration): Promise<any> => {
+export const initializeAirDCPPSocket = async (configuration): Promise<any> => {
-  console.log("[AirDCPP]: Initializing socket...");
+  try {
+    console.log("[AirDCPP]: Initializing socket...");
 
-  const initializedAirDCPPSocket = new AirDCPPSocket({
+    const initializedAirDCPPSocket = new AirDCPPSocket({
-    protocol: `${configuration.protocol}`,
+      protocol: `${configuration.protocol}`,
-    hostname: `${configuration.hostname}:${configuration.port}`,
+      hostname: `${configuration.hostname}:${configuration.port}`,
-    username: `${configuration.username}`,
+      username: `${configuration.username}`,
-    password: `${configuration.password}`,
+      password: `${configuration.password}`,
-  });
-
-  // Set up connect and disconnect handlers
-  initializedAirDCPPSocket.onConnected = (sessionInfo) => {
-    // update global state with socket connection status
-    setState({
-      airDCPPSocketConnected: true,
     });
-  };
-  initializedAirDCPPSocket.onDisconnected = async (reason, code, wasClean) => {
-    // update global state with socket connection status
-    setState({
-      disconnectionInfo: { reason, code, wasClean },
-      airDCPPSocketConnected: false,
-    });
-  };
-  // AirDC++ Socket-related connection and post-connection
-  // Attempt connection
-  const airDCPPSessionInformation = await initializedAirDCPPSocket.connect();
-  setState({
-    airDCPPSessionInformation,
-  });
 
-  // Set up event listeners
+    // Set up connect and disconnect handlers
-  initializedAirDCPPSocket.addListener(
+    initializedAirDCPPSocket.onConnected = (sessionInfo) => {
-    `queue`,
+      // update global state with socket connection status
-    "queue_bundle_tick",
-    async (downloadProgressData) => {
-      console.log(downloadProgressData);
       setState({
-        airDCPPDownloadTick: downloadProgressData,
+        airDCPPSocketConnected: true,
       });
-    },
+    };
-  );
+    initializedAirDCPPSocket.onDisconnected = async (
-  initializedAirDCPPSocket.addListener(
+      reason,
-    "queue",
+      code,
-    "queue_bundle_added",
+      wasClean,
-    async (data) => {
+    ) => {
-      console.log("JEMEN:", data);
+      // update global state with socket connection status
-    },
+      setState({
-  );
+        disconnectionInfo: { reason, code, wasClean },
+        airDCPPSocketConnected: false,
+      });
+    };
+    // AirDC++ Socket-related connection and post-connection
+    // Attempt connection
+    const airDCPPSessionInformation = await initializedAirDCPPSocket.connect();
+    console.log("zondhale", airDCPPSessionInformation);
+    setState({
+      airDCPPSessionInformation,
+    });
 
-  initializedAirDCPPSocket.addListener(
+    // Set up event listeners
-    `queue`,
+    initializedAirDCPPSocket.addListener(
-    "queue_bundle_status",
+      `queue`,
-    async (bundleData) => {
+      "queue_bundle_tick",
-      let count = 0;
+      async (downloadProgressData) => {
-      if (bundleData.status.completed && bundleData.status.downloaded) {
+        console.log(downloadProgressData);
-        // dispatch the action for raw import, with the metadata
+        setState({
-        if (count < 1) {
+          airDCPPDownloadTick: downloadProgressData,
-          console.log(`[AirDCPP]: Download complete.`);
+        });
+      },
+    );
+    initializedAirDCPPSocket.addListener(
+      "queue",
+      "queue_bundle_added",
+      async (data) => {
+        console.log("JEMEN:", data);
+      },
+    );
 
-          count += 1;
+    initializedAirDCPPSocket.addListener(
+      `queue`,
+      "queue_bundle_status",
+      async (bundleData) => {
+        let count = 0;
+        if (bundleData.status.completed && bundleData.status.downloaded) {
+          // dispatch the action for raw import, with the metadata
+          if (count < 1) {
+            console.log(`[AirDCPP]: Download complete.`);
+
+            count += 1;
+          }
         }
-      }
+      },
-    },
+    );
-  );
+    return initializedAirDCPPSocket;
-  return initializedAirDCPPSocket;
+  } catch (error) {
+    console.error(error);
+  }
 };
 
 // 1. get settings from mongo
@@ -193,10 +202,10 @@ const { data } = await axios({
   method: "GET",
 });
 
-const directConnectConfiguration = data?.directConnect.client.host;
+const directConnectConfiguration = data?.directConnect?.client.host;
 
 // 2. If available, init AirDC++ Socket with those settings
-if (!isEmpty(directConnectConfiguration)) {
+if (!isEmpty(data)) {
   const airDCPPSocketInstance = await initializeAirDCPPSocket(
     directConnectConfiguration,
   );
@@ -204,6 +213,8 @@ if (!isEmpty(directConnectConfiguration)) {
     airDCPPSocketInstance,
     airDCPPClientConfiguration: directConnectConfiguration,
   });
+} else {
+  console.log("problem");
 }
 
 console.log("connected?", getState());