🔧 Refactoring the airdcpp reducer

src/client/components/AcquisitionPanel.tsx

@@ -16,7 +16,7 @@ export const AcquisitionPanel = (
   const sanitizedVolumeName = volumeName.replace(/[^a-zA-Z0-9 ]/g, "");
   const issueName = props.comicBookMetadata.sourcedMetadata.comicvine.name;
   const airDCPPSearchResults = useSelector(
-    (state: RootState) => state.airdcpp.results,
+    (state: RootState) => { console.log(state); return state.airdcpp.results;}
   );
   const isAirDCPPSearchInProgress = useSelector(
     (state: RootState) => state.airdcpp.isAirDCPPSearchInProgress,
@@ -35,13 +35,15 @@ export const AcquisitionPanel = (
     },
     [dispatch],
   );
+
   const dcppQuery = {
     query: {
-      pattern: `${sanitizedVolumeName}`,
+      pattern: `${sanitizedVolumeName.replace(/#/g, "")}`,
+      // pattern: "Templier T2.cbr",
       extensions: ["cbz", "cbr"],
     },
     hub_urls: ["nmdcs://piter.feardc.net:411"],
-    priority: 1,
+    priority: 5,
   };
 
   const downloadDCPPResult = useCallback(
@@ -102,7 +104,8 @@ export const AcquisitionPanel = (
       </div>
       {/* AirDC++ results */}
       <div>
-        {!isNil(airDCPPSearchResults) && (
+          ASDASD {JSON.stringify(airDCPPSearchResults)}
+        {/* {!isNil(airDCPPSearchResults) && (
           <table className="table is-striped">
             <thead>
               <tr>
@@ -169,7 +172,7 @@ export const AcquisitionPanel = (
               })}
             </tbody>
           </table>
-        )}
+        )} */}
       </div>
     </>
   );

src/client/components/ComicDetail.tsx

@@ -85,7 +85,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
       name: "Volume Information",
       icon: <i className="fas fa-layer-group"></i>,
       content: isComicBookMetadataAvailable ? (
-        <>
+        <div key={1}>
           <div className="columns">
             <div className="column is-narrow">
               <figure className="card-image">
@@ -137,26 +137,28 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
               )}
             ></div>
           </div>
-        </>
+        </div>
       ) : null,
     },
     {
       id: 2,
       icon: <i className="fas fa-puzzle-piece"></i>,
       name: "Other Metadata",
-      content: <div>bastard</div>,
+      content: <div key={2}>bastard</div>,
     },
     {
       id: 3,
       icon: <i className="fas fa-download"></i>,
       name: "Acquisition",
-      content: <AcquisitionPanel comicBookMetadata={comicBookDetailData} />,
+      content: (
+        <AcquisitionPanel comicBookMetadata={comicBookDetailData} key={3} />
+      ),
     },
     {
       id: 4,
       icon: <i className="fas fa-cloud-download-alt"></i>,
       name: "Downloads",
-      content: <DownloadsPanel data={comicBookDetailData} />,
+      content: <DownloadsPanel data={comicBookDetailData} key={4} />,
     },
   ];
   const MetadataTabGroup = () => {

src/client/components/DownloadsPanel.tsx

@@ -60,11 +60,11 @@ export const DownloadsPanel = (
           {!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>