🏗️ Wiring up the DC++ search method

src/client/actions/airdcpp.actions.tsx

@@ -59,17 +59,15 @@ export const toggleAirDCPPSocketConnectionStatus =
         break;
     }
   };
-export const search =
+export const search = async (data: SearchData, ADCPPSocket: any) => {
-  (data: SearchData, ADCPPSocket: any, credentials: any) =>
-  async (dispatch) => {
   try {
     if (!ADCPPSocket.isConnected()) {
       await ADCPPSocket();
     }
     const instance: SearchInstance = await ADCPPSocket.post("search");
-      dispatch({
+    // dispatch({
-        type: AIRDCPP_SEARCH_IN_PROGRESS,
+    //   type: AIRDCPP_SEARCH_IN_PROGRESS,
-      });
+    // });
 
     // We want to get notified about every new result in order to make the user experience better
     await ADCPPSocket.addListener(
@@ -78,11 +76,10 @@ export const search =
       async (groupedResult) => {
         // ...add the received result in the UI
         // (it's probably a good idea to have some kind of throttling for the UI updates as there can be thousands of results)
-
+        // dispatch({
-          dispatch({
+        //   type: AIRDCPP_SEARCH_RESULTS_ADDED,
-            type: AIRDCPP_SEARCH_RESULTS_ADDED,
+        //   groupedResult,
-            groupedResult,
+        // });
-          });
       },
       instance.id,
     );
@@ -93,10 +90,10 @@ export const search =
       "search_result_updated",
       async (groupedResult) => {
         // ...update properties of the existing result in the UI
-          dispatch({
+        // dispatch({
-            type: AIRDCPP_SEARCH_RESULTS_UPDATED,
+        //   type: AIRDCPP_SEARCH_RESULTS_UPDATED,
-            groupedResult,
+        //   groupedResult,
-          });
+        // });
       },
       instance.id,
     );
@@ -110,9 +107,7 @@ export const search =
         await sleep(5000);
 
         // Check the number of received results (in real use cases we should know that even without calling the API)
-          const currentInstance = await ADCPPSocket.get(
+        const currentInstance = await ADCPPSocket.get(`search/${instance.id}`);
-            `search/${instance.id}`,
-          );
         if (currentInstance.result_count === 0) {
           // ...nothing was received, show an informative message to the user
           console.log("No more search results.");

src/client/components/ComicDetail/AcquisitionPanel.tsx

@@ -88,22 +88,19 @@ export const AcquisitionPanel = (
     setDcppQuery(dcppSearchQuery);
   }, []);
 
-  const getDCPPSearchResults = useCallback(async (searchQuery) => {
+  const getDCPPSearchResults = async (searchQuery) => {
+    console.log(hubs);
     const manualQuery = {
       query: {
         pattern: `${searchQuery.issueName}`,
         extensions: ["cbz", "cbr", "cb7"],
       },
-      hub_urls: map(hubs, (item) => item.value),
+      hub_urls: map(hubs, (hub) => hub.hub_url),
       priority: 5,
     };
-    // dispatch(
+
-    //   search(manualQuery, airDCPPConfiguration.airDCPPState.socket, {
+    search(manualQuery, airDCPPSocketInstance);
-    //     username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`,
+  };
-    //     password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`,
-    //   }),
-    // );
-  }, []);
 
   // download via AirDC++
   const downloadDCPPResult = useCallback(
@@ -137,7 +134,74 @@ export const AcquisitionPanel = (
     },
     [],
   );
-  return <></>;
+  return (
+    <>
+      <div className="comic-detail columns">
+        {!isEmpty(airDCPPSocketInstance) ? (
+          <Form
+            onSubmit={getDCPPSearchResults}
+            initialValues={{
+              issueName,
+            }}
+            render={({ handleSubmit, form, submitting, pristine, values }) => (
+              <form
+                onSubmit={handleSubmit}
+                className="column is-three-quarters"
+              >
+                <div className="box search">
+                  <div className="columns">
+                    <Field name="issueName">
+                      {({ input, meta }) => {
+                        return (
+                          <div className="column is-two-thirds">
+                            <input
+                              {...input}
+                              className="input main-search-bar is-medium"
+                              placeholder="Type an issue/volume name"
+                            />
+                            <span className="help is-clearfix is-light is-info">
+                              This is the auto-detected title; you may need to
+                              change it to get better matches if the
+                              auto-detected one doesn't work.
+                            </span>
+                          </div>
+                        );
+                      }}
+                    </Field>
+
+                    <div className="column">
+                      <button
+                        type="submit"
+                        className={
+                          false
+                            ? "button is-loading is-warning"
+                            : "button is-success is-light"
+                        }
+                      >
+                        <span className="icon is-small">
+                          <img src="/src/client/assets/img/airdcpp_logo.svg" />
+                        </span>
+                        <span className="airdcpp-text">Search on AirDC++</span>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </form>
+            )}
+          />
+        ) : (
+          <div className="column is-three-fifths">
+            <article className="message is-info">
+              <div className="message-body is-size-6 is-family-secondary">
+                AirDC++ is not configured. Please configure it in{" "}
+                <code>Settings &gt; AirDC++ &gt; Connection</code>.
+              </div>
+            </article>
+          </div>
+        )}
+      </div>
+    </>
+  );
 };
 
 export default AcquisitionPanel;