🔧 Refactored AirDC++ init in store

src/client/components/ComicDetail/AcquisitionPanel.tsx

@@ -10,6 +10,7 @@ import { useStore } from "../../store";
 import { useShallow } from "zustand/react/shallow";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import axios from "axios";
+import { AIRDCPP_SERVICE_BASE_URI } from "../../constants/endpoints";
 
 interface IAcquisitionPanelProps {
   query: any;
@@ -21,9 +22,8 @@ interface IAcquisitionPanelProps {
 export const AcquisitionPanel = (
   props: IAcquisitionPanelProps,
 ): ReactElement => {
-  const { airDCPPSocketInstance, socketIOInstance } = useStore(
+  const { socketIOInstance } = useStore(
     useShallow((state) => ({
-      airDCPPSocketInstance: state.airDCPPSocketInstance,
       socketIOInstance: state.socketIOInstance,
     })),
   );
@@ -45,12 +45,33 @@ export const AcquisitionPanel = (
     // Use the already connected socket instance to emit events
     socketIOInstance.emit("initiateSearch", searchQuery);
   };
+
+  const {
+    data: settings,
+    isLoading,
+    isError,
+  } = useQuery({
+    queryKey: ["settings"],
+    queryFn: async () =>
+      await axios({
+        url: "http://localhost:3000/api/settings/getAllSettings",
+        method: "GET",
+      }),
+  });
   /**
    * Get the hubs list from an AirDCPP Socket
    */
   const { data: hubs } = useQuery({
     queryKey: ["hubs"],
-    queryFn: async () => await airDCPPSocketInstance.get(`hubs`),
+    queryFn: async () =>
+      await axios({
+        url: `${AIRDCPP_SERVICE_BASE_URI}/getHubs`,
+        method: "POST",
+        data: {
+          host: settings?.data.directConnect?.client?.host,
+        },
+      }),
+    enabled: !isEmpty(settings?.data.directConnect?.client?.host),
   });
   const { comicObjectId } = props;
   const issueName = props.query.issue.name || "";
@@ -75,7 +96,7 @@ export const AcquisitionPanel = (
         pattern: `${sanitizedIssueName.replace(/#/g, "")}`,
         extensions: ["cbz", "cbr", "cb7"],
       },
-      hub_urls: map(hubs, (item) => item.value),
+      hub_urls: map(hubs?.data, (item) => item.value),
       priority: 5,
     };
     setDcppQuery(dcppSearchQuery);
@@ -116,7 +137,7 @@ export const AcquisitionPanel = (
     });
   });
 
