🔽 Wiring up downloads API calls and actions

src/client/components/ComicDetail/DownloadsPanel.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useContext, ReactElement } from "react";
 import {
-  getDownloadProgress,
   getBundlesForComic,
 } from "../../actions/airdcpp.actions";
 import { useDispatch, useSelector } from "react-redux";

src/client/components/Downloads/Downloads.tsx

@@ -1,9 +1,11 @@
-import React, { ReactElement, useCallback, useContext, useEffect } from "react";
+import React, { ReactElement, useCallback, useContext, useEffect, useState } from "react";
 import { getTransfers } from "../../actions/airdcpp.actions";
 import { useDispatch, useSelector } from "react-redux";
 import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
-import { isEmpty, isUndefined } from "lodash";
+import { isEmpty, isNil, isUndefined } from "lodash";
 import { searchIssue } from "../../actions/fileops.actions";
+import { determineCoverFile } from "../../shared/utils/metadata.utils";
+import MetadataPanel from "../shared/MetadataPanel";
 
 interface IDownloadsProps {
   data: any;
@@ -19,22 +21,8 @@ export const Downloads = (props: IDownloadsProps): ReactElement => {
   const airDCPPTransfers = useSelector(
     (state: RootState) => state.airdcpp.transfers,
   );
-  useEffect(() => {
-    dispatch(
-      searchIssue(
-        {
-          query: {},
-        },
-        {
-          pagination: {
-            size: 25,
-            from: 0,
-          },
-          type: "wanted",
-        },
-      ),
-    );
-  }, []);
+  const issueBundles = useSelector((state: RootState) => state.airdcpp.issue_bundles);
+  const [bundles, setBundles] = useState([]);
   // Make the call to get all transfers from AirDC++
   useEffect(() => {
     if (!isUndefined(socket) && !isEmpty(settings)) {
@@ -47,9 +35,47 @@ export const Downloads = (props: IDownloadsProps): ReactElement => {
     }
   }, [socket]);
 
- 
-  //   const getAllDownloads = useCallback(() => {});
-  return <pre>{JSON.stringify(airDCPPTransfers, null, 2)}</pre>;
+  useEffect(() => {
+    if (!isUndefined(issueBundles)) {
+      const foo = issueBundles.data.map((bundle) => {
+        const { rawFileDetails, inferredMetadata, acquisition: { directconnect: { downloads } }, sourcedMetadata: { locg, comicvine } } = bundle;
+        const { issueName, url } = determineCoverFile({
+          rawFileDetails, comicvine, locg,
+        });
+        return { ...bundle, issueName, url }
+
+      })
+      setBundles(foo);
+    }
+
+  }, [issueBundles])
+
+  return !isNil(bundles) ?
+    <div className="container">
+      <section className="section">
+        <h1 className="title">Downloads</h1>
+        <div className="columns">
+          <div className="column is-half">
+            {bundles.map(bundle => {
+              console.log(bundle);
+              return <>
+                <MetadataPanel
+                  data={bundle}
+                  imageStyle={{ maxWidth: 100 }}
+                  titleStyle={{ fontSize: "0.8rem" }}
+                  tagsStyle={{ fontSize: "0.7rem" }}
+                  containerStyle={{
+                    padding: 0,
+                    margin: "0 0 8px 0",
+                  }} />
+
+                <pre>{JSON.stringify(bundle.acquisition.directconnect.downloads, null, 2)}</pre>
+              </>
+            })}
+          </div>
+        </div>
+      </section>
+    </div> : <div>asd</div>;
 };
 
 export default Downloads;