🔧 Refactoring to hook on to the file completed event

src/client/actions/airdcpp.actions.tsx

@@ -14,9 +14,11 @@ import {
   AIRDCPP_DOWNLOAD_PROGRESS_TICK,
   AIRDCPP_BUNDLES_FETCHED,
   AIRDCPP_SEARCH_IN_PROGRESS,
+  AIRDCPP_FILE_DOWNLOAD_COMPLETED,
   IMS_COMIC_BOOK_DB_OBJECT_FETCHED,
 } from "../constants/action-types";
-import { isNil } from "lodash";
+import { difference } from "../shared/utils/object.utils";
+import { isNil, isEmpty, isUndefined } from "lodash";
 import axios from "axios";
 
 interface SearchData {
@@ -131,14 +133,6 @@ export const downloadAirDCPPItem =
         const downloadResult = await ADCPPSocket.post(
           `search/${instanceId}/results/${resultId}/download`,
         );
-        // download status check
-        await ADCPPSocket.addListener(
-          `queue`,
-          "queue_file_status",
-          async (searchInfo) => {
-            console.log("HERE", searchInfo);
-          },
-        );
 
         let bundleId;
         let directoryIds;
@@ -203,12 +197,17 @@ export const getDownloadProgress =
             });
           },
         );
-        // File status listener
-        await ADCPPSocket.addListener(
-          `queue`,
-          "queue_file_status",
-          async (data) => console.log("FILE STATUS", data),
-        );
+        let downloadStatus = undefined;
+        // download status check
+        await ADCPPSocket.addListener(`queue`, "queue_file_status", (status) => {
+          if (isUndefined(downloadStatus)) {
+            downloadStatus = status;
+            dispatch({
+              type: AIRDCPP_FILE_DOWNLOAD_COMPLETED,
+              status,
+            });
+          }
+        });
       } catch (error) {
         throw error;
       }

src/client/components/ComicDetail/DownloadsPanel.tsx

@@ -65,7 +65,7 @@ export const DownloadsPanel = (
               <dt className="is-size-6">{props.data.name}</dt>
               <dd>
                 <span className="is-size-3 has-text-weight-semibold">
-                  {prettyBytes(props.data.downloaded_bytes)}/
+                  {prettyBytes(props.data.downloaded_bytes)} of{" "}
                   {prettyBytes(props.data.size)}{" "}
                 </span>
                 <progress

src/client/constants/action-types.ts

@@ -103,6 +103,8 @@ export const AIRDCPP_SEARCH_COMPLETE = "AIRDCPP_SEARCH_COMPLETE";
 export const AIRDCPP_HUB_SEARCHES_SENT = "AIRDCPP_HUB_SEARCHES_SENT";
 export const AIRDCPP_RESULT_DOWNLOAD_INITIATED =
   "AIRDCPP_RESULT_DOWNLOAD_INITIATED";
+export const AIRDCPP_FILE_DOWNLOAD_COMPLETED =
+  "AIRDCPP_FILE_DOWNLOAD_COMPLETED";
 export const AIRDCPP_BUNDLES_FETCHED = "AIRDCPP_BUNDLES_FETCHED";
 export const AIRDCPP_DOWNLOAD_PROGRESS_TICK = "AIRDCPP_DOWNLOAD_PROGRESS_TICK";
 

src/client/reducers/airdcpp.reducer.ts

@@ -5,9 +5,11 @@ import {
   AIRDCPP_HUB_SEARCHES_SENT,
   AIRDCPP_RESULT_DOWNLOAD_INITIATED,
   AIRDCPP_DOWNLOAD_PROGRESS_TICK,
+  AIRDCPP_FILE_DOWNLOAD_COMPLETED,
   AIRDCPP_BUNDLES_FETCHED,
 } from "../constants/action-types";
 import { LOCATION_CHANGE } from "redux-first-history";
+import { isUndefined } from "lodash";
 import { difference } from "../shared/utils/object.utils";
 
 const initialState = {
@@ -17,6 +19,7 @@ const initialState = {
   searchInstance: null,
   downloadResult: null,
   bundleDBImportResult: null,
+  downloadFileStatus: {},
   bundles: [],
 };
 
@@ -73,6 +76,11 @@ function airdcppReducer(state = initialState, action) {
         ...state,
         bundles: action.bundles,
       };
+    case AIRDCPP_FILE_DOWNLOAD_COMPLETED:
+      console.log("COMPLETED", action);
+      return {
+        ...state,
+      };
     case LOCATION_CHANGE:
       return {
         searchResults: [],