From 7bb5669c526e32700b64a7adb4b41196120eb7a4 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Thu, 6 Jan 2022 15:15:45 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Fixed=20value=20update=20issue?=
 =?UTF-8?q?=20in=20the=20react-select=20dropdowns?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AsyncSelectPaginate.tsx                   | 11 ++-
 .../ComicDetail/EditMetadataPanel.tsx         | 96 ++++++++++++-------
 2 files changed, 68 insertions(+), 39 deletions(-)

diff --git a/src/client/components/ComicDetail/AsyncSelectPaginate/AsyncSelectPaginate.tsx b/src/client/components/ComicDetail/AsyncSelectPaginate/AsyncSelectPaginate.tsx
index 9dbd6be..03f8798 100644
--- a/src/client/components/ComicDetail/AsyncSelectPaginate/AsyncSelectPaginate.tsx
+++ b/src/client/components/ComicDetail/AsyncSelectPaginate/AsyncSelectPaginate.tsx
@@ -6,10 +6,11 @@ import { withAsyncPaginate } from "react-select-async-paginate";
 const CreatableAsyncPaginate = withAsyncPaginate(Creatable);
 
 export const AsyncSelectPaginate = (props): ReactElement => {
-  const [value, onValueChange] = useState(null);
+  console.log(props);
+  const [value, setValue] = useState(null);
   const [isAddingInProgress, setIsAddingInProgress] = useState(false);
 
-  const mudasir = useCallback((query, loadedOptions, { page }) => {
+  const loadData = useCallback((query, loadedOptions, { page }) => {
     return fetchMetronResource({
       method: "GET",
       resource: props.metronResource,
@@ -25,11 +26,11 @@ export const AsyncSelectPaginate = (props): ReactElement => {
       SelectComponent={Creatable}
       debounceTimeout={200}
       isDisabled={isAddingInProgress}
-      value={value}
-      loadOptions={mudasir}
+      value={props.value}
+      loadOptions={loadData}
       placeholder={props.placeholder}
       // onCreateOption={onCreateOption}
-      onChange={onValueChange}
+      onChange={props.onChange}
       // cacheUniqs={[cacheUniq]}
       additional={{
         page: 1,
diff --git a/src/client/components/ComicDetail/EditMetadataPanel.tsx b/src/client/components/ComicDetail/EditMetadataPanel.tsx
index 82645c9..773f6bb 100644
--- a/src/client/components/ComicDetail/EditMetadataPanel.tsx
+++ b/src/client/components/ComicDetail/EditMetadataPanel.tsx
@@ -11,7 +11,16 @@ export const EditMetadataPanel = (props): ReactElement => {
   const validate = async () => {};
   const onSubmit = async () => {};
   const DayPickerAdapter = ({ input, ...rest }) => {
-    return <DatePicker {...input} {...rest} />;
+    return <DatePicker {...input} {...rest} placeholderText={"Cover Date"} />;
+  };
+  const AsyncSelectPaginateAdapter = ({ input, ...rest }) => {
+    return (
+      <AsyncSelectPaginate
+        {...input}
+        {...rest}
+        onChange={(value) => input.onChange(value)}
+      />
+    );
   };
   const dispatch = useDispatch();
 
@@ -79,35 +88,12 @@ export const EditMetadataPanel = (props): ReactElement => {
                       name="issue_year"
                       component={DayPickerAdapter}
                       className="input"
-                      placeholder="Issue Year"
                     />
                   </p>
                 </div>
               </div>
             </div>
 
-            {/* Story title */}
-            <div className="field is-horizontal">
-              <div className="field-label is-normal">
-                <label className="label">Story</label>
-              </div>
-              <div className="field-body">
-                <div className="field">
-                  <p className="control is-expanded has-icons-left">
-                    <Field
-                      name="story_title"
-                      component="input"
-                      className="input"
-                      placeholder="Story Title"
-                    />
-                    <span className="icon is-small is-left">
-                      <i className="fa-solid fa-user-ninja"></i>
-                    </span>
-                  </p>
-                </div>
-              </div>
-            </div>
-
             {/* Publisher */}
             <div className="field is-horizontal">
               <div className="field-label is-normal">
@@ -116,8 +102,14 @@ export const EditMetadataPanel = (props): ReactElement => {
               <div className="field-body">
                 <div className="field">
                   <p className="control is-expanded has-icons-left">
-                    <AsyncSelectPaginate
-                      placeholder={"Publisher"}
+                    <Field
+                      name={"publisher"}
+                      component={AsyncSelectPaginateAdapter}
+                      placeholder={
+                        <div>
+                          <i className="fas fa-print"></i> Publisher
+                        </div>
+                      }
                       metronResource={"publisher"}
                     />
                   </p>
@@ -125,6 +117,29 @@ export const EditMetadataPanel = (props): ReactElement => {
               </div>
             </div>
 
+            {/* Arc */}
+            <div className="field is-horizontal">
+              <div className="field-label is-normal">
+                <label className="label">Story Arc</label>
+              </div>
+              <div className="field-body">
+                <div className="field">
+                  <p className="control is-expanded has-icons-left">
+                    <Field
+                      name={"story_arc"}
+                      component={AsyncSelectPaginateAdapter}
+                      placeholder={
+                        <div>
+                          <i className="fas fa-book-open"></i> Story Arc
+                        </div>
+                      }
+                      metronResource={"arc"}
+                    />
+                  </p>
+                </div>
+              </div>
+            </div>
+
             {/* series */}
             <div className="field is-horizontal">
               <div className="field-label is-normal">
@@ -133,8 +148,14 @@ export const EditMetadataPanel = (props): ReactElement => {
               <div className="field-body">
                 <div className="field">
                   <p className="control is-expanded has-icons-left">
-                    <AsyncSelectPaginate
-                      placeholder={"Series"}
+                    <Field
+                      name={"series"}
+                      component={AsyncSelectPaginateAdapter}
+                      placeholder={
+                        <div>
+                          <i className="fas fa-layer-group"></i> Series
+                        </div>
+                      }
                       metronResource={"series"}
                     />
                   </p>
@@ -181,8 +202,14 @@ export const EditMetadataPanel = (props): ReactElement => {
                     <div className="field-body">
                       <div className="field">
                         <p className="control">
-                          <AsyncSelectPaginate
-                            placeholder={"Creator"}
+                          <Field
+                            name={`${name}.creator`}
+                            component={AsyncSelectPaginateAdapter}
+                            placeholder={
+                              <div>
+                                <i className="fas fa-book-open"></i> Creator
+                              </div>
+                            }
                             metronResource={"creator"}
                           />
                         </p>
@@ -191,10 +218,10 @@ export const EditMetadataPanel = (props): ReactElement => {
                       <div className="field">
                         <p className="control">
                           <Field
-                            name={`${name}.lastName`}
-                            component="input"
-                            className="input"
-                            placeholder="role"
+                            name={`${name}.role`}
+                            metronResource={"role"}
+                            placeholder={"Role"}
+                            component={AsyncSelectPaginateAdapter}
                           />
                         </p>
                       </div>
@@ -210,6 +237,7 @@ export const EditMetadataPanel = (props): ReactElement => {
                 ))
               }
             </FieldArray>
+            <pre>{JSON.stringify(values, undefined, 2)}</pre>
           </form>
         )}
       />