💄 More beautification

package.json

@@ -33,11 +33,14 @@
     "event-stream": "^4.0.1",
     "express": "^4.17.1",
     "fastest-validator": "^1.11.0",
+    "final-form": "^4.20.2",
     "fs-extra": "^9.1.0",
     "imghash": "^0.0.8",
     "jsdoc": "^3.6.7",
     "react": "^17.0.1",
+    "react-collapsible": "^2.8.3",
     "react-dom": "^17.0.1",
+    "react-final-form": "^6.5.3",
     "react-hooks-worker": "^1.0.0",
     "react-window-dynamic-list": "^2.3.5",
     "sharp": "^0.28.1",

src/client/assets/scss/App.css

@@ -16494,8 +16494,11 @@ readers do not read off random characters that represent icons */
 .comic-vine-match-drawer .search-criteria-card .card-content {
   padding: 10px;
 }
+.comic-vine-match-drawer .search-criteria-card .card-content .ant-divider-horizontal {
+  margin: 12px 0;
+}
 .comic-vine-match-drawer .field {
-  margin: 10px 0 0 0;
+  margin: 5px 0 0 0;
 }
 
 .search-results-container {

src/client/assets/scss/App.scss

@@ -117,11 +117,14 @@ $border-color: red;
     width: 100%;
     .card-content {
       padding: 10px;
+      .ant-divider-horizontal {
+        margin: 12px 0;
+      }
     }
   }
 
   .field {
-    margin: 10px 0 0 0;
+    margin: 5px 0 0 0;
   }
 }
 

src/client/components/ComicDetail.tsx

@@ -3,6 +3,9 @@ import { useParams } from "react-router-dom";
 import axios from "axios";
 import Card from "./Card";
 import MatchResult from "./MatchResult";
+import ComicVineSearchForm from "./ComicVineSearchForm";
+import Collapsible from "react-collapsible";
+import { Divider } from "antd";
 import { isEmpty, isUndefined } from "lodash";
 import { IExtractedComicBookCoverFile, RootState } from "threetwo-ui-typings";
 import { fetchComicVineMatches } from "../actions/fileops.actions";
