🧑‍🤝‍🧑 Added team credits to Metadata/Metron form

package.json

@@ -44,6 +44,7 @@
     "express": "^4.17.1",
     "fastest-validator": "^1.11.0",
     "final-form": "^4.20.2",
+    "final-form-arrays": "^3.0.2",
     "html-to-text": "^8.1.0",
     "jsdoc": "^3.6.7",
     "opds-extra": "^3.0.9",
@@ -54,6 +55,7 @@
     "react-dom": "^17.0.1",
     "react-fast-compare": "^3.2.0",
     "react-final-form": "^6.5.3",
+    "react-final-form-arrays": "^3.1.3",
     "react-lazylog": "^4.5.3",
     "react-loader-spinner": "^4.0.0",
     "react-masonry-css": "^1.0.16",

src/client/components/ComicDetail/EditMetadataPanel.tsx

@@ -1,6 +1,8 @@
 import React, { ReactElement, useCallback, useEffect, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { Form, Field } from "react-final-form";
+import arrayMutators from "final-form-arrays";
+import { FieldArray } from "react-final-form-arrays";
 import DatePicker from "react-datepicker";
 import Creatable from "react-select/creatable";
 import { fetchMetronResource } from "../../actions/metron.actions";
@@ -15,13 +17,15 @@ export const EditMetadataPanel = (props): ReactElement => {
     return <DatePicker {...input} {...rest} />;
   };
   const dispatch = useDispatch();
-  const [value, onChange] = useState(null);
+  const [publisherValue, onPublisherValueChange] = useState(null);
+  const [seriesValue, onSeriesValueChange] = useState(null);
   const [isAddingInProgress, setIsAddingInProgress] = useState(false);
 
-  const mudasir = useCallback((query, loadedOptions, { page }) => {
+  const mudasir = useCallback((query, loadedOptions, { page, resource }) => {
+    console.log(resource);
     return fetchMetronResource({
       method: "GET",
-      resource: "publisher",
+      resource,
       query: {
         name: query,
         page,
@@ -34,7 +38,19 @@ export const EditMetadataPanel = (props): ReactElement => {
       <Form
         onSubmit={onSubmit}
         validate={validate}
-        render={({ handleSubmit }) => (
+        mutators={{
+          ...arrayMutators,
+        }}
+        render={({
+          handleSubmit,
+          form: {
+            mutators: { push, pop },
+          }, // injected from final-form-arrays above
+          pristine,
+          form,
+          submitting,
+          values,
+        }) => (
           <form onSubmit={handleSubmit}>
             {/* Issue Name */}
             <div className="field is-horizontal">
@@ -122,17 +138,120 @@ export const EditMetadataPanel = (props): ReactElement => {
                       SelectComponent={Creatable}
                       debounceTimeout={200}
                       isDisabled={isAddingInProgress}
-                      value={value}
+                      value={publisherValue}
                       loadOptions={mudasir}
+                      placeholder={"Publisher Name"}
                       // onCreateOption={onCreateOption}
-                      onChange={onChange}
+                      onChange={onPublisherValueChange}
                       // cacheUniqs={[cacheUniq]}
-                      additional={{ page: 1 }}
+                      additional={{ page: 1, resource: "publisher" }}
                     />
                   </p>
                 </div>
               </div>
             </div>
+
+            {/* series */}
+            <div className="field is-horizontal">
+              <div className="field-label is-normal">
+                <label className="label">Series</label>
+              </div>
+              <div className="field-body">
+                <div className="field">
+                  <p className="control is-expanded has-icons-left">
+                    <CreatableAsyncPaginate
+                      SelectComponent={Creatable}
+                      debounceTimeout={200}
+                      isDisabled={isAddingInProgress}
+                      value={seriesValue}
+                      loadOptions={mudasir}
+                      placeholder={"Series Name"}
+                      // onCreateOption={onCreateOption}
+                      onChange={onSeriesValueChange}
+                      // cacheUniqs={[cacheUniq]}
+                      additional={{ page: 1, resource: "series" }}
+                    />
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <hr size="1" />
+
+            {/* team credits */}
+            <div className="field is-horizontal">
+              <div className="field-label is-normal">
+                <label className="label">Team Credits</label>
+              </div>
+              <div className="field-body mt-4">
+                <div className="field">
+                  <div className="buttons">
+                    <button
+                      type="button"
+                      className="button is-small"
+                      onClick={() => push("credits", undefined)}
+                    >
+                      Add credit
+                    </button>
+                    <button
+                      type="button"
+                      className="button is-small"
+                      onClick={() => pop("credits")}
+                    >
+                      Remove credit
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <FieldArray name="credits">
+              {({ fields }) =>
+                fields.map((name, index) => (
+                  <div className="field is-horizontal" key={name}>
+                    <div className="field-label is-normal">
+                      <label></label>
+                    </div>
+                    <div className="field-body">
+                      <div className="field">
+                        <p className="control">
+                          <CreatableAsyncPaginate
+                            SelectComponent={Creatable}
+                            debounceTimeout={200}
+                            isDisabled={isAddingInProgress}
+                            value={publisherValue}
+                            loadOptions={mudasir}
+                            placeholder={"Creator Name"}
+                            // onCreateOption={onCreateOption}
+                            onChange={onPublisherValueChange}
+                            // cacheUniqs={[cacheUniq]}
+                            additional={{ page: 1, resource: "creator" }}
+                          />
+                        </p>
+                      </div>
+
+                      <div className="field">
+                        <p className="control">
+                          <Field
+                            name={`${name}.lastName`}
+                            component="input"
+                            className="input"
+                            placeholder="role"
+                          />
+                        </p>
+                      </div>
+                      <span
+                        className="icon is-danger mt-2"
+                        onClick={() => fields.remove(index)}
+                        style={{ cursor: "pointer" }}
+                      >
+                        <i className="fas fa-times"></i>
+                      </span>
+                    </div>
+                  </div>
+                ))
+              }
+            </FieldArray>
           </form>
         )}
       />

yarn.lock

@@ -6022,6 +6022,11 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+final-form-arrays@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/final-form-arrays/-/final-form-arrays-3.0.2.tgz#9f3bef778dec61432357744eb6f3abef7e7f3847"
+  integrity sha512-TfO8aZNz3RrsZCDx8GHMQcyztDNpGxSSi9w4wpSNKlmv2PfFWVVM8P7Yj5tj4n0OWax+x5YwTLhT5BnqSlCi+w==
+
 final-form@^4.20.2:
   version "4.20.2"
   resolved "https://registry.yarnpkg.com/final-form/-/final-form-4.20.2.tgz#c820b37d7ebb73d71169480256a36c7e6e6c9155"
@@ -11133,6 +11138,13 @@ react-fast-compare@^3.0.1, react-fast-compare@^3.2.0:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
   integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
 
+react-final-form-arrays@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/react-final-form-arrays/-/react-final-form-arrays-3.1.3.tgz#d3594c500495a4cf5e437070ada989da9624bba2"
+  integrity sha512-dzBiLfbr9l1YRExARBpJ8uA/djBenCvFrbrsXjd362joDl3vT+WhmMKKr6HDQMJffjA8T4gZ3n5+G9M59yZfuQ==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+
 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"