-  socketIOInstance.on("searchResultUpdated", (groupedResult) => {
+  socketIOInstance.on("searchResultUpdated", (groupedResult: SearchResult) => {
     // ...update properties of the existing result in the UI
     const bundleToUpdateIndex = airDCPPSearchResults?.findIndex(
       (bundle) => bundle.result.id === groupedResult.result.id,
@@ -176,7 +197,7 @@ export const AcquisitionPanel = (
         pattern: `${searchQuery.issueName}`,
         extensions: ["cbz", "cbr", "cb7"],
       },
-      hub_urls: map(hubs, (hub) => hub.hub_url),
+      hub_urls: map(hubs?.data, (hub) => hub.hub_url),
       priority: 5,
     };
 
@@ -186,7 +207,7 @@ export const AcquisitionPanel = (
   return (
     <>
       <div className="mt-5">
-        {!isEmpty(airDCPPSocketInstance) ? (
+        {!isEmpty(hubs?.data) ? (
           <Form
             onSubmit={getDCPPSearchResults}
             initialValues={{
@@ -251,7 +272,7 @@ export const AcquisitionPanel = (
               <dl>
                 <dt>
                   <div className="mb-1">
-                    {hubs.map((value, idx) => (
+                    {hubs?.data.map((value, idx) => (
                       <span className="tag is-warning" key={idx}>
                         {value.identity.name}
                       </span>

src/client/components/ComicDetail/DownloadsPanel.tsx

@@ -59,7 +59,6 @@ export const DownloadsPanel = (
         },
       }),
   });
-
   const getBundles = async (comicObject) => {
     if (comicObject?.data.acquisition.directconnect) {
       const filteredBundles =
@@ -94,10 +93,6 @@ export const DownloadsPanel = (
 
   return (
     <div className="columns is-multiline">
-      {!isEmpty(airDCPPSocketInstance) &&
-        !isEmpty(bundles) &&
-        activeTab === "directconnect" && <AirDCPPBundles data={bundles} />}
-
       <div>
         <div className="sm:hidden">
           <label htmlFor="Download Type" className="sr-only">
@@ -141,6 +136,9 @@ export const DownloadsPanel = (
       </div>
 
       {activeTab === "torrents" && <TorrentDownloads data={torrentDetails} />}
+      {!isEmpty(airDCPPSocketInstance) &&
+        !isEmpty(bundles) &&
+        activeTab === "directconnect" && <AirDCPPBundles data={bundles} />}
     </div>
   );
 };

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

@@ -3,20 +3,11 @@ import { Form, Field } from "react-final-form";
 import { isEmpty, isNil, isUndefined } from "lodash";
 import Select from "react-select";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { useStore } from "../../../store";
 import axios from "axios";
+import { AIRDCPP_SERVICE_BASE_URI } from "../../../constants/endpoints";
 
 export const AirDCPPHubsForm = (): ReactElement => {
   const queryClient = useQueryClient();
-  const {
-    airDCPPSocketInstance,
-    airDCPPClientConfiguration,
-    airDCPPSessionInformation,
-  } = useStore((state) => ({
-    airDCPPSocketInstance: state.airDCPPSocketInstance,
-    airDCPPClientConfiguration: state.airDCPPClientConfiguration,
-    airDCPPSessionInformation: state.airDCPPSessionInformation,
-  }));
 
   const {
     data: settings,
@@ -36,11 +27,19 @@ export const AirDCPPHubsForm = (): ReactElement => {
    */
   const { data: hubs } = useQuery({
     queryKey: ["hubs"],
-    queryFn: async () => await airDCPPSocketInstance.get(`hubs`),
+    queryFn: async () =>
+      await axios({
+        url: `${AIRDCPP_SERVICE_BASE_URI}/getHubs`,
+        method: "POST",
+        data: {
+          host: settings?.data.directConnect?.client?.host,
+        },
+      }),
+    enabled: !isEmpty(settings?.data.directConnect?.client?.host),
   });
   let hubList = {};
   if (!isNil(hubs)) {
-    hubList = hubs.map(({ hub_url, identity }) => ({
+    hubList = hubs?.data.map(({ hub_url, identity }) => ({
       value: hub_url,
       label: identity.name,
     }));
@@ -101,7 +100,10 @@ export const AirDCPPHubsForm = (): ReactElement => {
         />
       ) : (
         <>
-          <article className="message">
+          <article
+            role="alert"
+            className="mt-4 rounded-lg max-w-screen-md border-s-4 border-yellow-500 bg-yellow-50 p-4 dark:border-s-4 dark:border-yellow-600 dark:bg-yellow-300 dark:text-slate-600"
+          >
             <div className="message-body">
               No configured hubs detected in AirDC++. <br />
               Configure to a hub in AirDC++ and then select a default hub here.

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

@@ -1,76 +1,65 @@
-import React, { ReactElement, useCallback } from "react";
+import React, { useState, useEffect } from "react";
 import { AirDCPPSettingsConfirmation } from "./AirDCPPSettingsConfirmation";
-import { isUndefined, isEmpty } from "lodash";
 import { ConnectionForm } from "../../shared/ConnectionForm/ConnectionForm";
-import { initializeAirDCPPSocket, useStore } from "../../../store/index";
+import { useMutation, useQuery } from "@tanstack/react-query";
-import { useShallow } from "zustand/react/shallow";
-import { useMutation } from "@tanstack/react-query";
 import axios from "axios";
+import {
+  AIRDCPP_SERVICE_BASE_URI,
+  SETTINGS_SERVICE_BASE_URI,
+} from "../../../constants/endpoints";
 
-export const AirDCPPSettingsForm = (): ReactElement => {
+export const AirDCPPSettingsForm = () => {
-  // cherry-picking selectors for:
+  const [airDCPPSessionInformation, setAirDCPPSessionInformation] =
-  // 1. initial values for the form
+    useState(null);
-  // 2. If initial values are present, get the socket information to display
+  // Fetching all settings
-  const { setState } = useStore;
+  const { data: settingsData, isSuccess: settingsSuccess } = useQuery({
-  const {
+    queryKey: ["airDCPPSettings"],
-    airDCPPSocketConnected,
+    queryFn: () => axios.get(`${SETTINGS_SERVICE_BASE_URI}/getAllSettings`),
-    airDCPPDisconnectionInfo,
+  });
-    airDCPPSessionInformation,
-    airDCPPClientConfiguration,
-    airDCPPSocketInstance,
-    setAirDCPPSocketInstance,
-  } = useStore(
-    useShallow((state) => ({
-      airDCPPSocketConnected: state.airDCPPSocketConnected,
-      airDCPPDisconnectionInfo: state.airDCPPDisconnectionInfo,
-      airDCPPClientConfiguration: state.airDCPPClientConfiguration,
-      airDCPPSessionInformation: state.airDCPPSessionInformation,
-      airDCPPSocketInstance: state.airDCPPSocketInstance,
-      setAirDCPPSocketInstance: state.setAirDCPPSocketInstance,
-    })),
-  );
 
-  /**
+  // Fetch session information
-   * Mutation to update settings and subsequently initialize
+  const fetchSessionInfo = (host) => {
-   * AirDC++ socket with those settings
+    return axios.post(`${AIRDCPP_SERVICE_BASE_URI}/initialize`, { host });
-   */
+  };
+
+  // Use effect to trigger side effects on settings fetch success
+  useEffect(() => {
+    if (settingsSuccess && settingsData?.data?.directConnect?.client?.host) {
+      const host = settingsData.data.directConnect.client.host;
+      fetchSessionInfo(host).then((response) => {
+        setAirDCPPSessionInformation(response.data);
+      });
+    }
+  }, [settingsSuccess, settingsData]);
+
+  // Handle setting update and subsequent AirDC++ initialization
   const { mutate } = useMutation({
-    mutationFn: async (values) =>
+    mutationFn: (values) => {
-      await axios({
+      console.log(values);
-        url: `http://localhost:3000/api/settings/saveSettings`,
+      return axios.post("http://localhost:3000/api/settings/saveSettings", {
-        method: "POST",
+        settingsPayload: values,
-        data: { settingsPayload: values, settingsKey: "directConnect" },
+        settingsKey: "directConnect",
-      }),
-    onSuccess: async (values) => {
-      const {
-        data: {
-          directConnect: {
-            client: { host },
-          },
-        },
-      } = values;
-      const dcppSocketInstance = await initializeAirDCPPSocket(host);
-      setState({
-        airDCPPClientConfiguration: host,
-        airDCPPSocketInstance: dcppSocketInstance,
       });
     },
+    onSuccess: async (response) => {
+      const host = response?.data?.directConnect?.client?.host;
+      if (host) {
+        const response = await fetchSessionInfo(host);
+        setAirDCPPSessionInformation(response.data);
+        // setState({ airDCPPClientConfiguration: host });
+      }
+    },
   });
-  const deleteSettingsMutation = useMutation(
+
-    async () =>
+  const deleteSettingsMutation = useMutation(() =>
-      await axios.post("http://localhost:3000/api/settings/saveSettings", {
+    axios.post("http://localhost:3000/api/settings/saveSettings", {
-        settingsPayload: {},
+      settingsPayload: {},
-        settingsKey: "directConnect",
+      settingsKey: "directConnect",
-      }),
+    }),
   );
 
-  // const removeSettings = useCallback(async () => {
+  const initFormData = settingsData?.data?.directConnect?.client?.host ?? {};
-  //   // airDCPPSettings.setSettings({});
+
-  // }, []);
-  //
-  const initFormData = !isUndefined(airDCPPClientConfiguration)
-    ? airDCPPClientConfiguration
-    : {};
   return (
     <>
       <ConnectionForm
@@ -79,13 +68,12 @@ export const AirDCPPSettingsForm = (): ReactElement => {
         formHeading={"Configure AirDC++"}
       />
 
-      {!isEmpty(airDCPPSessionInformation) ? (
+      {airDCPPSessionInformation && (
         <AirDCPPSettingsConfirmation settings={airDCPPSessionInformation} />
-      ) : null}
+      )}
 
-      {!isEmpty(airDCPPClientConfiguration) ? (
+      {settingsData?.data && (
         <p className="control mt-4">
-          as
           <button
             className="button is-danger"
             onClick={() => deleteSettingsMutation.mutate()}
@@ -93,7 +81,7 @@ export const AirDCPPSettingsForm = (): ReactElement => {
             Delete
           </button>
         </p>
-      ) : null}
+      )}
     </>
   );
 };

src/client/constants/endpoints.ts

@@ -104,3 +104,10 @@ export const TORRENT_JOB_SERVICE_BASE_URI = hostURIBuilder({
   port: "3000",
   apiPath: `/api/torrentjobs`,
 });
+
+export const AIRDCPP_SERVICE_BASE_URI = hostURIBuilder({
+  protocol: "http",
+  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
+  port: "3000",
+  apiPath: `/api/airdcpp`,
+});

src/client/shared/utils/metadata.utils.ts

@@ -43,7 +43,7 @@ export const determineCoverFile = (data): any => {
     },
   };
   // comicvine
-  if (!isUndefined(data.comicvine)) {
+  if (!isEmpty(data.comicvine)) {
     coverFile.comicvine.url = data?.comicvine?.image.small_url;
     coverFile.comicvine.issueName = data.comicvine.name;
     coverFile.comicvine.publisher = data.comicvine.publisher.name;

src/client/store/index.ts

@@ -3,31 +3,15 @@ import { isNil } from "lodash";
 import io from "socket.io-client";
 import { SOCKET_BASE_URI } from "../constants/endpoints";
 import { produce } from "immer";
-import AirDCPPSocket from "../services/DcppSearchService";
-import axios from "axios";
 import { QueryClient } from "@tanstack/react-query";
 
 /*  Broadly, this file sets up:
  *    1. The zustand-based global client state
  *    2. socket.io client
- *    3. AirDC++ websocket connection
  */
 export const useStore = create((set, get) => ({
-  // AirDC++ state
-  airDCPPSocketInstance: {},
-  airDCPPSocketConnected: false,
-  airDCPPDisconnectionInfo: {},
-  airDCPPClientConfiguration: {},
-  airDCPPSessionInformation: {},
-  setAirDCPPSocketConnectionStatus: () =>
-    set((value) => ({
-      airDCPPSocketConnected: value,
-    })),
-  airDCPPDownloadTick: {},
-  airDCPPTransfers: {},
   // Socket.io state
   socketIOInstance: {},
-
   // ComicVine Scraping status
   comicvine: {
     scrapingStatus: "",
@@ -126,11 +110,12 @@ socketIOInstance.on("RESTORE_JOB_COUNTS_AFTER_SESSION_RESTORATION", (data) => {
 //      by the LS_COVER_EXTRACTED/LS_COVER_EXTRACTION_FAILED events
 socketIOInstance.on("LS_COVER_EXTRACTED", (data) => {
   const { completedJobCount, importResult } = data;
+  console.log(importResult);
   setState((state) => ({
     importJobQueue: {
       ...state.importJobQueue,
       successfulJobCount: completedJobCount,
-      mostRecentImport: importResult.rawFileDetails.name,
+      mostRecentImport: importResult.data.rawFileDetails.name,
     },
   }));
 });
@@ -154,7 +139,6 @@ socketIOInstance.on("LS_IMPORT_QUEUE_DRAINED", (data) => {
       status: "drained",
     },
   }));
-  console.log("a", queryClient);
   queryClient.invalidateQueries({ queryKey: ["allImportJobResults"] });
 });
 
@@ -167,105 +151,3 @@ socketIOInstance.on("CV_SCRAPING_STATUS", (data) => {
     },
   }));
 });
-
-/**
- * Method to init AirDC++ Socket with supplied settings
- * @param configuration - credentials, and hostname details to init AirDC++ connection
- * @returns Initialized AirDC++ connection socket instance
- */
-export const initializeAirDCPPSocket = async (configuration): Promise<any> => {
-  try {
-    console.log("[AirDCPP]: Initializing socket...");
-
-    const initializedAirDCPPSocket = new AirDCPPSocket({
-      protocol: `${configuration.protocol}`,
-      hostname: `${configuration.hostname}:${configuration.port}`,
-      username: `${configuration.username}`,
-      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
-    initializedAirDCPPSocket.addListener(
-      `queue`,
-      "queue_bundle_tick",
-      async (downloadProgressData) => {
-        console.log(downloadProgressData);
-        setState({
-          airDCPPDownloadTick: downloadProgressData,
-        });
-      },
-    );
-    initializedAirDCPPSocket.addListener(
-      "queue",
-      "queue_bundle_added",
-      async (data) => {
-        console.log("JEMEN:", data);
-      },
-    );
-
-    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;
-  } catch (error) {
-    console.error(error);
-  }
-};
-
-// 1. get settings from mongo
-const { data } = await axios({
-  url: "http://localhost:3000/api/settings/getAllSettings",
-  method: "GET",
-});
-
-const directConnectConfiguration = data?.directConnect?.client.host;
-
-// 2. If available, init AirDC++ Socket with those settings
-if (!isNil(directConnectConfiguration)) {
-  const airDCPPSocketInstance = await initializeAirDCPPSocket(
-    directConnectConfiguration,
-  );
-  setState({
-    airDCPPSocketInstance,
-    airDCPPClientConfiguration: directConnectConfiguration,
-  });
-} else {
-  console.log("problem");
-}