🔎 DC++ manual search scaffold

src/client/actions/comicinfo.actions.tsx

@@ -1,8 +1,9 @@
 import axios from "axios";
 import rateLimiter from "axios-rate-limit";
-import { AxiosCacheRequestConfig, createCacheAdapter } from 'axios-simple-cache-adapter';
+import {
-
+  AxiosCacheRequestConfig,
-
+  createCacheAdapter,
+} from "axios-simple-cache-adapter";
 import qs from "qs";
 import {
   CV_SEARCH_SUCCESS,
@@ -25,7 +26,6 @@ import {
   LIBRARY_SERVICE_BASE_URI,
 } from "../constants/endpoints";
 
-
 const axiosCacheAdapter = createCacheAdapter();
 const http = rateLimiter(axios.create(), {
   maxRequests: 1,
@@ -39,7 +39,6 @@ export const getWeeklyPullList = (options) => async (dispatch) => {
       type: CV_WEEKLY_PULLLIST_CALL_IN_PROGRESS,
     });
 
-
     await axios(`${COMICVINE_SERVICE_URI}/getWeeklyPullList`, {
       method: "get",
       params: options,
@@ -145,7 +144,7 @@ export const analyzeLibrary = (issues) => async (dispatch) => {
   });
 };
 
-export const getLibraryStatistics = () => async dispatch => {
+export const getLibraryStatistics = () => async (dispatch) => {
   dispatch({
     type: LIBRARY_STATISTICS_CALL_IN_PROGRESS,
   });

src/client/actions/fileops.actions.tsx

@@ -52,15 +52,9 @@ export async function walkFolder(path: string): Promise<Array<IFolderData>> {
 }
 /**
  * Fetches comic book covers along with some metadata
- *
+ * @return the comic book metadata
- * using {@link Renderer}.
- *
- * Used by external plugins
- *
- * @param  {Object} options
- * @return {Promise<string>}                HTML of the page
  */
-export const fetchComicBookMetadata = (options) => async (dispatch) => {
+export const fetchComicBookMetadata = () => async (dispatch) => {
   const extractionOptions = {
     extractTarget: "cover",
     targetExtractionFolder: "./userdata/covers",
@@ -97,6 +91,11 @@ export const toggleImportQueueStatus = (options) => async (dispatch) => {
     data: { manjhul: "jigyadam", action: options.action },
   });
 };
+/**
+ * Fetches comic book metadata for various types
+ * @return metadata for the comic book object categories
+ * @param options
+ **/
 export const getComicBooks = (options) => async (dispatch) => {
   const { paginationOptions, predicate, comicStatus } = options;
 
@@ -127,6 +126,11 @@ export const getComicBooks = (options) => async (dispatch) => {
   }
 };
 
+/**
+ * Makes a call to library service to import the comic book metadata into the ThreeTwo data store.
+ * @returns Nothing.
+ * @param payload
+ */
 export const importToDB = (payload?: any) => (dispatch) => {
   try {
     const comicBookMetadata = {
@@ -164,6 +168,7 @@ export const importToDB = (payload?: any) => (dispatch) => {
     });
   }
 };
+
 export const fetchVolumeGroups = () => async (dispatch) => {
   try {
     dispatch({

src/client/components/ComicDetail/AcquisitionPanel.tsx

@@ -13,6 +13,7 @@ import {
 import { useDispatch, useSelector } from "react-redux";
 import { RootState, SearchInstance } from "threetwo-ui-typings";
 import ellipsize from "ellipsize";
+import { Form, Field } from "react-final-form";
 import { isEmpty, isNil, map } from "lodash";
 import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
 interface IAcquisitionPanelProps {
@@ -106,7 +107,33 @@ export const AcquisitionPanel = (
     <>
       <div className="comic-detail columns">
         {!isEmpty(ADCPPSocket) ? (
-          <div className="column is-one-fifth">
+          <Form
+            onSubmit={getDCPPSearchResults}
+            initialValues={{
+              issueName,
+            }}
+            render={({ handleSubmit, form, submitting, pristine, values }) => (
+              <div 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">
+                              Use this to manually override the search.
+                            </span>
+                          </div>
+                        );
+                      }}
+                    </Field>
+
+                    <div className="column">
                       <button
                         className={
                           isAirDCPPSearchInProgress
@@ -121,6 +148,11 @@ export const AcquisitionPanel = (
                         <span className="airdcpp-text">Search on AirDC++</span>
                       </button>
                     </div>
+                  </div>
+                </div>
+              </div>
+            )}
+          />
         ) : (
           <div className="column is-three-fifths">
             <article className="message is-info">
@@ -131,13 +163,14 @@ export const AcquisitionPanel = (
             </article>
           </div>
         )}
+      </div>
+
       {/* AirDC++ search instance details */}
       {!isNil(searchInfo) && !isNil(searchInstance) && (
-          <>
+        <div className="columns">
           <div className="column is-one-quarter is-size-7">
             <div className="card">
               <div className="card-content">
-                  <div className="content">
                 <dl>
                   <dt>
                     <div className="tags mb-1">
@@ -151,19 +184,15 @@ export const AcquisitionPanel = (
                     </div>
                   </dt>
                   <dt>Query: {searchInfo.query.pattern}</dt>
-                      <dd>
+                  <dd>Extensions: {searchInfo.query.extensions.join(", ")}</dd>
-                        Extensions: {searchInfo.query.extensions.join(", ")}
-                      </dd>
                   <dd>File type: {searchInfo.query.file_type}</dd>
                 </dl>
               </div>
             </div>
           </div>
-            </div>
           <div className="column is-one-quarter is-size-7">
             <div className="card">
               <div className="card-content">
-                  <div className="content">
                 <dl>
                   <dt>Search Instance: {searchInstance.id}</dt>
                   <dt>Owned by {searchInstance.owner}</dt>
@@ -173,12 +202,12 @@ export const AcquisitionPanel = (
             </div>
           </div>
         </div>
-          </>
       )}
-      </div>
+
       {/* AirDC++ results */}
       <div className="columns">
         {!isNil(airDCPPSearchResults) && !isEmpty(airDCPPSearchResults) ? (
+          <div className="column">
             <table className="table">
               <thead>
                 <tr>
@@ -193,7 +222,9 @@ export const AcquisitionPanel = (
                   return (
                     <tr
                       key={idx}
-                    className={!isNil(result.dupe) ? "dupe-search-result" : ""}
+                      className={
+                        !isNil(result.dupe) ? "dupe-search-result" : ""
+                      }
                     >
                       <td>
                         <p className="mb-2">
@@ -256,6 +287,7 @@ export const AcquisitionPanel = (
                 })}
               </tbody>
             </table>
+          </div>
         ) : (
           <div className="column is-three-fifths">
             <article className="message is-info">