💄 More beautification

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;