Hook up load more button

Author: bzwrk

packages/connect-react/examples/nextjs/package-lock.json

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { useMemo } from "react";
 import Select, {
   Props as ReactSelectProps, components,
@@ -14,13 +15,12 @@ type ControlSelectProps<T> = {
   isCreatable?: boolean;
   options: {label: string; value: T;}[];
   selectProps?: ReactSelectProps;
-  canLoadMore?: boolean;
   showLoadMoreButton?: boolean;
   onLoadMore?: () => void;
 };
 
 export function ControlSelect<T>({
-  isCreatable, options, selectProps, canLoadMore, showLoadMoreButton, onLoadMore,
+  isCreatable, options, selectProps, showLoadMoreButton, onLoadMore,
 }: ControlSelectProps<T>) {
   const formFieldCtx = useFormFieldContext();
   const {
@@ -76,13 +76,14 @@ export function ControlSelect<T>({
   ]);
 
   const LoadMore = ({
+    // eslint-disable-next-line react/prop-types
     children, ...props
   }) => {
     return (
       <components.MenuList  {...props}>
-        {children}
+        { children }
         <div className="pt-4">
-          <LoadMoreButton enabled={canLoadMore} onClick={onLoadMore}/>
+          <LoadMoreButton onChange={onLoadMore}/>
         </div>
       </components.MenuList>
     )

packages/connect-react/src/components/ControlSelect.tsx

@@ -2,14 +2,11 @@ import { useCustomize } from "../hooks/customization-context";
 import type { CSSProperties } from "react";
 
 export type ButtonProps = {
-  enabled: boolean;
-  onClick: () => void;
+  onChange: () => void;
 };
 
 export const LoadMoreButton = (props: ButtonProps) => {
-  const {
-    enabled, onClick,
-  } = props;
+  const { onChange } = props;
   const {
     getProps, theme,
   } = useCustomize();
@@ -27,9 +24,10 @@ export const LoadMoreButton = (props: ButtonProps) => {
     cursor: "pointer",
     width: "100%",
   };
+
   return (
-    <button disabled={!enabled} onClick={onClick} type="button" {...getProps("loadMoreButton", baseStyles, props)}>
-     Load More
+    <button onClick={onChange} type="button" {...getProps("loadMoreButton", baseStyles, props)}>
+      Load More
     </button>
   );
 };

packages/connect-react/src/components/LoadMoreButton.tsx

@@ -44,7 +44,8 @@ export function RemoteOptionsContainer({ queryEnabled }: RemoteOptionsContainerP
     setPageable,
   ] = useState({
     page: 0,
-    prevContext: undefined,
+    prevContext: {},
+    data: [],
   })
 
   const configuredPropsUpTo: Record<string, unknown> = {};
@@ -75,19 +76,22 @@ export function RemoteOptionsContainer({ queryEnabled }: RemoteOptionsContainerP
     setError,
   ] = useState<{ name: string; message: string; }>();
 
-  const [
-    canLoadMore,
-    setCanLoadMore,
-  ] = useState<boolean>(false);
-
   const onLoadMore = () => {
     setPage(pageable.page)
     setContext(pageable.prevContext)
+    setPageable({
+      ...pageable,
+      prevContext: {},
+    })
+  }
+
+  const canLoadMore = () => {
+    return Object.keys(pageable.prevContext || {}).length > 0
   }
 
   // TODO handle error!
   const {
-    isFetching, data, refetch,
+    isFetching, refetch,
   } = useQuery({
     queryKey: [
       "componentConfigure",
@@ -97,15 +101,11 @@ export function RemoteOptionsContainer({ queryEnabled }: RemoteOptionsContainerP
       setError(undefined);
       const res = await client.componentConfigure(componentConfigureInput);
 
-      // console.log("res", res)
       // XXX look at errors in response here too
       const {
         options, stringOptions, errors,
       } = res;
-      setPageable({
-        page: page + 1,
-        prevContext: res.context,
-      })
+
       if (errors?.length) {
         // TODO field context setError? (for validity, etc.)
         try {
@@ -118,9 +118,9 @@ export function RemoteOptionsContainer({ queryEnabled }: RemoteOptionsContainerP
         }
         return [];
       }
+      let _options = []
       if (options?.length) {
-        setCanLoadMore(true)
-        return options;
+        _options = options;
       }
       if (stringOptions?.length) {
         const options = [];
@@ -130,16 +130,24 @@ export function RemoteOptionsContainer({ queryEnabled }: RemoteOptionsContainerP
             value: stringOption,
           });
         }
-        setCanLoadMore(true)
-        return options;
+        _options = options;
       }
-      return [];
+      const data = [
+        ...pageable.data,
+        ..._options,
+      ]
+      setPageable({
+        page: page + 1,
+        prevContext: res.context,
+        data,
+      })
+      return data;
     },
     enabled: !!queryEnabled,
   });
 
   const showLoadMoreButton = () => {
-    return !isFetching && !error && pageable.prevContext !== undefined
+    return !isFetching && !error && canLoadMore()
   }
 
   // TODO show error in different spot!
@@ -156,10 +164,9 @@ export function RemoteOptionsContainer({ queryEnabled }: RemoteOptionsContainerP
 
   return (
     <ControlSelect
-      canLoadMore={canLoadMore}
       showLoadMoreButton={showLoadMoreButton()}
       onLoadMore={onLoadMore}
-      options={data || []}
+      options={pageable.data}
       // XXX isSearchable if pageQuery? or maybe in all cases? or maybe NOT when pageQuery
       selectProps={{
         isLoading: isFetching,