From 9b65c0a97a034c7648882160cdbc05902c39b294 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Tue, 7 Dec 2021 09:19:32 -0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=8F=EF=B8=8F=20Edit=20Metadata=20drawer?=
 =?UTF-8?q?=20scaffold?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/actions/fileops.actions.tsx        |  2 +-
 src/client/assets/scss/App.scss               | 10 ++++
 .../AirDCPPSettings/AirDCPPSettingsForm.tsx   |  3 +-
 src/client/components/ComicDetail.tsx         |  1 -
 .../ComicDetail/ComicVineMatchPanel.tsx       |  2 -
 .../ComicDetail/EditMetadataPanel.tsx         | 57 ++++++++++++++++++-
 6 files changed, 68 insertions(+), 7 deletions(-)

diff --git a/src/client/actions/fileops.actions.tsx b/src/client/actions/fileops.actions.tsx
index 8d38b90..02b0459 100644
--- a/src/client/actions/fileops.actions.tsx
+++ b/src/client/actions/fileops.actions.tsx
@@ -173,7 +173,7 @@ export const fetchComicVineMatches =
               .replace(/[^a-zA-Z0-9 ]/g, "")
               .trim(),
             fieldList: "id",
-            limit: "20",
+            limit: "100",
             offset: "0",
             resources: "issue",
             scorerConfiguration: {
diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss
index a1fe188..b08d57f 100644
--- a/src/client/assets/scss/App.scss
+++ b/src/client/assets/scss/App.scss
@@ -312,8 +312,18 @@ $size-8: 0.9rem;
   }
 }
 
+// drawer content padding override
+.slide-pane__content {
+  padding: 24px 12px;
+}
+
+.slide-pane__header {
+  margin-top: 3.5rem;
+}
+
 .comic-vine-match-drawer {
   // comic detail drawer
+ 
   .search-criteria-card {
     width: 100%;
     .card-content {
diff --git a/src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx b/src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx
index 693a35f..5997271 100644
--- a/src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx
+++ b/src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx
@@ -1,9 +1,8 @@
-import React, { ReactElement, useCallback, useContext, useEffect } from "react";
+import React, { ReactElement, useCallback, useContext } from "react";
 import { Form, Field } from "react-final-form";
 import { useDispatch } from "react-redux";
 import { saveSettings, deleteSettings } from "../../actions/settings.actions";
 import { AirDCPPSettingsConfirmation } from "./AirDCPPSettingsConfirmation";
-import axios from "axios";
 import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
 import AirDCPPSocket from "../../services/DcppSearchService";
 import { isUndefined, isEmpty, isNil } from "lodash";
diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail.tsx
index 935563d..4d6d7e7 100644
--- a/src/client/components/ComicDetail.tsx
+++ b/src/client/components/ComicDetail.tsx
@@ -121,7 +121,6 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
       content: () => <EditMetadataPanel />,
     },
   };
-  console.log(comicVineSearchQueryObject);
 
   const [active, setActive] = useState(1);
 
diff --git a/src/client/components/ComicDetail/ComicVineMatchPanel.tsx b/src/client/components/ComicDetail/ComicVineMatchPanel.tsx
index 9c1fe66..8aa4363 100644
--- a/src/client/components/ComicDetail/ComicVineMatchPanel.tsx
+++ b/src/client/components/ComicDetail/ComicVineMatchPanel.tsx
@@ -1,7 +1,6 @@
 import React, { ReactElement } from "react";
 import { ComicVineSearchForm } from "../ComicVineSearchForm";
 import MatchResult from "../MatchResult";
-import Loader from "react-loader-spinner";
 import { isEmpty } from "lodash";
 
 export const ComicVineMatchPanel = (comicVineData): ReactElement => {
@@ -11,7 +10,6 @@ export const ComicVineMatchPanel = (comicVineData): ReactElement => {
     comicVineAPICallProgress,
     comicVineSearchResults,
   } = comicVineData.props;
-  console.log(comicVineData);
   return (
     <>
       {!isEmpty(comicVineSearchQueryObject) && (
diff --git a/src/client/components/ComicDetail/EditMetadataPanel.tsx b/src/client/components/ComicDetail/EditMetadataPanel.tsx
index e59d05d..af09487 100644
--- a/src/client/components/ComicDetail/EditMetadataPanel.tsx
+++ b/src/client/components/ComicDetail/EditMetadataPanel.tsx
@@ -1,7 +1,62 @@
 import React, { ReactElement } from "react";
+import { Form, Field } from "react-final-form";
 
 export const EditMetadataPanel = (props): ReactElement => {
-  return <>adsasdasd</>;
+  const validate = async () => {};
+  const onSubmit = async () => {};
+  return (
+    <>
+      <Form
+        onSubmit={onSubmit}
+        validate={validate}
+        render={({ handleSubmit }) => (
+          <form onSubmit={handleSubmit}>
+            <h2>Metadata</h2>
+
+            <div className="field is-horizontal">
+              <div className="field-label is-normal">
+                <label className="label">Issue Name</label>
+              </div>
+              <div className="field-body">
+                <div className="field">
+                  <Field name="issue_name">
+                    {(props) => (
+                      <p className="control is-expanded has-icons-left">
+                        <input
+                          className="input"
+                          type="text"
+                          placeholder="Name"
+                        />
+                        <span className="icon is-small is-left">
+                          <i className="fas fa-user"></i>
+                        </span>
+                      </p>
+                    )}
+                  </Field>
+                </div>
+                <div className="field">
+                  <Field name="issue_number">
+                    {(props) => (
+                      <p className="control is-expanded has-icons-left">
+                        <input
+                          className="input"
+                          type="text"
+                          placeholder="Name"
+                        />
+                        <span className="icon is-small is-left">
+                          <i className="fas fa-user"></i>
+                        </span>
+                      </p>
+                    )}
+                  </Field>
+                </div>
+              </div>
+            </div>
+          </form>
+        )}
+      />
+    </>
+  );
 };
 
 export default EditMetadataPanel;