feat: Limits custom searches to 20 and adds show more button.

src/components/CustomSearch/SearchList.jsx

@@ -41,7 +41,7 @@ ErrorMessage.defaultProps = {
   error: null
 };
 
-export default function SearchList({ searches }) {
+export default function SearchList({ searches, showMore, showMoreHandler }) {
   const { appState } = useContext(AppContext);
 
   const searchesInProgress = searches
@@ -97,9 +97,16 @@ export default function SearchList({ searches }) {
     );
   }
 
-  return <div>{searchesInProgress}</div>;
+  return(
+    <div>
+    {searchesInProgress}
+      {showMore ? <Button onClick={() => showMoreHandler()}>Show more</Button> : ""}
+    </div>
+  );
 }
 
 SearchList.propTypes = {
-  searches: PropTypes.arrayOf(PropTypes.object).isRequired
+  searches: PropTypes.arrayOf(PropTypes.object).isRequired,
+  showMore: PropTypes.bool.isRequired,
+  showMoreHandler: PropTypes.func.isRequired,
 };

src/components/CustomSearchList.jsx

@@ -14,6 +14,7 @@ const { Title } = Typography;
 export default function CustomSearchList() {
   const [uploadedFile, setUploadedFile] = useState(null);
   const [isLoading, setLoading] = useState(true);
+  const [nextToken, setNextToken] = useState(null);
   const [searches, dispatch] = useReducer((searchList, { type, value }) => {
     switch (type) {
       case "init":
@@ -39,11 +40,12 @@ export default function CustomSearchList() {
     async function fetchSearches() {
       const creds = await Auth.currentCredentials();
 
-      const items = await fetchItemsNextToken({
+      const [items, token] = await fetchItemsNextToken({
         query: queries.listItemsByOwner,
-        variables: { limit: 30, identityId: creds.identityId, sortDirection: "DESC"},
-        limit: 100
+        variables: { limit: 20, identityId: creds.identityId, sortDirection: "DESC"},
+        limit: 20
       });
+      setNextToken(token);
       items.forEach(search => logSearchInfo(search));
       dispatch({ type: "init", value: items });
       setLoading(false);
@@ -145,6 +147,19 @@ export default function CustomSearchList() {
     });
   }, []);
 
+  const showMoreHandler = async () => {
+    const creds = await Auth.currentCredentials();
+
+    const [items, token] = await fetchItemsNextToken({
+      query: queries.listItemsByOwner,
+      variables: { limit: 20, identityId: creds.identityId, sortDirection: "DESC", nextToken},
+      limit: 20
+    });
+    setNextToken(token);
+    items.forEach(search => dispatch({ type: "add", value: search}));
+    setLoading(false);
+  }
+
   return (
     <div>
       <ScrollToTopOnMount />
@@ -153,8 +168,8 @@ export default function CustomSearchList() {
         handleUpload={setUploadedFile}
       />
       <Divider dashed />
-      <Title level={3}>Your Searches ({searches.length})</Title>
-      {isLoading ? <Spin size="large" /> : <SearchList searches={searches} />}
+      <Title level={3}>Your Searches ({searches.length}{nextToken ? '+' : null})</Title>
+      {isLoading ? <Spin size="large" /> : <SearchList searches={searches} showMore={Boolean(nextToken)}  showMoreHandler={showMoreHandler}/>}
     </div>
   );
 }

src/libs/awsLib.js

@@ -146,10 +146,10 @@ export async function fetchItemsNextToken({
   // if there are enough items to fulfill the limit, then trim the items
   // to the limit and return.
   if (items.length >= limit) {
-    return items;
+    return [items, res.nextToken];
   }
 
-  if (!res.nextToken) return items;
+  if (!res.nextToken) return [items, null];
 
   // eslint-disable-next-line no-param-reassign
   variables.nextToken = res.nextToken;