🔄 Moved socket init code higher up into ComicDetail parent component

src/client/components/AcquisitionPanel.tsx

@@ -9,8 +9,6 @@ import { RootState, SearchInstance } from "threetwo-ui-typings";
 import ellipsize from "ellipsize";
 import { isEmpty, isNil, isUndefined, map } from "lodash";
 import { AirDCPPSocketContext } from "../context/AirDCPPSocket";
-import { getSettings } from "../actions/settings.actions";
-import AirDCPPSocket from "../services/DcppSearchService";
 interface IAcquisitionPanelProps {
   comicBookMetadata: any;
 }
@@ -38,23 +36,11 @@ export const AcquisitionPanel = (
   );
 
   const userSettings = useSelector((state: RootState) => state.settings.data);
-  const { ADCPPSocket, setADCPPSocket } = useContext(AirDCPPSocketContext);
+  const { ADCPPSocket } = useContext(AirDCPPSocketContext);
   const dispatch = useDispatch();
 
-  useEffect(() => {
-    dispatch(getSettings());
-  }, []);
-
-  if (isEmpty(ADCPPSocket) && !isEmpty(userSettings)) {
-    setADCPPSocket(
-      new AirDCPPSocket({
-        hostname: `${userSettings.directConnect.client.hostname}`,
-      }),
-    );
-  }
-
   const getDCPPSearchResults = useCallback(
-    (searchQuery) => {
+    async (searchQuery) => {
       dispatch(
         search(searchQuery, ADCPPSocket, {
           username: `${userSettings.directConnect.client.username}`,
@@ -65,6 +51,7 @@ export const AcquisitionPanel = (
     [dispatch, ADCPPSocket],
   );
 
+  // AirDC++ search query
   const dcppQuery = {
     query: {
       pattern: `${sanitizedVolumeName.replace(/#/g, "")}`,
@@ -76,6 +63,7 @@ export const AcquisitionPanel = (
     priority: 5,
   };
 
+  // download via AirDC++
   const downloadDCPPResult = useCallback(
     (searchInstanceId, resultId, comicBookObjectId) => {
       dispatch(
@@ -84,17 +72,25 @@ export const AcquisitionPanel = (
           resultId,
           comicBookObjectId,
           ADCPPSocket,
+          {
+            username: `${userSettings.directConnect.client.username}`,
+            password: `${userSettings.directConnect.client.password}`,
+          },
         ),
       );
       // this is to update the download count badge on the downloads tab
-      dispatch(getBundlesForComic(comicBookObjectId, ADCPPSocket));
+      dispatch(
+        getBundlesForComic(comicBookObjectId, ADCPPSocket, {
+          username: `${userSettings.directConnect.client.username}`,
+          password: `${userSettings.directConnect.client.password}`,
+        }),
+      );
     },
     [dispatch],
   );
 
   return (
     <>
-      {JSON.stringify(ADCPPSocket)}
       <div className="comic-detail columns">
         {!isEmpty(ADCPPSocket) ? (
           <div className="column is-one-fifth">

src/client/components/AirDCPPSettingsForm.tsx

@@ -17,16 +17,15 @@ export const AirDCPPSettingsForm = (): ReactElement => {
     (state: RootState) => state.settings.data,
   );
 
-  const { ADCPPSocket, setADCPPSocket } = useContext(AirDCPPSocketContext);
+  const { setADCPPSocket } = useContext(AirDCPPSocketContext);
   const dispatch = useDispatch();
   useEffect(() => {
     dispatch(getSettings());
   }, []);
   const onSubmit = async (values) => {
     try {
-      const fqdn = values.protocol + values.hostname;
       const airDCPPResponse = await axios({
-        url: `${fqdn}/api/v1/sessions/authorize`,
+        url: `${values.protocol}://${values.hostname}/api/v1/sessions/authorize`,
         method: "POST",
         data: {
           username: values.username,
@@ -41,7 +40,7 @@ export const AirDCPPSettingsForm = (): ReactElement => {
           }),
         );
         const hubList = await axios({
-          url: `${fqdn}/api/v1/hubs`,
+          url: `${values.protocol}://${values.hostname}/api/v1/hubs`,
           method: "GET",
           params: {
             username: values.username,
@@ -80,8 +79,8 @@ export const AirDCPPSettingsForm = (): ReactElement => {
                 <span className="select">
                   <Field name="protocol" component="select">
                     <option>Protocol</option>
-                    <option value="http://">http://</option>
-                    <option value="https://">https://</option>
+                    <option value="http">http://</option>
+                    <option value="https">https://</option>
                   </Field>
                 </span>
               </p>

src/client/components/ComicDetail.tsx

@@ -1,4 +1,10 @@
-import React, { useState, useEffect, useCallback, ReactElement } from "react";
+import React, {
+  useState,
+  useEffect,
+  useCallback,
+  ReactElement,
+  useContext,
+} from "react";
 import PropTypes from "prop-types";
 import { useParams } from "react-router-dom";
 import Card from "./Carda";
@@ -30,6 +36,9 @@ import {
 } from "../shared/utils/formatting.utils";
 import Sticky from "react-stickynode";
 import { IMPORT_SERVICE_HOST } from "../constants/endpoints";
+import { getSettings } from "../actions/settings.actions";
+import { AirDCPPSocketContext } from "../context/AirDCPPSocket";
+import AirDCPPSocket from "../services/DcppSearchService";
 
 type ComicDetailProps = {};
 /**
@@ -67,12 +76,27 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
   );
 
   const { comicObjectId } = useParams<{ comicObjectId: string }>();
+  const userSettings = useSelector((state: RootState) => state.settings.data);
+  const { ADCPPSocket, setADCPPSocket } = useContext(AirDCPPSocketContext);
   const dispatch = useDispatch();
 
   useEffect(() => {
     dispatch(getComicBookDetailById(comicObjectId));
+    dispatch(getSettings());
   }, [page, dispatch]);
 
+  useEffect(() => {
+    if (isEmpty(ADCPPSocket) && !isEmpty(userSettings)) {
+      console.log(userSettings.directConnect.client.hostname);
+      setADCPPSocket(
+        new AirDCPPSocket({
+          protocol: `${userSettings.directConnect.client.protocol}`,
+          hostname: `${userSettings.directConnect.client.hostname}`,
+        }),
+      );
+    }
+  });
+
   const unpackComicArchive = useCallback(() => {
     dispatch(
       extractComicArchive(

src/client/components/DownloadsPanel.tsx

@@ -5,10 +5,11 @@ import {
 } from "../actions/airdcpp.actions";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "threetwo-ui-typings";
-import { isNil, map } from "lodash";
+import { isEmpty, isNil, map } from "lodash";
 import prettyBytes from "pretty-bytes";
 import dayjs from "dayjs";
 import ellipsize from "ellipsize";
+import { AirDCPPSocketContext } from "../context/AirDCPPSocket";
 
 interface IDownloadsPanelProps {
   data: any;
@@ -24,13 +25,32 @@ export const DownloadsPanel = (
   const bundles = useSelector((state: RootState) => {
     return state.airdcpp.bundles;
   });
-  console.log("BANDYA", bundles);
-  const ADCPPSocket = useContext(SocketContext);
+
+  // AirDCPP Socket initialization
+  const userSettings = useSelector((state: RootState) => state.settings.data);
+  const { ADCPPSocket } = useContext(AirDCPPSocketContext);
 
   const dispatch = useDispatch();
+  // Fetch the downloaded files and currently-downloading file(s) from AirDC++
   useEffect(() => {
-    dispatch(getBundlesForComic(props.comicObjectId, ADCPPSocket));
-    dispatch(getDownloadProgress(props.comicObjectId, ADCPPSocket));
+    try {
+      if (!isEmpty(userSettings)) {
+        dispatch(
+          getBundlesForComic(props.comicObjectId, ADCPPSocket, {
+            username: `${userSettings.directConnect.client.username}`,
+            password: `${userSettings.directConnect.client.password}`,
+          }),
+        );
+        dispatch(
+          getDownloadProgress(props.comicObjectId, ADCPPSocket, {
+            username: `${userSettings.directConnect.client.username}`,
+            password: `${userSettings.directConnect.client.password}`,
+          }),
+        );
+      }
+    } catch (error) {
+      throw new Error(error);
+    }
   }, [dispatch]);
 
   const ProgressTick = (props) => {
@@ -69,7 +89,6 @@ export const DownloadsPanel = (
   };
 
   const Bundles = (props) => {
-    console.log(props);
     return (
       <table className="table is-striped">
         <thead>
@@ -102,12 +121,23 @@ export const DownloadsPanel = (
   };
 
   return !isNil(props.data) ? (
-    <>
+    <div className="columns">
       {!isNil(downloadProgressTick) ? (
         <ProgressTick data={downloadProgressTick} />
       ) : null}
-      <Bundles data={bundles} />
-    </>
+      {!isEmpty(ADCPPSocket) ? (
+        <Bundles data={bundles} />
+      ) : (
+        <div className="column is-three-fifths">
+          <article className="message is-info">
+            <div className="message-body is-size-6 is-family-secondary">
+              AirDC++ is not configured. Please configure it in{" "}
+              <code>Settings</code>.
+            </div>
+          </article>
+        </div>
+      )}
+    </div>
   ) : null;
 };