@@ -32,7 +35,6 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
     axios
       .request({
         url: `http://localhost:3000/api/import/getComicBookById`,
-
         method: "POST",
         data: {
           id: comicObjectId,
@@ -65,6 +67,8 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
               <Card comicBookCoversMetadata={comicDetail.rawFileDetails} />
             </div>
             <div className="column">
+              <p>{comicDetail.rawFileDetails.containedIn}</p>
+              <p>{comicDetail.rawFileDetails.fileSize}</p>
               <button className="button" onClick={openDrawerWithCVMatches}>
                 <span className="icon">
                   <i className="fas fa-magic"></i>
@@ -87,6 +91,8 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
             !isUndefined(comicVineSearchQueryObject) ? (
               <div className="card search-criteria-card">
                 <div className="card-content">
+                  <ComicVineSearchForm />
+                  <Divider />
                   <p className="is-size-6">Searching against:</p>
                   <div className="field is-grouped is-grouped-multiline">
                     <div className="control">

src/client/components/ComicVineSearchForm.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { Form, Field } from "react-final-form";
+import Collapsible from "react-collapsible";
+
+/**
+ * Component for accepting ComicVine search parameters
+ *
+ * @component
+ * @example
+ * const age = 21
+ * const name = 'Jitendra Nirnejak'
+ * return (
+ *   <User age={age} name={name} />
+ * )
+ */
+export const ComicVineSearchForm = () => {
+  const onSubmit = () => {
+    return true;
+  };
+  const validate = () => {
+    return true;
+  };
+
+  const MyForm = () => (
+    <Form
+      onSubmit={onSubmit}
+      validate={validate}
+      render={({ handleSubmit }) => (
+        <form onSubmit={handleSubmit}>
+          <span className="field is-normal">
+            <label className="label">Issue Details</label>
+          </span>
+          <div className="field is-horizontal">
+            <div className="field-body">
+              <div className="field">
+                <Field name="issueName">
+                  {(props) => (
+                    <p className="control is-expanded has-icons-left">
+                      <input
+                        {...props.input}
+                        className="input is-normal"
+                        placeholder="Type the issue name"
+                      />
+                      <span className="icon is-small is-left">
+                        <i className="fas fa-journal-whills"></i>
+                      </span>
+                    </p>
+                  )}
+                </Field>
+              </div>
+
+              <div className="field">
+                <Field name="issueNumber">
+                  {(props) => (
+                    <p className="control is-expanded has-icons-left">
+                      <input
+                        {...props.input}
+                        className="input is-normal"
+                        placeholder="Type the issue number"
+                      />
+                      <span className="icon is-small is-left">
+                        <i className="fas fa-hashtag"></i>
+                      </span>
+                    </p>
+                  )}
+                </Field>
+              </div>
+            </div>
+          </div>
+          <div className="field is-horizontal">
+            <div className="field-body">
+              <div className="field">
+                <div className="control">
+                  <button type="submit" className="button is-info is-small">
+                    Apply Criteria
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </form>
+      )}
+    />
+  );
+
+  return (
+    <Collapsible
+      trigger={"Search Manually"}
+      triggerTagName="a"
+      triggerClassName={"is-size-6"}
+      triggerOpenedClassName={"is-size-6"}
+    >
+      <MyForm />
+    </Collapsible>
+  );
+};
+
+export default ComicVineSearchForm;

yarn.lock

@@ -1017,7 +1017,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.1", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.7.6":
+"@babel/runtime@^7.10.0", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.7.6":
   version "7.14.6"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz"
   integrity sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==
@@ -5770,6 +5770,13 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+final-form@^4.20.2:
+  version "4.20.2"
+  resolved "https://registry.yarnpkg.com/final-form/-/final-form-4.20.2.tgz#c820b37d7ebb73d71169480256a36c7e6e6c9155"
+  integrity sha512-5i0IxqwjjPG1nUNCjWhqPCvQJJ2R+QwTwaAnjPmFnLbyjIHWuBPU8u+Ps4G3TcX2Sjno+O5xCZJzYcMJEzzfCQ==
+  dependencies:
+    "@babel/runtime" "^7.10.0"
+
 finalhandler@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz"
@@ -10983,6 +10990,11 @@ react-ace@^6.5.0:
     lodash.isequal "^4.5.0"
     prop-types "^15.7.2"
 
+react-collapsible@^2.8.3:
+  version "2.8.3"
+  resolved "https://registry.yarnpkg.com/react-collapsible/-/react-collapsible-2.8.3.tgz#55b2c41f670a2031d29622110bbdb66c1a10ebc9"
+  integrity sha512-SiVsLZW8qeh09eARzJ9/fwrwOlPWfAdu+vUJGQaTqVYH61XBnKqnwcTDeGZjL005hatmJSkk2CAtYtb4rz14fA==
+
 react-docgen@^5.3.0:
   version "5.4.0"
   resolved "https://registry.npmjs.org/react-docgen/-/react-docgen-5.4.0.tgz"
@@ -11008,6 +11020,13 @@ react-dom@^17.0.1:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-final-form@^6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/react-final-form/-/react-final-form-6.5.3.tgz#b60955837fe9d777456ae9d9c48e3e2f21547d29"
+  integrity sha512-FCs6GC0AMWJl2p6YX7kM+a0AvuSLAZUgbVNtRBskOs4g984t/It0qGtx51O+9vgqnqk6JyoxmIzxKMq+7ch/vg==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+
 react-frame-component@^4.1.1:
   version "4.1.3"
   resolved "https://registry.npmjs.org/react-frame-component/-/react-frame-component-4.1.3.tgz"