🔄 Fixed a redux store issue with download counts

src/client/actions/airdcpp.actions.tsx

@@ -12,8 +12,9 @@ import {
   AIRDCPP_DOWNLOAD_PROGRESS_TICK,
   AIRDCPP_BUNDLES_FETCHED,
   AIRDCPP_SEARCH_IN_PROGRESS,
+  IMS_COMIC_BOOK_DB_OBJECT_FETCHED,
 } from "../constants/action-types";
-import { each, isNil, isUndefined } from "lodash";
+import { each, isNil, isUndefined, result } from "lodash";
 import axios from "axios";
 
 interface SearchData {
@@ -32,7 +33,7 @@ export const search = (data: SearchData) => async (dispatch) => {
       await SocketService.connect("admin", "password", true);
     }
     const instance: SearchInstance = await SocketService.post("search");
-    console.log(instance)
+    console.log(instance);
     dispatch({
       type: AIRDCPP_SEARCH_IN_PROGRESS,
     });
@@ -145,6 +146,11 @@ export const downloadAirDCPPItem =
           downloadResult: downloadResult,
           bundleDBImportResult,
         });
+        dispatch({
+          type: IMS_COMIC_BOOK_DB_OBJECT_FETCHED,
+          comicBookDetail: bundleDBImportResult.data,
+          IMS_inProgress: false,
+        });
       }
     } catch (error) {
       throw error;
@@ -179,7 +185,7 @@ export const getBundlesForComic =
       if (!SocketService.isConnected()) {
         await SocketService.connect("admin", "password", true);
       }
-      const bundles = await SocketService.get("queue/bundles/0/500");
+      // const bundles = await SocketService.get("queue/bundles/0/50");
       const comicObject = await axios({
         method: "POST",
         url: "http://localhost:3000/api/import/getComicBookById",
@@ -191,18 +197,14 @@ export const getBundlesForComic =
         },
       });
       // 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);
-          }
-        });
-      });
-
+      const filteredBundles = comicObject.data.acquisition.directconnect.map(
+        async ({ bundleId }) => {
+          return await SocketService.get(`queue/bundles/${bundleId}`);
+        },
+      );
       dispatch({
         type: AIRDCPP_BUNDLES_FETCHED,
-        bundles: filteredBundles,
+        bundles: await Promise.all(filteredBundles),
       });
     } catch (error) {
       throw error;

src/client/assets/scss/App.scss

@@ -183,6 +183,18 @@ $border-color: red;
   }
 }
 
