🍼 Cleaned up the OPDS feed

src/client/components/AcquisitionPanel.tsx

@@ -57,6 +57,7 @@ export const AcquisitionPanel = (
       dispatch(
         downloadAirDCPPItem(searchInstanceId, resultId, comicBookObjectId),
       );
+      // this is to update the download count badge on the downloads tab
       dispatch(getBundlesForComic(comicBookObjectId));
     },
     [dispatch],
@@ -128,7 +129,10 @@ export const AcquisitionPanel = (
             <tbody>
               {map(airDCPPSearchResults, ({ result }, idx) => {
                 return (
-                  <tr key={idx}>
+                  <tr
+                    key={idx}
+                    className={!isNil(result.dupe) ? "dupe-search-result" : ""}
+                  >
                     <td>
                       <p className="mb-2">
                         {result.type.id === "directory" ? (
@@ -136,9 +140,13 @@ export const AcquisitionPanel = (
                         ) : null}{" "}
                         {ellipsize(result.name, 70)}
                       </p>
+
                       <dl>
                         <dd>
                           <div className="tags">
+                            {!isNil(result.dupe) ? (
+                              <span className="tag is-warning">Dupe</span>
+                            ) : null}
                             <span className="tag is-light is-info">
                               {result.users.user.nicks}
                             </span>
@@ -169,17 +177,17 @@ export const AcquisitionPanel = (
                       </div>
                     </td>
                     <td>
-                      <a
-                        onClick={() =>
-                          downloadDCPPResult(
-                            searchInstance.id,
-                            result.id,
-                            props.comicBookMetadata._id,
-                          )
-                        }
-                      >
-                        <i className="fas fa-file-download"></i>
-                      </a>
+                        <a
+                          onClick={() =>
+                            downloadDCPPResult(
+                              searchInstance.id,
+                              result.id,
+                              props.comicBookMetadata._id,
+                            )
+                          }
+                        >
+                          <i className="fas fa-file-download"></i>
+                        </a>
                     </td>
                   </tr>
                 );

src/client/components/DownloadsPanel.tsx

@@ -1,9 +1,13 @@
 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, map } from "lodash";
 import prettyBytes from "pretty-bytes";
+import ellipsize from "ellipsize";
 
 interface IDownloadsPanelProps {
   data: any;
@@ -16,56 +20,87 @@ export const DownloadsPanel = (
   const downloadProgressTick = useSelector(
     (state: RootState) => state.airdcpp.downloadProgressData,
   );
+  const bundles = useSelector((state: RootState) => {
+    return state.airdcpp.bundles;
+  });
+  console.log("BANDYA", bundles);
   const dispatch = useDispatch();
-  //   useEffect(() => {
-  //     dispatch(getDownloadProgress(props.data._id));
-  //   }, [dispatch]);
+  useEffect(() => {
+    dispatch(getBundlesForComic(props.comicObjectId));
+    dispatch(getDownloadProgress(props.comicObjectId));
+  }, [dispatch]);
 
-  const ProgressTick = (props) => (
-    <div className="column is-one-quarter">
-      {JSON.stringify(props.downloadProgressTick)}
-      <progress
-        className="progress is-small is-success"
-        value={props.downloaded_bytes}
-        max={props.size}
-      >
-        {(parseInt(props.downloaded_bytes) / parseInt(props.size)) * 100}%
-      </progress>
-      <dl>
-        <dt>{props.name}</dt>
-        <dd>
-          {prettyBytes(props.downloaded_bytes)} of
-          {prettyBytes(props.size)}
-        </dd>
-        <dd>
-          {prettyBytes(props.speed)} per second. Time left:
-          {parseInt(props.seconds_left) / 60}
-        </dd>
-        <dd>{props.target}</dd>
-      </dl>
-    </div>
-  );
-
-  const Bundles = (props) => {
-    console.log(props)
+  const ProgressTick = (props) => {
+    console.log("tick", props);
     return (
-      <div>
-        <dl>
-          {!isNil(props.data) &&
-            props.data &&
-            map(props.data, (bundle) => (
-              <span key={bundle.id}>
-                <dt>{bundle.name}</dt>
-                <dd>{bundle.target}</dd>
-                <dd>{bundle.size}</dd>
-              </span>
-            ))}
-        </dl>
+      <div className="column is-half">
+        {JSON.stringify(props.data.downloadProgressTick)}
+        <progress
+          className="progress is-small is-success"
+          value={props.data.downloaded_bytes}
+          max={props.data.size}
+        >
+          {(parseInt(props.data.downloaded_bytes) / parseInt(props.data.size)) *
+            100}
+          %
+        </progress>
+        <div className="card">
+          <div className="card-content is-size-7">
+            <dl>
+              <dt>{props.data.name}</dt>
+              <dd>
+                {prettyBytes(props.data.downloaded_bytes)} of{" "}
+                {prettyBytes(props.data.size)}
+              </dd>
+              <dd>{prettyBytes(props.data.speed)} per second.</dd>
+              <dd>
+                Time left:
+                {parseInt(props.data.seconds_left) / 60}
+              </dd>
+              <dd>{props.data.target}</dd>
+            </dl>
+          </div>
+        </div>
       </div>
     );
   };
 
-  return !isNil(props.data) ? <Bundles data={props.data} /> : null;
+  const Bundles = (props) => {
+    console.log(props);
+    return (
+      <table className="table is-striped">
+        <thead>
+          <tr>
+            <th>Filename</th>
+            <th>Size</th>
+            <th>Time</th>
+          </tr>
+        </thead>
+        <tbody>
+          {!isNil(props.data) &&
+            props.data &&
+            map(props.data, (bundle) => (
+              <tr key={bundle.id}>
+                <td>
+                  <h5>{ellipsize(bundle.name, 58)}</h5>
+                  <span className="is-size-7">{bundle.target}</span>
+                </td>
+                <td>{prettyBytes(bundle.size)}</td>
+              </tr>
+            ))}
+        </tbody>
+      </table>
+    );
+  };
+
+  return !isNil(props.data) ? (
+    <>
+      {!isNil(downloadProgressTick) ? (
+        <ProgressTick data={downloadProgressTick} />
+      ) : null}
+      <Bundles data={bundles} />
+    </>
+  ) : null;
 };
 
 export default DownloadsPanel;

src/client/components/VolumeGroups.tsx

@@ -32,7 +32,7 @@ export const VolumeGroups = (): ReactElement => {
           map(volumeGroups.data, (group) => {
             if (!isNil(group)) {
               return (
-                <div className="stack">
+                <div className="stack" key={group.results.id}>
                   <img src={group.results.image.small_url} />
                   <div className="content">
                     <div className="stack-title">