🔎 Displaying AirDCPP results on the UI

src/client/actions/airdcpp.actions.tsx

@@ -1,5 +1,10 @@
 import SocketService from "../services/DcppSearchService";
-import { SearchQuery, SearchInstance, PriorityEnum } from "threetwo-ui-typings";
+import {
+  SearchQuery,
+  SearchInstance,
+  PriorityEnum,
+  SearchResponse,
+} from "threetwo-ui-typings";
 import {
   AIRDCPP_SEARCH_INSTANCE_CREATED,
   AIRDCPP_SEARCH_RESULTS_RECEIVED,
@@ -17,52 +22,19 @@ function sleep(ms: number): Promise<NodeJS.Timeout> {
 
 export const search = (data: SearchData) => async (dispatch) => {
   await SocketService.connect("admin", "password");
+  await sleep(10000);
   const instance: SearchInstance = await SocketService.post("search");
-
-  dispatch({
-    type: AIRDCPP_SEARCH_INSTANCE_CREATED,
-    searchInstance: instance,
-  });
-
-  const unsubscribe = await SocketService.addListener(
-    "search",
-    "search_hub_searches_sent",
-    (searchInfo) => {
-      onSearchSent(data, instance, unsubscribe, searchInfo);
-    },
-    instance.id,
-  );
-
-  const searchQueueInfo = await SocketService.post(
+  await SocketService.post<SearchResponse>(
     `search/${instance.id}/hub_search`,
     data,
   );
-  return searchQueueInfo;
+  await sleep(10000);
+  const results = await SocketService.get(`search/${instance.id}/results/0/25`);
+  console.log("results", results);
+  dispatch({
+    type: AIRDCPP_SEARCH_RESULTS_RECEIVED,
+    results,
+  });
+  SocketService.disconnect();
+  return results;
 };
-
-const onSearchSent =
-  (item, instance, unsubscribe, searchInfo) => async (dispatch) => {
-    // Collect the results for 5 seconds
-    await sleep(5000);
-
-    // Get only the first result (results are sorted by relevance)
-    const results = await SocketService.get(
-      `search/${instance.id}/results/0/100`,
-    );
-
-    if (results.length > 0) {
-      // We have results, download the best one
-      console.log("SASAAAA", results);
-      dispatch({
-        type: AIRDCPP_SEARCH_RESULTS_RECEIVED,
-        results,
-      });
-      // const result = results[0];
-      // SocketService.post(`search/${instance.id}/results/${result.id}/download`, {
-      //   priority: Utils.toApiPriority(item.priority),
-      //   target_directory: item.target_directory,
-      // });
-    }
-    // Remove listener for this search instance
-    unsubscribe();
-  };

src/client/components/AcquisitionPanel.tsx

@@ -2,6 +2,7 @@ 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";
+import { each, isNil, map } from "lodash";
 
 interface IAcquisitionPanelProps {
   comicBookMetadata: any;
@@ -13,9 +14,9 @@ export const AcquisitionPanel = (
   const volumeName =
     props.comicBookMetadata.sourcedMetadata.comicvine.volumeInformation.name;
   const issueName = props.comicBookMetadata.sourcedMetadata.comicvine.name;
-  const airDCPPSearchResults = useSelector((state: RootState) => {
-      console.log(state);
-  });
+  const airDCPPSearchResults = useSelector(
+    (state: RootState) => state.airdcpp.results,
+  );
   const dispatch = useDispatch();
   const getDCPPSearchResults = useCallback(
     (searchQuery) => {
@@ -45,7 +46,22 @@ export const AcquisitionPanel = (
       </button>
 
       {/* results */}
-      <pre>{JSON.stringify(airDCPPSearchResults)}</pre>
+      <table className="table is-striped">
+          <thead>
+              <tr>
+                  <th>Name</th>
+                  <th>Path</th>
+              </tr>
+          </thead>
+        {map(airDCPPSearchResults, ({ name, path }) => {
+          return (
+            <tr>
+              <td>{name}</td>
+              <td>{path}</td>
+            </tr>
+          );
+        })}
+      </table>
     </>
   );
 };

src/client/components/ComicDetail.tsx

@@ -60,6 +60,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
   }, [page, dispatch]);
 
   const openDrawerWithCVMatches = useCallback(() => {
+    console.log("here")
     setVisible(true);
     dispatch(fetchComicVineMatches(comicBookDetailData));
   }, [dispatch, comicBookDetailData]);
@@ -299,7 +300,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
                     role="menu"
                   >
                     <div className="dropdown-content">
-                      <div
+                      <a
                         className="dropdown-item"
                         onClick={openDrawerWithCVMatches}
                       >
@@ -307,7 +308,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
                           <i className="fas fa-magic"></i>
                         </span>
                         <span>Match on ComicVine</span>
-                      </div>
+                      </a>
                       <hr className="dropdown-divider" />
                       <div className="dropdown-item">
                         <span className="icon">

src/client/reducers/airdcpp.reducer.ts

@@ -28,6 +28,8 @@ function airdcppReducer(state = initialState, action) {
         isAirDCPPSearchInProgress: false,
         results: action.results,
       };
+    default:
+      return state;
   }
 }
 

src/client/reducers/index.js

@@ -2,14 +2,12 @@ import { combineReducers } from "redux";
 import { connectRouter } from "connected-react-router";
 import comicinfoReducer from "../reducers/comicinfo.reducer";
 import fileOpsReducer from "../reducers/fileops.reducer";
-import airdcppReducer from "./airdcpp.reducer";
+import airdcppReducer from "../reducers/airdcpp.reducer";
 
 export default (history) =>
   combineReducers({
     comicInfo: comicinfoReducer,
     fileOps: fileOpsReducer,
-    acquisition: {
-      airdcpp: airdcppReducer,
-    },
+    airdcpp: airdcppReducer,
     router: connectRouter(history),
   });