🔄 Moved socket init code higher up into ComicDetail parent component

src/client/actions/airdcpp.actions.tsx

@@ -33,7 +33,6 @@ export const search =
   (data: SearchData, ADCPPSocket: any, credentials: any) =>
   async (dispatch) => {
     try {
-      console.log(credentials);
       if (!ADCPPSocket.isConnected()) {
         await ADCPPSocket.connect(
           credentials.username,
@@ -118,11 +117,16 @@ export const downloadAirDCPPItem =
     resultId: string,
     comicObjectId: string,
     ADCPPSocket: any,
+    credentials: any,
   ): void =>
   async (dispatch) => {
     try {
       if (!ADCPPSocket.isConnected()) {
-        await ADCPPSocket.connect("admin", "password", true);
+        await ADCPPSocket.connect(
+          `${credentials.username}`,
+          `${credentials.password}`,
+          true,
+        );
       }
       let bundleDBImportResult = {};
       const downloadResult = await ADCPPSocket.post(
@@ -172,11 +176,15 @@ export const downloadAirDCPPItem =
   };
 
 export const getDownloadProgress =
-  (comicObjectId: string, ADCPPSocket: any): void =>
+  (comicObjectId: string, ADCPPSocket: any, credentials: any): void =>
   async (dispatch) => {
     try {
       if (!ADCPPSocket.isConnected()) {
-        await ADCPPSocket.connect("admin", "password", true);
+        await ADCPPSocket.connect(
+          `${credentials.username}`,
+          `${credentials.password}`,
+          true,
+        );
       }
       await ADCPPSocket.addListener(
         `queue`,
@@ -194,10 +202,15 @@ export const getDownloadProgress =
   };
 
 export const getBundlesForComic =
-  (comicObjectId: string, ADCPPSocket: any) => async (dispatch) => {
+  (comicObjectId: string, ADCPPSocket: any, credentials: any) =>
+  async (dispatch) => {
     try {
       if (!ADCPPSocket.isConnected()) {
-        await ADCPPSocket.connect("admin", "password", true);
+        await ADCPPSocket.connect(
+          `${credentials.username}`,
+          `${credentials.password}`,
+          true,
+        );
       }
       const comicObject = await axios({
         method: "POST",

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="http">http://</option>
-                    <option value="https://">https://</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));
+    try {
-    dispatch(getDownloadProgress(props.comicObjectId, ADCPPSocket));
+      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;
 };
 

src/client/services/DcppSearchService.ts

@@ -2,8 +2,15 @@ import { Socket } from "airdcpp-apisocket";
 
 class AirDCPPSocket {
   constructor(configuration) {
+    console.assert(configuration);
+    let socketProtocol = "";
+    if (configuration.protocol === "https") {
+      socketProtocol = "wss";
+    } else {
+      socketProtocol = "ws";
+    }
     const options = {
-      url: `wss://${configuration.hostname}/api/v1/`,
+      url: `${socketProtocol}://${configuration.hostname}/api/v1/`,
       autoReconnect: false,
       reconnectInterval: 5,
       logLevel: "verbose",
@@ -17,4 +24,5 @@ class AirDCPPSocket {
     return AirDCPPSocketInstance;
   }
 }
+
 export default AirDCPPSocket;