🔧 Functioning select with Metron API pre-fetching and autosuggest with pagination

src/client/actions/metron.actions.tsx

@@ -1,20 +1,28 @@
 import axios from "axios";
+import { isNil } from "lodash";
 import { METRON_SERVICE_URI } from "../constants/endpoints";
 
 export const fetchMetronResource = async (options) => {
-  console.log(options);
-
   const metronResourceResults = await axios.post(
     `${METRON_SERVICE_URI}/fetchResource`,
     options,
   );
   console.log(metronResourceResults);
-  const foo = metronResourceResults.data.results.map((result) => {
+  console.log("has more? ", !isNil(metronResourceResults.data.results.next));
+  const results = metronResourceResults.data.results.map((result) => {
     return {
       label: result.name,
       value: result.id,
     };
   });
-  console.log({ options: foo, hasMore: false });
+
-  return { options: foo, hasMore: false };
+  return {
+    options: results,
+    hasMore: !isNil(metronResourceResults.data.next),
+    additional: {
+      page: !isNil(metronResourceResults.data.next)
+        ? options.query.page + 1
+        : null,
+    },
+  };
 };

src/client/components/ComicDetail/EditMetadataPanel.tsx

@@ -16,14 +16,15 @@ export const EditMetadataPanel = (props): ReactElement => {
   };
   const dispatch = useDispatch();
   const [value, onChange] = useState(null);
+  const [isAddingInProgress, setIsAddingInProgress] = useState(false);
 
-  const mudasir = useCallback((query) => {
+  const mudasir = useCallback((query, loadedOptions, { page }) => {
     return fetchMetronResource({
       method: "GET",
       resource: "publisher",
       query: {
         name: query,
-        page: 1,
+        page,
       },
     });
   }, []);
@@ -119,13 +120,14 @@ export const EditMetadataPanel = (props): ReactElement => {
                   <p className="control is-expanded has-icons-left">
                     <CreatableAsyncPaginate
                       SelectComponent={Creatable}
-                      debounceTimeout={3}
+                      debounceTimeout={200}
-                      // isDisabled={isAddingInProgress}
+                      isDisabled={isAddingInProgress}
                       value={value}
-                      loadOptions={(e) => mudasir(e)}
+                      loadOptions={mudasir}
                       // onCreateOption={onCreateOption}
                       onChange={onChange}
                       // cacheUniqs={[cacheUniq]}
+                      additional={{ page: 1 }}
                     />
                   </p>
                 </div>