🔄 Fixed a redux store issue with download counts

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