⬇️ Added bundles to downloads tab for corresponding comic book object

src/client/actions/airdcpp.actions.tsx

@@ -10,8 +10,9 @@ import {
   AIRDCPP_HUB_SEARCHES_SENT,
   AIRDCPP_RESULT_DOWNLOAD_INITIATED,
   AIRDCPP_DOWNLOAD_PROGRESS_TICK,
+  AIRDCPP_BUNDLES_FETCHED,
 } from "../constants/action-types";
-import { isNil } from "lodash";
+import { each, isNil } from "lodash";
 import axios from "axios";
 
 interface SearchData {
@@ -51,7 +52,6 @@ export const search = (data: SearchData) => async (dispatch) => {
     type: AIRDCPP_SEARCH_RESULTS_RECEIVED,
     results,
   });
-  SocketService.disconnect();
   return results;
 };
 
@@ -59,12 +59,25 @@ export const downloadAirDCPPItem =
   (instanceId: string, resultId: string, comicObjectId: string): void =>
   async (dispatch) => {
     try {
+      if (!SocketService.isConnected()) {
+        await SocketService.connect("admin", "password", true);
+      }
       let bundleDBImportResult = {};
-      await SocketService.connect("admin", "password", true);
       const downloadResult = await SocketService.post(
         `search/${instanceId}/results/${resultId}/download`,
       );
 
+      let bundleId;
+      let directoryIds;
+      if (!isNil(downloadResult.bundle_info)) {
+        bundleId = downloadResult.bundle_info.id;
+      }
+      if (!isNil(downloadResult.directory_download_ids)) {
+        directoryIds = downloadResult.directory_download_ids.map(
+          (item) => item.id,
+        );
+      }
+
       if (!isNil(downloadResult)) {
         bundleDBImportResult = await axios({
           method: "POST",
@@ -75,8 +88,9 @@ export const downloadAirDCPPItem =
           data: {
             resultId,
             comicObjectId,
-            downloadResult,
             searchInstanceId: instanceId,
+            bundleId,
+            directoryIds,
           },
         });
         dispatch({
@@ -85,18 +99,18 @@ export const downloadAirDCPPItem =
           bundleDBImportResult,
         });
       }
-
-      SocketService.disconnect();
     } catch (error) {
       throw error;
     }
   };
 
 export const getDownloadProgress =
-  (fileId: string, directoryId?: string): void =>
+  (comicObjectId: string): void =>
   async (dispatch) => {
     try {
-      await SocketService.connect("admin", "password", true);
+      if (!SocketService.isConnected()) {
+        await SocketService.connect("admin", "password", true);
+      }
       SocketService.addListener(
         `queue`,
         "queue_bundle_tick",
@@ -111,3 +125,39 @@ export const getDownloadProgress =
       throw error;
     }
   };
+
+export const getBundlesForComic =
+  (comicObjectId: string) => async (dispatch) => {
+    try {
+      if (!SocketService.isConnected()) {
+        await SocketService.connect("admin", "password", true);
+      }
+      const bundles = await SocketService.get("queue/bundles/0/500");
+      const comicObject = await axios({
+        method: "POST",
+        url: "http://localhost:3000/api/import/getComicBookById",
+        headers: {
+          "Content-Type": "application/json; charset=utf-8",
+        },
+        data: {
+          id: `${comicObjectId}`,
+        },
+      });
+      // get only the bundles applicable for the comic
+      const filteredBundles = [];
+      comicObject.data.acquisition.directconnect.map(({ bundleId }) => {
+        each(bundles, (bundle) => {
+          if (bundle.id === bundleId) {
+            filteredBundles.push(bundle);
+          }
+        });
+      });
+
+      dispatch({
+        type: AIRDCPP_BUNDLES_FETCHED,
+        bundles: filteredBundles,
+      });
+    } catch (error) {
+      throw error;
+    }
+  };

src/client/components/ComicDetail.tsx

@@ -52,9 +52,6 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
     (state: RootState) => state.comicInfo.comicBookDetail,
   );
 
-  const bundleMetadata = useSelector(
-    (state: RootState) => state.comicInfo.downloadResult,
-  );
   const { comicObjectId } = useParams<{ comicObjectId: string }>();
   const dispatch = useDispatch();
   const toggleActionDropdown = () =>

src/client/components/DownloadsPanel.tsx

@@ -1,8 +1,11 @@
 import React, { useEffect, ReactElement } from "react";