+// Comic Detail
+.tabs {
+  .download-icon-labels {
+    .downloads-count {
+      margin: 0 1em 0 0.4em;
+      border: 1px solid #CCC;
+    }
+  }
+  .download-tab-name {
+  }
+}
+
 .comic-vine-match-drawer {
   // comic detail drawer
   .search-criteria-card {
@@ -207,6 +219,9 @@ $border-color: red;
 .slide-pane__header {
   margin-top: 52px;
 }
+.slide-pane__close {
+  display: none;
+}
 .search-results-container {
   margin: 15px 0 0 0;
   overflow: hidden;

src/client/components/AcquisitionPanel.tsx

@@ -1,8 +1,13 @@
 import React, { useCallback, ReactElement } from "react";
-import { search, downloadAirDCPPItem } from "../actions/airdcpp.actions";
+import {
+  search,
+  downloadAirDCPPItem,
+  getBundlesForComic,
+} from "../actions/airdcpp.actions";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState, SearchInstance } from "threetwo-ui-typings";
-import { isNil, map } from "lodash";
+import ellipsize from "ellipsize";
+import { isEmpty, isNil, map } from "lodash";
 
 interface IAcquisitionPanelProps {
   comicBookMetadata: any;
@@ -47,10 +52,12 @@ export const AcquisitionPanel = (
   };
 
   const downloadDCPPResult = useCallback(
-    (searchInstanceId, resultId, comicBookObjectId) =>
+    (searchInstanceId, resultId, comicBookObjectId) => {
       dispatch(
         downloadAirDCPPItem(searchInstanceId, resultId, comicBookObjectId),
-      ),
+      );
+      dispatch(getBundlesForComic(comicBookObjectId));
+    },
     [dispatch],
   );
   return (
@@ -104,7 +111,7 @@ export const AcquisitionPanel = (
       </div>
       {/* AirDC++ results */}
       <div>
-        {!isNil(airDCPPSearchResults) && (
+        {!isNil(airDCPPSearchResults) && !isEmpty(airDCPPSearchResults) && (
           <table className="table is-striped">
             <thead>
               <tr>
@@ -123,7 +130,7 @@ export const AcquisitionPanel = (
                         {result.type.id === "directory" ? (
                           <i className="fas fa-folder"></i>
                         ) : null}{" "}
-                        {result.name}
+                        {ellipsize(result.name, 70)}
                       </p>
                       <dl>
                         <dd>

src/client/components/ComicDetail.tsx

@@ -1,4 +1,10 @@
-import React, { useState, useEffect, useCallback, ReactElement } from "react";
+import React, {
+  useState,
+  useEffect,
+  useLayoutEffect,
+  useCallback,
+  ReactElement,
+} from "react";
 import { useParams } from "react-router-dom";
 import Card from "./Carda";
 import MatchResult from "./MatchResult";
@@ -15,6 +21,7 @@ import { isEmpty, isUndefined, isNil } from "lodash";
 import { RootState } from "threetwo-ui-typings";
 import { fetchComicVineMatches } from "../actions/fileops.actions";
 import { getComicBookDetailById } from "../actions/comicinfo.actions";
+import { getBundlesForComic } from "../actions/airdcpp.actions";
 import dayjs from "dayjs";
 const prettyBytes = require("pretty-bytes");
 
@@ -154,9 +161,20 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
     },
     {
       id: 4,
-      icon: <i className="fas fa-cloud-download-alt"></i>,
-      name: "Downloads",
-      content: <DownloadsPanel data={comicBookDetailData} key={4} />,
+      icon: null,
+      name:
+        !isNil(comicBookDetailData) && !isEmpty(comicBookDetailData) ? (
+          <span className="download-tab-name">Downloads</span>
+        ) : (
+          "Downloads"
+        ),
+      content: !isNil(comicBookDetailData) && !isEmpty(comicBookDetailData) && (
+        <DownloadsPanel
+          data={comicBookDetailData.acquisition.directconnect}
+          comicObjectId={comicObjectId}
+          key={4}
+        />
+      ),
     },
   ];
   const MetadataTabGroup = () => {
@@ -171,7 +189,18 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
                 onClick={() => setActive(id)}
               >
                 <a>
-                  <span className="icon is-small">{icon}</span>
+                  {id === 4 &&
+                  !isNil(comicBookDetailData) &&
+                  !isEmpty(comicBookDetailData) ? (
+                    <span className="download-icon-labels">
+                      <i className="fas fa-cloud-download-alt"></i>
+                      <span className="tag downloads-count">
+                        {comicBookDetailData.acquisition.directconnect.length}
+                      </span>
+                    </span>
+                  ) : (
+                    <span className="icon is-small">{icon}</span>
+                  )}
                   {name}
                 </a>
               </li>

src/client/components/DownloadsPanel.tsx

@@ -1,8 +1,5 @@
 import React, { useEffect, ReactElement } from "react";
-import {
-  getDownloadProgress,
-  getBundlesForComic,
-} from "../actions/airdcpp.actions";
+import { getDownloadProgress } from "../actions/airdcpp.actions";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "threetwo-ui-typings";
 import { isNil, map } from "lodash";
@@ -10,6 +7,7 @@ import prettyBytes from "pretty-bytes";
 
 interface IDownloadsPanelProps {
   data: any;
+  comicObjectId: string;
 }
 
 export const DownloadsPanel = (
@@ -18,16 +16,11 @@ 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(getBundlesForComic(props.data._id));
-  }, [dispatch]);
-
   const ProgressTick = (props) => (
     <div className="column is-one-quarter">
       {JSON.stringify(props.downloadProgressTick)}
@@ -71,7 +64,7 @@ export const DownloadsPanel = (
     );
   };
 
-  return !isNil(bundles) ? <Bundles data={bundles} /> : null;
+  return !isNil(props.data) ? <Bundles data={props.data} /> : null;
 };
 
 export default DownloadsPanel;

src/client/components/Navbar.tsx

@@ -7,7 +7,7 @@ const Navbar: React.FunctionComponent = (props) => {
   const socketConnection = useSelector((state: RootState) => state.fileOps);
 
   return (
-    <nav className="navbar ">
+    <nav className="navbar is-fixed-top">
       <div className="navbar-brand">
         <a className="navbar-item" href="http://bulma.io">
           <img

src/client/reducers/airdcpp.reducer.ts

@@ -15,6 +15,7 @@ const initialState = {
   searchInstance: null,
   downloadResult: null,
   bundleDBImportResult: null,
+  bundles: [],
 };
 
 function airdcppReducer(state = initialState, action) {
@@ -38,6 +39,7 @@ function airdcppReducer(state = initialState, action) {
         searchInstance: action.instance,
       };
     case AIRDCPP_RESULT_DOWNLOAD_INITIATED:
+      console.log(action)
       return {
         ...state,
         downloadResult: action.downloadResult,
@@ -61,6 +63,7 @@ function airdcppReducer(state = initialState, action) {
         searchInstance: null,
         downloadResult: null,
         bundleDBImportResult: null,
+        // bundles: [],
       };
 
     default: