🔧 Generecized the AsyncSelectPaginate component

src/client/actions/metron.actions.tsx

@@ -8,7 +8,7 @@ export const fetchMetronResource = async (options) => {
     options,
   );
   console.log(metronResourceResults);
-  console.log("has more? ", !isNil(metronResourceResults.data.results.next));
+  console.log("has more? ", !isNil(metronResourceResults.data.next));
   const results = metronResourceResults.data.results.map((result) => {
     return {
       label: result.name,

src/client/components/ComicDetail/AsyncSelectPaginate/AsyncSelectPaginate.tsx

@@ -0,0 +1,50 @@
+import React, { ReactElement, useCallback, useState } from "react";
+import PropTypes from "prop-types";
+import { fetchMetronResource } from "../../../actions/metron.actions";
+import Creatable from "react-select/creatable";
+import { withAsyncPaginate } from "react-select-async-paginate";
+const CreatableAsyncPaginate = withAsyncPaginate(Creatable);
+
+export const AsyncSelectPaginate = (props): ReactElement => {
+  console.log(props);
+  const [value, onValueChange] = useState(null);
+  const [isAddingInProgress, setIsAddingInProgress] = useState(false);
+
+  const mudasir = useCallback((query, loadedOptions, { page }) => {
+    console.log(page);
+    return fetchMetronResource({
+      method: "GET",
+      resource: props.metronResource,
+      query: {
+        name: query,
+        page,
+      },
+    });
+  }, []);
+
+  return (
+    <CreatableAsyncPaginate
+      SelectComponent={Creatable}
+      debounceTimeout={200}
+      isDisabled={isAddingInProgress}
+      value={value}
+      loadOptions={mudasir}
+      placeholder={props.placeholder}
+      // onCreateOption={onCreateOption}
+      onChange={onValueChange}
+      // cacheUniqs={[cacheUniq]}
+      additional={{
+        page: 1,
+      }}
+    />
+  );
+};
+
+AsyncSelectPaginate.propTypes = {
+  metronResource: PropTypes.string.isRequired,
+  placeholder: PropTypes.string,
+  value: PropTypes.object,
+  onChange: PropTypes.func,
+};
+
+export default AsyncSelectPaginate;

src/client/components/ComicDetail/EditMetadataPanel.tsx

@@ -4,10 +4,7 @@ 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 AsyncSelectPaginate from "./AsyncSelectPaginate/AsyncSelectPaginate";
-import { fetchMetronResource } from "../../actions/metron.actions";
-import { withAsyncPaginate } from "react-select-async-paginate";
-const CreatableAsyncPaginate = withAsyncPaginate(Creatable);
 
 import "react-datepicker/dist/react-datepicker.css";
 export const EditMetadataPanel = (props): ReactElement => {
@@ -17,21 +14,10 @@ export const EditMetadataPanel = (props): ReactElement => {
     return <DatePicker {...input} {...rest} />;
   };
   const dispatch = useDispatch();
-  const [publisherValue, onPublisherValueChange] = useState(null);
-  const [seriesValue, onSeriesValueChange] = useState(null);
-  const [isAddingInProgress, setIsAddingInProgress] = useState(false);
 
-  const mudasir = useCallback((query, loadedOptions, { page, resource }) => {
+  const [seriesValue, onSeriesValueChange] = useState(null);
-    console.log(resource);
+  const [creatorValue, onCreatorValueChange] = useState(null);
-    return fetchMetronResource({
+  const [isAddingInProgress, setIsAddingInProgress] = useState(false);
-      method: "GET",
-      resource,
-      query: {
-        name: query,
-        page,
-      },
-    });
-  }, []);
 
   return (
     <>
@@ -134,17 +120,9 @@ export const EditMetadataPanel = (props): ReactElement => {
               <div className="field-body">
                 <div className="field">
                   <p className="control is-expanded has-icons-left">
-                    <CreatableAsyncPaginate
+                    <AsyncSelectPaginate
-                      SelectComponent={Creatable}
+                      placeholder={"Publisher"}
-                      debounceTimeout={200}
+                      metronResource={"publisher"}
-                      isDisabled={isAddingInProgress}
-                      value={publisherValue}
-                      loadOptions={mudasir}
-                      placeholder={"Publisher Name"}
-                      // onCreateOption={onCreateOption}
-                      onChange={onPublisherValueChange}
-                      // cacheUniqs={[cacheUniq]}
-                      additional={{ page: 1, resource: "publisher" }}
                     />
                   </p>
                 </div>
@@ -159,17 +137,9 @@ export const EditMetadataPanel = (props): ReactElement => {
               <div className="field-body">
                 <div className="field">
                   <p className="control is-expanded has-icons-left">
-                    <CreatableAsyncPaginate
+                    <AsyncSelectPaginate
-                      SelectComponent={Creatable}
+                      placeholder={"Series"}
-                      debounceTimeout={200}
+                      metronResource={"series"}
-                      isDisabled={isAddingInProgress}
-                      value={seriesValue}
-                      loadOptions={mudasir}
-                      placeholder={"Series Name"}
-                      // onCreateOption={onCreateOption}
-                      onChange={onSeriesValueChange}
-                      // cacheUniqs={[cacheUniq]}
-                      additional={{ page: 1, resource: "series" }}
                     />
                   </p>
                 </div>
@@ -215,17 +185,9 @@ export const EditMetadataPanel = (props): ReactElement => {
                     <div className="field-body">
                       <div className="field">
                         <p className="control">
-                          <CreatableAsyncPaginate
+                          <AsyncSelectPaginate
-                            SelectComponent={Creatable}
+                            placeholder={"Creator"}
-                            debounceTimeout={200}
+                            metronResource={"creator"}
-                            isDisabled={isAddingInProgress}
-                            value={publisherValue}
-                            loadOptions={mudasir}
-                            placeholder={"Creator Name"}
-                            // onCreateOption={onCreateOption}
-                            onChange={onPublisherValueChange}
-                            // cacheUniqs={[cacheUniq]}
-                            additional={{ page: 1, resource: "creator" }}
                           />
                         </p>
                       </div>