📥 Refactoring download tick panel

src/client/actions/airdcpp.actions.tsx

@@ -194,32 +194,6 @@ export const downloadAirDCPPItem =
     }
   };
 
-export const getDownloadProgress =
-  (comicObjectId: string, ADCPPSocket: any, credentials: any): void =>
-  async (dispatch) => {
-    try {
-      if (!ADCPPSocket.isConnected()) {
-        await ADCPPSocket.connect(
-          `${credentials.username}`,
-          `${credentials.password}`,
-          true,
-        );
-      }
-      await ADCPPSocket.addListener(
-        `queue`,
-        "queue_bundle_tick",
-        async (downloadProgressData) => {
-          dispatch({
-            type: AIRDCPP_DOWNLOAD_PROGRESS_TICK,
-            downloadProgressData,
-          });
-        },
-      );
-    } catch (error) {
-      throw error;
-    }
-  };
-
 export const getBundlesForComic =
   (comicObjectId: string, ADCPPSocket: any, credentials: any) =>
   async (dispatch) => {

src/client/components/App.tsx

@@ -21,11 +21,13 @@ import {
   AirDCPPSocketContext,
 } from "../context/AirDCPPSocket";
 import { isEmpty, isUndefined } from "lodash";
+import { AIRDCPP_DOWNLOAD_PROGRESS_TICK } from "../constants/action-types";
+import { useDispatch } from "react-redux";
 
 const AirDCPPSocketComponent = (): ReactElement => {
   const airDCPPConfiguration = useContext(AirDCPPSocketContext);
   console.log(airDCPPConfiguration);
-
+  const dispatch = useDispatch();
   useEffect(() => {
     const foo = async () => {
       if (
@@ -38,6 +40,20 @@ const AirDCPPSocketComponent = (): ReactElement => {
           "queue_bundle_added",
           async (data) => console.log("JEMEN:", data),
         );
+        // download tick listener
+        await airDCPPConfiguration.airDCPPState.socket.addListener(
+          `queue`,
+          "queue_bundle_tick",
+          async (downloadProgressData) => {
+            dispatch({
+              type: AIRDCPP_DOWNLOAD_PROGRESS_TICK,
+              downloadProgressData,
+            });
+          },
+        );
+        console.log(
+          "[AirDCPP]: Listener registered - listening to queue bundle download ticks",
+        );
         console.log(
           "[AirDCPP]: Listener registered - listening to queue bundle changes",
         );

src/client/components/ComicDetail/DownloadProgressTick.tsx

@@ -3,7 +3,7 @@ import React, { ReactElement } from "react";
 
 export const DownloadProgressTick = (props): ReactElement => {
   return (
-    <div className="box">
+    <div >
       <h4 className="is-size-6">{props.data.name}</h4>
       <div>
         <span className="is-size-3 has-text-weight-semibold">

src/client/components/Downloads/Downloads.tsx

@@ -11,7 +11,9 @@ interface IDownloadsProps {
 
 export const Downloads = (props: IDownloadsProps): ReactElement => {
   const airDCPPConfiguration = useContext(AirDCPPSocketContext);
-  const { AirDCPPSocket, settings } = airDCPPConfiguration;
+  const {
+    airDCPPState: { settings, socket },
+  } = airDCPPConfiguration;
   const dispatch = useDispatch();
 
   const AirDCPPTransfers = useSelector(
@@ -35,15 +37,15 @@ export const Downloads = (props: IDownloadsProps): ReactElement => {
   }, []);
   // Make the call to get all transfers from AirDC++
   useEffect(() => {
-    if (!isUndefined(AirDCPPSocket) && !isEmpty(airDCPPConfiguration)) {
+    if (!isUndefined(socket) && !isEmpty(settings)) {
       dispatch(
-        getTransfers(AirDCPPSocket, {
+        getTransfers(socket, {
           username: `${settings.directConnect.client.host.username}`,
           password: `${settings.directConnect.client.host.password}`,
         }),
       );
     }
-  }, [AirDCPPSocket]);
+  }, [socket]);
   //   const getAllDownloads = useCallback(() => {});
   return <pre>{JSON.stringify(AirDCPPTransfers, null, 2)}</pre>;
 };

src/client/components/Navbar.tsx

@@ -2,8 +2,14 @@ import React from "react";
 import { SearchBar } from "./GlobalSearchBar/SearchBar";
 import { DownloadProgressTick } from "./ComicDetail/DownloadProgressTick";
 import { Link } from "react-router-dom";
+import { useSelector } from "react-redux";
+import { isEmpty, isUndefined } from "lodash";
 
 const Navbar: React.FunctionComponent = (props) => {
+  const downloadProgressTick = useSelector(
+    (state: RootState) => state.airdcpp.downloadProgressData,
+  );
+  console.log(downloadProgressTick)
   return (
     <nav className="navbar is-fixed-top">
       <div className="navbar-brand">
@@ -63,14 +69,12 @@ const Navbar: React.FunctionComponent = (props) => {
         <div className="navbar-end">
           <a className="navbar-item is-hidden-desktop-only"></a>
 
-          {/* <div className="navbar-item has-dropdown is-hoverable">
+          <div className="navbar-item has-dropdown is-hoverable">
             <a className="navbar-link is-arrowless">
               <i className="fa-solid fa-download"></i>
-              {!isUndefined(downloadProgressTick) ? (
+              {downloadProgressTick && (
-                <>
                   <i className="fa-solid fa-circle-dashed"></i>
-                </>
+              )}
-              ) : null}
             </a>
             {!isUndefined(downloadProgressTick) ? (
               <div className="navbar-dropdown download-progress-meter">
@@ -79,7 +83,7 @@ const Navbar: React.FunctionComponent = (props) => {
                 </a>
               </div>
             ) : null}
-          </div> */}
+          </div>
           <div className="navbar-item has-dropdown is-hoverable is-mega">
             <div className="navbar-link flex">Blog</div>
             <div id="blogDropdown" className="navbar-dropdown">

src/client/components/Settings.tsx

@@ -1,9 +1,9 @@
-import React, { useState, useEffect, ReactElement, useContext } from "react";
+import React, { useState, ReactElement } from "react";
 import { AirDCPPSettingsForm } from "./AirDCPPSettings/AirDCPPSettingsForm";
 import { AirDCPPHubsForm } from "./AirDCPPSettings/AirDCPPHubsForm";
 import { SystemSettingsForm } from "./SystemSettings/SystemSettingsForm";
 import settingsObject from "../constants/settings/settingsMenu.json";
-import { isEmpty, isUndefined, map } from "lodash";
+import { isUndefined, map } from "lodash";
 
 interface ISettingsProps {}