From e4826c3272018a71e0e96442f6147eb278bbe547 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Tue, 4 Jan 2022 20:29:44 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Functioning=20select=20with=20Me?=
 =?UTF-8?q?tron=20API=20pre-fetching=20and=20autosuggest=20with=20paginati?=
 =?UTF-8?q?on?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/actions/metron.actions.tsx          | 18 +++++++++++++-----
 .../ComicDetail/EditMetadataPanel.tsx          | 12 +++++++-----
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/client/actions/metron.actions.tsx b/src/client/actions/metron.actions.tsx
index 0cfb124..3d95e5b 100644
--- a/src/client/actions/metron.actions.tsx
+++ b/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,
+    },
+  };
 };
diff --git a/src/client/components/ComicDetail/EditMetadataPanel.tsx b/src/client/components/ComicDetail/EditMetadataPanel.tsx
index 015ed94..c3c1f37 100644
--- a/src/client/components/ComicDetail/EditMetadataPanel.tsx
+++ b/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}
-                      // isDisabled={isAddingInProgress}
+                      debounceTimeout={200}
+                      isDisabled={isAddingInProgress}
                       value={value}
-                      loadOptions={(e) => mudasir(e)}
+                      loadOptions={mudasir}
                       // onCreateOption={onCreateOption}
                       onChange={onChange}
                       // cacheUniqs={[cacheUniq]}
+                      additional={{ page: 1 }}
                     />
                   </p>
                 </div>