🔎 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
- *
- * using {@link Renderer}.
- *
- * Used by external plugins
- *
- * @param  {Object} options
- * @return {Promise<string>}                HTML of the page
+ * @return the comic book metadata
  */
-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,21 +107,52 @@ export const AcquisitionPanel = (
     <>
       <div className="comic-detail columns">
         {!isEmpty(ADCPPSocket) ? (
-          <div className="column is-one-fifth">
-            <button
-              className={
-                isAirDCPPSearchInProgress
-                  ? "button is-loading is-warning"
-                  : "button"
-              }
-              onClick={() => getDCPPSearchResults(dcppQuery)}
-            >
-              <span className="icon is-small">
-                <img src="/img/airdcpp_logo.svg" />
-              </span>
-              <span className="airdcpp-text">Search on AirDC++</span>
-            </button>
-          </div>
+          <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
+                            ? "button is-loading is-warning"
+                            : "button"
+                        }
+                        onClick={() => getDCPPSearchResults(dcppQuery)}
+                      >
+                        <span className="icon is-small">
+                          <img src="/img/airdcpp_logo.svg" />
+                        </span>
+                        <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,131 +163,131 @@ export const AcquisitionPanel = (
             </article>
           </div>
         )}
-        {/* AirDC++ search instance details */}
-        {!isNil(searchInfo) && !isNil(searchInstance) && (
-          <>
-            <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">
-                          {userSettings.directConnect.client.hubs.map(
-                            ({ value }) => (
-                              <span className="tag is-warning" key={value}>
-                                {value}
-                              </span>
-                            ),
-                          )}
-                        </div>
-                      </dt>
-                      <dt>Query: {searchInfo.query.pattern}</dt>
-                      <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>
-                      <dd>Expires in: {searchInstance.expires_in}</dd>
-                    </dl>
-                  </div>
-                </div>
-              </div>
-            </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">
+                <dl>
+                  <dt>
+                    <div className="tags mb-1">
+                      {userSettings.directConnect.client.hubs.map(
+                        ({ value }) => (
+                          <span className="tag is-warning" key={value}>
+                            {value}
+                          </span>
+                        ),
+                      )}
+                    </div>
+                  </dt>
+                  <dt>Query: {searchInfo.query.pattern}</dt>
+                  <dd>Extensions: {searchInfo.query.extensions.join(", ")}</dd>
+                  <dd>File type: {searchInfo.query.file_type}</dd>
+                </dl>
+              </div>
+            </div>
+          </div>
+          <div className="column is-one-quarter is-size-7">
+            <div className="card">
+              <div className="card-content">
+                <dl>
+                  <dt>Search Instance: {searchInstance.id}</dt>
+                  <dt>Owned by {searchInstance.owner}</dt>
+                  <dd>Expires in: {searchInstance.expires_in}</dd>
+                </dl>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* AirDC++ results */}
       <div className="columns">
         {!isNil(airDCPPSearchResults) && !isEmpty(airDCPPSearchResults) ? (
-          <table className="table">
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th>Type</th>
-                <th>Slots</th>
-                <th>Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              {map(airDCPPSearchResults, ({ result }, idx) => {
-                return (
-                  <tr
-                    key={idx}
-                    className={!isNil(result.dupe) ? "dupe-search-result" : ""}
-                  >
-                    <td>
-                      <p className="mb-2">
-                        {result.type.id === "directory" ? (
-                          <i className="fas fa-folder"></i>
-                        ) : null}{" "}
-                        {ellipsize(result.name, 70)}
-                      </p>
+          <div className="column">
+            <table className="table">
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>Type</th>
+                  <th>Slots</th>
+                  <th>Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {map(airDCPPSearchResults, ({ result }, idx) => {
+                  return (
+                    <tr
+                      key={idx}
+                      className={
+                        !isNil(result.dupe) ? "dupe-search-result" : ""
+                      }
+                    >
+                      <td>
+                        <p className="mb-2">
+                          {result.type.id === "directory" ? (
+                            <i className="fas fa-folder"></i>
+                          ) : null}{" "}
+                          {ellipsize(result.name, 70)}
+                        </p>
 
-                      <dl>
-                        <dd>
-                          <div className="tags">
-                            {!isNil(result.dupe) ? (
-                              <span className="tag is-warning">Dupe</span>
-                            ) : null}
-                            <span className="tag is-light is-info">
-                              {result.users.user.nicks}
-                            </span>
-                            {result.users.user.flags.map((flag, idx) => (
-                              <span className="tag is-light" key={idx}>
-                                {flag}
+                        <dl>
+                          <dd>
+                            <div className="tags">
+                              {!isNil(result.dupe) ? (
+                                <span className="tag is-warning">Dupe</span>
+                              ) : null}
+                              <span className="tag is-light is-info">
+                                {result.users.user.nicks}
                               </span>
-                            ))}
-                          </div>
-                        </dd>
-                      </dl>
-                    </td>
-                    <td>
-                      <span className="tag is-light is-info">
-                        {result.type.id === "directory"
-                          ? "directory"
-                          : result.type.str}
-                      </span>
-                    </td>
-                    <td>
-                      <div className="tags has-addons">
-                        <span className="tag is-success">
-                          {result.slots.free} free
+                              {result.users.user.flags.map((flag, idx) => (
+                                <span className="tag is-light" key={idx}>
+                                  {flag}
+                                </span>
+                              ))}
+                            </div>
+                          </dd>
+                        </dl>
+                      </td>
+                      <td>
+                        <span className="tag is-light is-info">
+                          {result.type.id === "directory"
+                            ? "directory"
+                            : result.type.str}
                         </span>
-                        <span className="tag is-light">
-                          {result.slots.total}
-                        </span>
-                      </div>
-                    </td>
-                    <td>
-                      <a
-                        onClick={() =>
-                          downloadDCPPResult(
-                            searchInstance.id,
-                            result.id,
-                            props.comicObjectid,
-                          )
-                        }
-                      >
-                        <i className="fas fa-file-download"></i>
-                      </a>
-                    </td>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
+                      </td>
+                      <td>
+                        <div className="tags has-addons">
+                          <span className="tag is-success">
+                            {result.slots.free} free
+                          </span>
+                          <span className="tag is-light">
+                            {result.slots.total}
+                          </span>
+                        </div>
+                      </td>
+                      <td>
+                        <a
+                          onClick={() =>
+                            downloadDCPPResult(
+                              searchInstance.id,
+                              result.id,
+                              props.comicObjectid,
+                            )
+                          }
+                        >
+                          <i className="fas fa-file-download"></i>
+                        </a>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
         ) : (
           <div className="column is-three-fifths">
             <article className="message is-info">

src/client/components/Search.tsx

@@ -8,9 +8,9 @@ import { search } from "../services/api/SearchApi";
 import { Form, Field } from "react-final-form";
 import Card from "./Carda";
 
-interface ISearchProps {}
+interface ISearchProps { }
 
-export const Search = ({}: ISearchProps): ReactElement => {
+export const Search = ({ }: ISearchProps): ReactElement => {
   const formData = {
     search: "",
   };
@@ -83,7 +83,7 @@ export const Search = ({}: ISearchProps): ReactElement => {
             )}
           />
           {!isNil(comicVineSearchResults.results) &&
-          !isEmpty(comicVineSearchResults.results) ? (
+            !isEmpty(comicVineSearchResults.results) ? (
             <div>
               {comicVineSearchResults.results.map((result) => {
                 return (