-import { getDownloadProgress } from "../actions/airdcpp.actions";
+import {
+  getDownloadProgress,
+  getBundlesForComic,
+} from "../actions/airdcpp.actions";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "threetwo-ui-typings";
-import { isNil } from "lodash";
+import { isNil, map } from "lodash";
 import prettyBytes from "pretty-bytes";
 
 interface IDownloadsPanelProps {
@@ -15,37 +18,60 @@ export const DownloadsPanel = (
   const downloadProgressTick = useSelector(
     (state: RootState) => state.airdcpp.downloadProgressData,
   );
+  const bundles = useSelector((state: RootState) => state.airdcpp.bundles);
   const dispatch = useDispatch();
+  //   useEffect(() => {
+  //     dispatch(getDownloadProgress(props.data._id));
+  //   }, [dispatch]);
+
   useEffect(() => {
-    dispatch(getDownloadProgress("12312"));
+    dispatch(getBundlesForComic(props.data._id));
   }, [dispatch]);
-  return !isNil(downloadProgressTick) ? (
+
+  const ProgressTick = (props) => (
     <div className="column is-one-quarter">
-      {JSON.stringify(downloadProgressTick)}
+      {JSON.stringify(props.downloadProgressTick)}
       <progress
         className="progress is-small is-success"
-        value={downloadProgressTick.downloaded_bytes}
+        value={props.downloaded_bytes}
-        max={downloadProgressTick.size}
+        max={props.size}
       >
-        {(parseInt(downloadProgressTick.downloaded_bytes) /
+        {(parseInt(props.downloaded_bytes) / parseInt(props.size)) * 100}%
-          parseInt(downloadProgressTick.size)) *
-          100}
-        %
       </progress>
       <dl>
-        <dt>{downloadProgressTick.name}</dt>
+        <dt>{props.name}</dt>
         <dd>
-          {prettyBytes(downloadProgressTick.downloaded_bytes)} of
+          {prettyBytes(props.downloaded_bytes)} of
-          {prettyBytes(downloadProgressTick.size)}
+          {prettyBytes(props.size)}
         </dd>
         <dd>
-          {prettyBytes(downloadProgressTick.speed)} per second. Time left:
+          {prettyBytes(props.speed)} per second. Time left:
-          {parseInt(downloadProgressTick.seconds_left) / 60}
+          {parseInt(props.seconds_left) / 60}
         </dd>
-        <dd>{downloadProgressTick.target}</dd>
+        <dd>{props.target}</dd>
       </dl>
     </div>
-  ) : null;
+  );
+
+  const Bundles = (props) => {
+    return (
+      <div>
+        <dl>
+          {!isNil(props.data) &&
+            props.data &&
+            map(props.data, (bundle) => (
+              <>
+                <dt>{bundle.name}</dt>
+                <dd>{bundle.target}</dd>
+                <dd>{bundle.size}</dd>
+              </>
+            ))}
+        </dl>
+      </div>
+    );
+  };
+
+  return !isNil(bundles) ? <Bundles data={bundles} /> : null;
 };
 
 export default DownloadsPanel;

src/client/constants/action-types.ts

@@ -1,4 +1,3 @@
-
 export const CV_API_CALL_IN_PROGRESS = "CV_SEARCH_IN_PROGRESS";
 export const CV_SEARCH_FAILURE = "CV_SEARCH_FAILURE";
 export const CV_SEARCH_SUCCESS = "CV_SEARCH_SUCCESS";
@@ -39,4 +38,5 @@ export const AIRDCPP_SEARCH_RESULTS_RECEIVED =
 export const AIRDCPP_HUB_SEARCHES_SENT = "AIRDCPP_HUB_SEARCHES_SENT";
 export const AIRDCPP_RESULT_DOWNLOAD_INITIATED =
   "AIRDCPP_RESULT_DOWNLOAD_INITIATED";
+export const AIRDCPP_BUNDLES_FETCHED = "AIRDCPP_BUNDLES_FETCHED";
 export const AIRDCPP_DOWNLOAD_PROGRESS_TICK = "AIRDCPP_DOWNLOAD_PROGRESS_TICK";

src/client/reducers/airdcpp.reducer.ts

@@ -4,6 +4,7 @@ import {
   AIRDCPP_HUB_SEARCHES_SENT,
   AIRDCPP_RESULT_DOWNLOAD_INITIATED,
   AIRDCPP_DOWNLOAD_PROGRESS_TICK,
+  AIRDCPP_BUNDLES_FETCHED,
 } from "../constants/action-types";
 import { LOCATION_CHANGE } from "connected-react-router";
 
@@ -50,6 +51,12 @@ function airdcppReducer(state = initialState, action) {
         ...state,
         downloadProgressData: action.downloadProgressData,
       };
+    case AIRDCPP_BUNDLES_FETCHED:
+        console.log(action)
+      return {
+        ...state,
+        bundles: action.bundles,
+      };
     case LOCATION_CHANGE:
       return {
         initialState,