🕵🏼 Added manual search form for CV matching

src/client/actions/fileops.actions.tsx

@@ -194,6 +194,7 @@ export const fetchVolumeGroups = () => async (dispatch) => {
 };
 export const fetchComicVineMatches =
   (searchPayload, issueSearchQuery, seriesSearchQuery?) => async (dispatch) => {
+    console.log(issueSearchQuery);
     try {
       dispatch({
         type: CV_API_CALL_IN_PROGRESS,
@@ -223,7 +224,6 @@ export const fetchComicVineMatches =
           },
         })
         .then((response) => {
-          console.log(response);
           let matches: any = [];
           if (
             !isNil(response.data.results) &&
@@ -233,7 +233,6 @@ export const fetchComicVineMatches =
           } else {
             matches = response.data.map((match) => match);
           }
-          console.log(matches);
           dispatch({
             type: CV_SEARCH_SUCCESS,
             searchResults: matches,

src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx

@@ -21,8 +21,8 @@ export const AirDCPPSettingsForm = (): ReactElement => {
     catch {
       return null;
     }
-
   }
+  
   const onSubmit = useCallback(async (values) => {
     try {
       airDCPPSettings.setSettings(values);

src/client/components/ComicDetail/ActionMenu/Menu.tsx

@@ -18,7 +18,6 @@ export const Menu = (props): ReactElement => {
     } else if (!isEmpty(data.sourcedMetadata)) {
       issueSearchQuery = refineQuery(data.sourcedMetadata.comicvine.name);
     }
-
     dispatch(fetchComicVineMatches(data, issueSearchQuery, seriesSearchQuery));
     setSlidingPanelContentId("CVMatches");
     setVisible(true);

src/client/components/ComicDetail/ComicDetail.tsx

@@ -5,6 +5,7 @@ import Card from "../Carda";
 import { ComicVineMatchPanel } from "./ComicVineMatchPanel";
 
 import { RawFileDetails } from "./RawFileDetails";
+import { ComicVineSearchForm } from "../ComicVineSearchForm";
 
 import TabControls from "./TabControls";
 import { EditMetadataPanel } from "./EditMetadataPanel";
@@ -40,6 +41,15 @@ type ComicDetailProps = {};
  */
 
 export const ComicDetail = (data: ComicDetailProps): ReactElement => {
+  const {
+    data: {
+      _id,
+      rawFileDetails,
+      inferredMetadata,
+      sourcedMetadata: { comicvine, locg, comicInfo },
+    },
+    userSettings,
+  } = data;
   const [page, setPage] = useState(1);
   const [visible, setVisible] = useState(false);
   const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
@@ -67,9 +77,10 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     dispatch(extractComicArchive(filePath));
   }, []);
 
-  const afterOpenModal = useCallback(() => {
+  const afterOpenModal = useCallback((things) => {
     // references are now sync'd and can be accessed.
     // subtitle.style.color = "#f00";
+    console.log(things);
   }, []);
 
   const closeModal = useCallback(() => {
@@ -79,9 +90,21 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
   // sliding panel init
   const contentForSlidingPanel = {
     CVMatches: {
-      content: () => {
-        if (!comicVineAPICallProgress) {
-          return (
+      content: (props) => (
+        <>
+          <div className="card search-criteria-card">
+            <div className="card-content">
+              <ComicVineSearchForm data={rawFileDetails}/>
+            </div>
+          </div>
+          <p className="is-size-5 mt-3 mb-2 ml-3">Searching for:</p>
+          {inferredMetadata.issue ? (
+            <div className="ml-3">
+              <span className="tag mr-3">{inferredMetadata.issue.name} </span>
+              <span className="tag"> # {inferredMetadata.issue.number} </span>
+            </div>
+          ) : null}
+          {!comicVineAPICallProgress ? (
             <ComicVineMatchPanel
               props={{
                 comicVineSearchQueryObject,
@@ -89,11 +112,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
                 comicVineSearchResults,
                 comicObjectId,
               }}
-            />
-          );
-        } else {
-          return (
-            <div className="progress-indicator-container">
+            />) : (<div className="progress-indicator-container" >
               <div className="indicator">
                 <Loader
                   type="MutatingDots"
@@ -104,24 +123,16 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
                   visible={comicVineAPICallProgress}
                 />
               </div>
-            </div>
-          );
-        }
-      },
+            </div >)}
+        </>),
     },
+
+
     editComicBookMetadata: {
       content: () => <EditMetadataPanel />,
     },
   };
-  const {
-    data: {
-      _id,
-      rawFileDetails,
-      inferredMetadata,
-      sourcedMetadata: { comicvine, locg, comicInfo },
-    },
-    userSettings,
-  } = data;
+  
 
   // check for the availability of CV metadata
   const isComicBookMetadataAvailable =

src/client/components/ComicDetail/ComicVineMatchPanel.tsx

@@ -10,38 +10,8 @@ export const ComicVineMatchPanel = (comicVineData): ReactElement => {
     comicVineAPICallProgress,
     comicVineSearchResults,
   } = comicVineData.props;
-  console.log(comicVineData);
   return (
     <>
-      {!isEmpty(comicVineSearchQueryObject) && (
-        <div className="card search-criteria-card">
-          <div className="card-content">
-            <ComicVineSearchForm />
-            <p className="is-size-6">Searching against:</p>
-            <div className="field is-grouped is-grouped-multiline">
-              <div className="control">
-                <div className="tags has-addons">
-                  <span className="tag">Title</span>
-                  <span className="tag is-info">
-                    {comicVineSearchQueryObject.issue.inferredIssueDetails.name}
-                  </span>
-                </div>
-              </div>
-              <div className="control">
-                <div className="tags has-addons">
-                  <span className="tag">Number</span>
-                  <span className="tag is-info">
-                    {
-                      comicVineSearchQueryObject.issue.inferredIssueDetails
-                        .number
-                    }
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
       <div className="search-results-container">
         {!isEmpty(comicVineSearchResults) && (
           <MatchResult

src/client/components/ComicVineSearchForm.tsx

@@ -1,22 +1,32 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { Form, Field } from "react-final-form";
 import Collapsible from "react-collapsible";
+import { fetchComicVineMatches } from "../actions/fileops.actions";
+import { useDispatch } from "react-redux";
+import { refineQuery } from "filename-parser";
 
 /**
- * Component for accepting ComicVine search parameters
+ * Component for performing search against ComicVine
  *
  * @component
  * @example
- * const age = 21
- * const name = 'Jitendra Nirnejak'
  * return (
- *   <User age={age} name={name} />
+ *   <ComicVineSearchForm data={rawFileDetails} />
  * )
  */
-export const ComicVineSearchForm = () => {
-  const onSubmit = () => {
-    return true;
-  };
+export const ComicVineSearchForm = (data) => {
+  const dispatch = useDispatch();
+  const onSubmit = useCallback((value) => {
+    const userInititatedQuery = {
+      inferredIssueDetails: {
+        name: value.issueName,
+        number: value.issueNumber,
+        subtitle: "",
+        year: value.issueYear,
+      }
+    }
+    dispatch(fetchComicVineMatches(data, userInititatedQuery));
+  }, []);
   const validate = () => {
     return true;
   };
@@ -28,7 +38,7 @@ export const ComicVineSearchForm = () => {
       render={({ handleSubmit }) => (
         <form onSubmit={handleSubmit}>
           <span className="field is-normal">
-            <label className="label">Issue Details</label>
+            <label className="label mb-2 is-size-5">Search Manually</label>
           </span>
           <div className="field is-horizontal">
             <div className="field-body">
@@ -64,6 +74,23 @@ export const ComicVineSearchForm = () => {
                     </p>
                   )}
                 </Field>
+
+                <div className="field">
+                  <Field name="issueYear">
+                    {(props) => (
+                      <p className="control is-expanded has-icons-left">
+                        <input
+                          {...props.input}
+                          className="input is-normal"
+                          placeholder="Type the issue year"
+                        />
+                        <span className="icon is-small is-left">
+                          <i className="fas fa-hashtag"></i>
+                        </span>
+                      </p>
+                    )}
+                  </Field>
+                </div>
               </div>
             </div>
           </div>
@@ -89,16 +116,7 @@ export const ComicVineSearchForm = () => {
     />
   );
 
-  return (
-    <Collapsible
-      trigger={"Match Manually"}
-      triggerTagName="a"
-      triggerClassName={"is-size-6"}
-      triggerOpenedClassName={"is-size-6"}
-    >
-      <MyForm />
-    </Collapsible>
-  );
+  return <MyForm />;
 };
 
 export default ComicVineSearchForm;