🪛 WIP on the DCPP search results

src/client/actions/airdcpp.actions.tsx

@@ -8,6 +8,8 @@ import {
 import {
   AIRDCPP_SEARCH_INSTANCE_CREATED,
   AIRDCPP_SEARCH_RESULTS_RECEIVED,
+  AIRDCPP_HUB_SEARCHES_SENT,
+  AIRDCPP_HUB_USER_CONNECTED,
 } from "../constants/action-types";
 
 interface SearchData {
@@ -21,16 +23,28 @@ function sleep(ms: number): Promise<NodeJS.Timeout> {
 }
 
 export const search = (data: SearchData) => async (dispatch) => {
-  await SocketService.connect("admin", "password");
+  await SocketService.connect("admin", "password", true);
-  await sleep(10000);
   const instance: SearchInstance = await SocketService.post("search");
+
+  SocketService.addListener(
+    `search/${instance.id}`,
+    "search_hub_searches_sent",
+    async (searchInfo) => {
+        console.log("As", searchInfo)
+      // Collect the results for 5 seconds before fetching them
+      dispatch({
+        type: AIRDCPP_HUB_SEARCHES_SENT,
+      });
+    },
+  );
+
   await SocketService.post<SearchResponse>(
     `search/${instance.id}/hub_search`,
     data,
   );
+
   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,

src/client/components/AcquisitionPanel.tsx

@@ -17,6 +17,9 @@ export const AcquisitionPanel = (
   const airDCPPSearchResults = useSelector(
     (state: RootState) => state.airdcpp.results,
   );
+  const searchStatus = useSelector(
+    (state: RootState) => state.airdcpp.searchStatus,
+  );
   const dispatch = useDispatch();
   const getDCPPSearchResults = useCallback(
     (searchQuery) => {
@@ -41,7 +44,7 @@ export const AcquisitionPanel = (
       >
         Search on AirDC++
       </button>
-
+        <p>{searchStatus}</p>
       {/* results */}
       {!isNil(airDCPPSearchResults) && (
         <table className="table is-striped">
@@ -66,15 +69,14 @@ export const AcquisitionPanel = (
                     <dl>
                       <dd>
                         <div className="tags">
-                           
+                          <span className="tag is-light is-info">
-                              <span className="tag is-light is-info">
+                            {users.user.nicks}
-                                {users.user.nicks}
+                          </span>
-                              </span>
+                          {users.user.flags.map((flag, idx) => (
-                            {users.user.flags.map((flag, idx) => (
+                            <span className="tag is-light" key={idx}>
-                              <span className="tag is-light" key={idx}>
+                              {flag}
-                                {flag}
+                            </span>
-                              </span>
+                          ))}
-                            ))}
                         </div>
                       </dd>
                     </dl>

src/client/constants/action-types.ts

@@ -36,3 +36,6 @@ export const AIRDCPP_SEARCH_INSTANCE_CREATED =
 export const AIRDCPP_SEARCH_IN_PROGRESS = "AIRDCPP_SEARCH_IN_PROGRESS";
 export const AIRDCPP_SEARCH_RESULTS_RECEIVED =
   "AIRDCPP_SEARCH_RESULTS_RECEIVED";
+
+export const AIRDCPP_HUB_SEARCHES_SENT = "AIRDCPP_HUB_SEARCHES_SENT";
+export const AIRDCPP_HUB_USER_CONNECTED = "AIRDCPP_HUB_USER_CONNECTED";

src/client/reducers/airdcpp.reducer.ts

@@ -2,18 +2,27 @@ import {
   AIRDCPP_SEARCH_INSTANCE_CREATED,
   AIRDCPP_SEARCH_IN_PROGRESS,
   AIRDCPP_SEARCH_RESULTS_RECEIVED,
+  AIRDCPP_HUB_SEARCHES_SENT,
+  AIRDCPP_HUB_USER_CONNECTED,
 } from "../constants/action-types";
 
 const initialState = {
   isAirDCPPSearchInProgress: false,
+  searchStatus: "",
 };
 
 function airdcppReducer(state = initialState, action) {
   switch (action.type) {
+    case AIRDCPP_HUB_USER_CONNECTED:
+        return {
+            ...state,
+            searchStatus: "Hub user connected",
+        }
     case AIRDCPP_SEARCH_INSTANCE_CREATED:
       return {
         ...state,
         searchInstance: action.searchInstance,
+        searchStatus: "Search Instance created",
       };
 
     case AIRDCPP_SEARCH_IN_PROGRESS:
@@ -28,6 +37,13 @@ function airdcppReducer(state = initialState, action) {
         isAirDCPPSearchInProgress: false,
         results: action.results,
       };
+    case AIRDCPP_HUB_SEARCHES_SENT:
+      return {
+        ...state,
+        searchStatus: "Hub searches sent",
+        isAirDCPPSearchInProgress: true,
+      };
+
     default:
       return state;
   }