⬇️ Download panel first draft

src/client/components/AcquisitionPanel.tsx

@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useCallback, ReactElement } from "react";
+import React, { useCallback, ReactElement } from "react";
 import { search, downloadAirDCPPItem } from "../actions/airdcpp.actions";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState, SearchInstance } from "threetwo-ui-typings";
-import { each, isNil, map } from "lodash";
+import { isNil, map } from "lodash";
 
 interface IAcquisitionPanelProps {
   comicBookMetadata: any;
@@ -13,6 +13,7 @@ export const AcquisitionPanel = (
 ): ReactElement => {
   const volumeName =
     props.comicBookMetadata.sourcedMetadata.comicvine.volumeInformation.name;
+  const sanitizedVolumeName = volumeName.replace(/[^a-zA-Z0-9 ]/g, "");
   const issueName = props.comicBookMetadata.sourcedMetadata.comicvine.name;
   const airDCPPSearchResults = useSelector(
     (state: RootState) => state.airdcpp.results,
@@ -26,6 +27,7 @@ export const AcquisitionPanel = (
   const searchInstance: SearchInstance = useSelector(
     (state: RootState) => state.airdcpp.searchInstance,
   );
+
   const dispatch = useDispatch();
   const getDCPPSearchResults = useCallback(
     (searchQuery) => {
@@ -35,16 +37,18 @@ export const AcquisitionPanel = (
   );
   const dcppQuery = {
     query: {
-      pattern: `${volumeName}`,
+      pattern: `${sanitizedVolumeName}`,
       extensions: ["cbz", "cbr"],
     },
-    hub_urls: ["perfection.crabdance.com:777"],
+    hub_urls: ["nmdcs://piter.feardc.net:411"],
     priority: 1,
   };
 
   const downloadDCPPResult = useCallback(
-    (searchInstanceId, resultId) =>
-      dispatch(downloadAirDCPPItem(searchInstanceId, resultId)),
+    (searchInstanceId, resultId, comicBookObjectId) =>
+      dispatch(
+        downloadAirDCPPItem(searchInstanceId, resultId, comicBookObjectId),
+      ),
     [dispatch],
   );
   return (
@@ -62,6 +66,7 @@ export const AcquisitionPanel = (
             Search on AirDC++
           </button>
         </div>
+        {/* AirDC++ search instance details */}
         {!isNil(searchInfo) && !isNil(searchInstance) && (
           <>
             <div className="column is-one-quarter is-size-7">
@@ -95,7 +100,7 @@ export const AcquisitionPanel = (
           </>
         )}
       </div>
-      {/* results */}
+      {/* AirDC++ results */}
       <div>
         {!isNil(airDCPPSearchResults) && (
           <table className="table is-striped">
@@ -110,7 +115,7 @@ export const AcquisitionPanel = (
             <tbody>
               {map(airDCPPSearchResults, ({ name, type, slots, users, id }) => {
                 return (
-                  <tr>
+                  <tr key={id}>
                     <td>
                       <p className="mb-2">
                         {type.id === "directory" ? (
@@ -149,7 +154,11 @@ export const AcquisitionPanel = (
                     <td>
                       <a
                         onClick={() =>
-                          downloadDCPPResult(searchInstance.id, id)
+                          downloadDCPPResult(
+                            searchInstance.id,
+                            id,
+                            props.comicBookMetadata._id,
+                          )
                         }
                       >
                         <i className="fas fa-file-download"></i>

src/client/components/ComicDetail.tsx

@@ -4,6 +4,7 @@ import Card from "./Carda";
 import MatchResult from "./MatchResult";
 import ComicVineSearchForm from "./ComicVineSearchForm";
 import AcquisitionPanel from "./AcquisitionPanel";
+import DownloadsPanel from "./DownloadsPanel";
 
 import { css } from "@emotion/react";
 import PuffLoader from "react-spinners/PuffLoader";
@@ -50,6 +51,10 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
   const comicBookDetailData = useSelector(
     (state: RootState) => state.comicInfo.comicBookDetail,
   );
+
+  const bundleMetadata = useSelector(
+    (state: RootState) => state.comicInfo.downloadResult,
+  );
   const { comicObjectId } = useParams<{ comicObjectId: string }>();
   const dispatch = useDispatch();
   const toggleActionDropdown = () =>
@@ -60,7 +65,6 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
   }, [page, dispatch]);
 
   const openDrawerWithCVMatches = useCallback(() => {
-    console.log("here")
     setVisible(true);
     dispatch(fetchComicVineMatches(comicBookDetailData));
   }, [dispatch, comicBookDetailData]);
@@ -155,7 +159,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
       id: 4,
       icon: <i className="fas fa-cloud-download-alt"></i>,
       name: "Downloads",
-      content: <div>Downloads</div>,
+      content: <DownloadsPanel data={comicBookDetailData} />,
     },
   ];
   const MetadataTabGroup = () => {

src/client/components/DownloadsPanel.tsx

@@ -0,0 +1,51 @@
+import React, { useCallback, useEffect, useState, ReactElement } from "react";
+import { getDownloadProgress } from "../actions/airdcpp.actions";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState, SearchInstance } from "threetwo-ui-typings";
+import { isNil, map } from "lodash";
+import prettyBytes from "pretty-bytes";
+
+interface IDownloadsPanelProps {
+  data: any;
+}
+
+export const DownloadsPanel = (
+  props: IDownloadsPanelProps,
+): ReactElement | null => {
+  const downloadProgressTick = useSelector(
+    (state: RootState) => state.airdcpp.downloadProgressData,
+  );
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(getDownloadProgress("12312"));
+  }, [dispatch]);
+  return !isNil(downloadProgressTick) ? (
+    <div className="column is-one-quarter">
+      {JSON.stringify(downloadProgressTick)}
+      <progress
+        className="progress is-small is-success"
+        value={downloadProgressTick.downloaded_bytes}
+        max={downloadProgressTick.size}
+      >
+        {(parseInt(downloadProgressTick.downloaded_bytes) /
+          parseInt(downloadProgressTick.size)) *
+          100}
+        %
+      </progress>
+      <dl>
+        <dt>{downloadProgressTick.name}</dt>
+        <dd>
+          {prettyBytes(downloadProgressTick.downloaded_bytes)} of
+          {prettyBytes(downloadProgressTick.size)}
+        </dd>
+        <dd>
+          {prettyBytes(downloadProgressTick.speed)} per second. Time left:
+          {parseInt(downloadProgressTick.seconds_left) / 60}
+        </dd>
+        <dd>{downloadProgressTick.target}</dd>
+      </dl>
+    </div>
+  ) : null;
+};
+
+export default DownloadsPanel;