🔧 AirDCPP UI integration

src/client/components/AcquisitionPanel.tsx

@@ -0,0 +1,53 @@
+import React, { useState, useEffect, useCallback, ReactElement } from "react";
+import { search } from "../actions/airdcpp.actions";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "threetwo-ui-typings";
+
+interface IAcquisitionPanelProps {
+  comicBookMetadata: any;
+}
+
+export const AcquisitionPanel = (
+  props: IAcquisitionPanelProps,
+): ReactElement => {
+  const volumeName =
+    props.comicBookMetadata.sourcedMetadata.comicvine.volumeInformation.name;
+  const issueName = props.comicBookMetadata.sourcedMetadata.comicvine.name;
+  const airDCPPSearchResults = useSelector((state: RootState) => {
+      console.log(state);
+  });
+  const dispatch = useDispatch();
+  const getDCPPSearchResults = useCallback(
+    (searchQuery) => {
+      dispatch(search(searchQuery));
+    },
+    [dispatch],
+  );
+  const dcppQuery = {
+    query: {
+      pattern: `${volumeName}`,
+      // file_type: "compressed",
+      extensions: ["cbz", "cbr"],
+    },
+    hub_urls: [
+      "adcs://novosibirsk.dc-dev.club:7111/?kp=SHA256/4XFHJFFBFEI2RS75FPRPPXPZMMKPXR764ABVVCC2QGJPQ34SDZGA",
+      "dc.fly-server.ru",
+    ],
+    priority: 1,
+  };
+  return (
+    <>
+      <button
+        className="button"
+        onClick={() => getDCPPSearchResults(dcppQuery)}
+      >
+        Search on AirDC++
+      </button>
+
+      {/* results */}
+      <pre>{JSON.stringify(airDCPPSearchResults)}</pre>
+    </>
+  );
+};
+
+export default AcquisitionPanel;

src/client/components/ComicDetail.tsx

@@ -3,6 +3,7 @@ import { useParams } from "react-router-dom";
 import Card from "./Carda";
 import MatchResult from "./MatchResult";
 import ComicVineSearchForm from "./ComicVineSearchForm";
+import AcquisitionPanel from "./AcquisitionPanel";
 
 import { css } from "@emotion/react";
 import PuffLoader from "react-spinners/PuffLoader";
@@ -143,6 +144,12 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
       name: "Other Metadata",
       content: <div>bastard</div>,
     },
+    {
+      id: 3,
+      icon: <i className="fas fa-download"></i>,
+      name: "Acquisition",
+      content: <AcquisitionPanel comicBookMetadata={comicBookDetailData} />,
+    },
   ];
   const MetadataTabGroup = () => {
     return (

src/client/components/Search.tsx

@@ -35,22 +35,6 @@ export const Search = ({}: ISearchProps): ReactElement => {
     [dispatch],
   );
 
-  const getDCPPSearchResults = useCallback((searchQuery) => {
-    search(searchQuery);
-  }, []);
-  const dcppQuery = {
-    query: {
-      pattern: "Iron Man - V1 194",
-      // file_type: "compressed",
-      extensions: ["cbz", "cbr"],
-    },
-    hub_urls: [
-      "adcs://novosibirsk.dc-dev.club:7111/?kp=SHA256/4XFHJFFBFEI2RS75FPRPPXPZMMKPXR764ABVVCC2QGJPQ34SDZGA",
-      "dc.fly-server.ru",
-    ],
-    priority: 1,
-  };
-
   const addToLibrary = useCallback(
     (comicData) => dispatch(importToDB(comicData)),
     [],