🔽 Wiring up downloads API calls and actions

src/client/actions/airdcpp.actions.tsx

@@ -17,6 +17,7 @@ import {
   LS_SINGLE_IMPORT,
   IMS_COMIC_BOOK_DB_OBJECT_FETCHED,
   AIRDCPP_TRANSFERS_FETCHED,
+  LIBRARY_ISSUE_BUNDLES,
 } from "../constants/action-types";
 import { isNil } from "lodash";
 import axios from "axios";
@@ -233,11 +234,15 @@ export const getTransfers =
         });
         const bundleIds = bundles.map((bundle) => bundle.id);
         // get issues with matching bundleIds
-        const issues = await axios({
+        const issue_bundles = await axios({
           url: `${SEARCH_SERVICE_BASE_URI}/groupIssuesByBundles`,
           method: "POST",
           data: { bundleIds },
         });
+        dispatch({
+          type: LIBRARY_ISSUE_BUNDLES,
+          issue_bundles,
+        });
 
       }
     } catch (err) {

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;

src/client/constants/action-types.ts

@@ -101,6 +101,9 @@ export const AIRDCPP_SEARCH_RESULTS_ADDED = "AIRDCPP_SEARCH_RESULTS_ADDED";
 export const AIRDCPP_SEARCH_RESULTS_UPDATED = "AIRDCPP_SEARCH_RESULTS_UPDATED";
 export const AIRDCPP_SEARCH_COMPLETE = "AIRDCPP_SEARCH_COMPLETE";
 
+// AirDC++ related library query for issues with bundles associated with them
+export const LIBRARY_ISSUE_BUNDLES = "LIBRARY_ISSUE_BUNDLES"; 
+
 export const AIRDCPP_HUB_SEARCHES_SENT = "AIRDCPP_HUB_SEARCHES_SENT";
 export const AIRDCPP_RESULT_DOWNLOAD_INITIATED =
   "AIRDCPP_RESULT_DOWNLOAD_INITIATED";

src/client/reducers/airdcpp.reducer.ts

@@ -8,9 +8,10 @@ import {
   AIRDCPP_FILE_DOWNLOAD_COMPLETED,
   AIRDCPP_BUNDLES_FETCHED,
   AIRDCPP_TRANSFERS_FETCHED,
+  LIBRARY_ISSUE_BUNDLES,
 } from "../constants/action-types";
 import { LOCATION_CHANGE } from "redux-first-history";
-import { isUndefined } from "lodash";
+import { isNil, isUndefined } from "lodash";
 import { difference } from "../shared/utils/object.utils";
 
 const initialState = {
@@ -40,8 +41,9 @@ function airdcppReducer(state = initialState, action) {
       const updatedState = [...state.searchResults];
 
       if (
-        difference(updatedState[bundleToUpdateIndex], action.groupedResult) !==
-        {}
+        !isNil(
+          difference(updatedState[bundleToUpdateIndex], action.groupedResult),
+        )
       ) {
         updatedState[bundleToUpdateIndex] = action.groupedResult;
       }
@@ -78,6 +80,11 @@ function airdcppReducer(state = initialState, action) {
         ...state,
         bundles: action.bundles,
       };
+    case LIBRARY_ISSUE_BUNDLES:
+      return {
+        ...state,
+        issue_bundles: action.issue_bundles,
+      };
     case AIRDCPP_FILE_DOWNLOAD_COMPLETED:
       console.log("COMPLETED", action);
       return {

src/client/reducers/fileops.reducer.ts

@@ -194,7 +194,6 @@ function fileOpsReducer(state = initialState, action) {
       };
     }
     case SS_SEARCH_RESULTS_FETCHED_SPECIAL: {
-      console.log(action)
       const foo = [];
       if (!isUndefined(action.data.hits)) {
         map(action.data.hits.hits, ({ _source }) => {