Infinite queries

package.json

@@ -16,8 +16,7 @@
     "query-string": "^6.13.8",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-query": "^2.26.3",
-    "react-query-devtools": "^2.6.3",
+    "react-query": "^3.9.6",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "web-vitals": "^0.2.4"

src/components/CardItem.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Text, Image, Box, Flex } from '@chakra-ui/react';
 import { Link, useLocation } from 'react-router-dom';
 
-function CardItem({ item, galleryArray }) {
+function CardItem({ item, pagesArray }) {
   const background = useLocation();
   return (
     <>
@@ -12,7 +12,7 @@ function CardItem({ item, galleryArray }) {
           state: {
             modal: true,
             background,
-            galleryArray,
+            pagesArray,
             item,
           },
         }}
@@ -22,21 +22,23 @@ function CardItem({ item, galleryArray }) {
           borderRadius="lg"
           background="#b62a07"
           overflow="hidden"
-          h="400px"
-          padding="5"
+          padding="4"
           maxW="sm"
+          height="100%"
           direction="column"
+          justifyContent="space-between"
           margin="auto"
           boxShadow="1px 1px 4px 1px black"
         >
           <Image
             src={item.image}
             alt={item.title}
             fit="cover"
-            p="10px"
-            borderRadius="20px"
-            mb="10px"
+            p="0px"
+            borderRadius="lg"
+            height="100%"
           />
+
           <Box>
             <Text
               color="white"
@@ -47,6 +49,7 @@ function CardItem({ item, galleryArray }) {
               p="10px"
               borderTop="1px solid white"
               borderBottom="1px solid white"
+              isTruncated
             >
               {item.title}
             </Text>

src/components/ItemRecipe.jsx

@@ -20,12 +20,6 @@ function ItemRecipe() {
         return response.json();
       }
       throw Error(`code ${response.status}`);
-    },
-    {
-      refetchOnWindowFocus: false,
-      refetchOnMount: false,
-      staleTime: 3600000,
-      cacheTime: 3600000,
     }
   );
 
@@ -89,7 +83,7 @@ function ItemRecipe() {
         />
       ) : (
         <Text>
-          Read the detailed instructions on
+          Read the detailed instructions on{' '}
           <Link href={`${data.sourceUrl}`}>{`${data.sourceName}`}</Link>
         </Text>
       )}

src/components/NutritionalTable.jsx

@@ -41,7 +41,7 @@ function NutritionalTable({ data }) {
           <Tr key={nutrient.name}>
             <Td>{nutrient.name}</Td>
             <Td isNumeric>{`${nutrient.amount} ${nutrient.unit}`}</Td>
-            <Td isNumeric>{nutrient.percentOfDailyNeeds}</Td>
+            <Td isNumeric>{Math.round(nutrient.percentOfDailyNeeds)}</Td>
           </Tr>
         ))}
       </Tbody>

src/components/SearchFieldCollapse.jsx

@@ -8,7 +8,7 @@ import {
   useDisclosure,
   Collapse,
   Button,
-  HStack,
+  ButtonGroup,
 } from '@chakra-ui/react';
 import { SearchIcon, ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons';
 import { useHistory } from 'react-router-dom';
@@ -65,7 +65,8 @@ function SearchFieldCollapse({ userQueryData }) {
       });
     };
 
-    const SearchQuery = () => {
+    const SearchQuery = (e) => {
+      e.preventDefault();
       const query = queryString.stringify(userQuery, {
         arrayFormat: 'comma',
         skipEmptyString: true,
@@ -75,11 +76,11 @@ function SearchFieldCollapse({ userQueryData }) {
     };
 
     return (
-      <Box>
-        <Box>
+      <Box as="form">
+        <Box m="1rem">
           <InputGroup size="md">
             <Input
-              m="1rem"
+              m="0rem"
               pr="4.5rem"
               fontWeight="bold"
               color="#b62a07"
@@ -93,20 +94,21 @@ function SearchFieldCollapse({ userQueryData }) {
               onChange={handleStringChange}
             />
 
-            <InputRightElement m="1rem 2rem 0 0" width="">
-              <HStack>
+            <InputRightElement w="" p="0 1%">
+              <ButtonGroup isAttached>
                 <IconButton
                   aria-label="Search"
                   icon={<SearchIcon />}
-                  onClick={() => SearchQuery()}
+                  onClick={(e) => SearchQuery(e)}
                   size="sm"
-                  mr="1rem"
                   bg="#b62a07"
+                  mr="1px"
                   color="white"
                   _hover={{
                     bg: '#6e1a05',
                   }}
                   _focus={{ border: 'none' }}
+                  type="submit"
                 />
                 <Button
                   size="sm"
@@ -120,7 +122,7 @@ function SearchFieldCollapse({ userQueryData }) {
                 >
                   {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
                 </Button>
-              </HStack>
+              </ButtonGroup>
             </InputRightElement>
           </InputGroup>
         </Box>

src/components/SearchResults.jsx

@@ -1,31 +1,60 @@
-import React from 'react';
-import { useQuery } from 'react-query';
-import { Text, Flex, Box, Spinner } from '@chakra-ui/react';
+import React, { useCallback, useState } from 'react';
+import {
+  Box,
+  SimpleGrid,
+  Button,
+  Text,
+  Flex,
+  Spinner,
+  Center,
+} from '@chakra-ui/react';
+import { useInfiniteQuery } from 'react-query';
 
-import CardList from './CardList';
+import CardItem from './CardItem';
+import useIntersectionObserver from '../hooks/useIntersectionObsever';
 
 function SearchResults({ query }) {
-  const queryURL = `${process.env.REACT_APP_SEARCH_URL + query}&apiKey=${
-    process.env.REACT_APP_KEY
-  }`;
+  const itemsPerQuery = 50;
+  const queryURL = (offset) =>
+    `${process.env.REACT_APP_SEARCH_URL + query}&apiKey=${
+      process.env.REACT_APP_KEY
+    }&number=${itemsPerQuery}&offset=${offset}`;
 
-  const { isLoading, error, data } = useQuery(
-    ['foodData', queryURL],
-    async () => {
-      const response = await fetch(queryURL);
+  const getParams = (lastPage) =>
+    lastPage.totalResults - lastPage.offset > itemsPerQuery
+      ? lastPage.offset + itemsPerQuery
+      : false;
+
+  const {
+    isLoading,
+    error,
+    data,
+    isFetchingNextPage,
+    fetchNextPage,
+    hasNextPage,
+  } = useInfiniteQuery(
+    ['foodData', queryURL(0)],
+    async ({ pageParam = 0 }) => {
+      const response = await fetch(queryURL(pageParam));
       if (response.ok) {
         return response.json();
       }
       throw Error(`code ${response.status}`);
     },
     {
-      refetchOnWindowFocus: false,
-      refetchOnMount: false,
-      staleTime: 3600000,
-      cacheTime: 3600000,
+      getNextPageParam: (lastPage) => getParams(lastPage),
     }
   );
 
+  // could have used useRef, but the ref won't get updated with the DOM element until a rerender
+  const [buttonRef, setButtonRef] = useState();
+
+  useIntersectionObserver({
+    target: buttonRef,
+    onIntersect: useCallback(fetchNextPage, [getParams, fetchNextPage]),
+    enabled: hasNextPage,
+  });
+
   if (isLoading)
     return (
       <Flex alignItems="center" justifyContent="center" flexDirection="column">
@@ -62,7 +91,38 @@ function SearchResults({ query }) {
   }
   return (
     <Box>
-      <CardList items={data.results} />
+      <SimpleGrid minChildWidth="280px" spacing="5" alignContent="center">
+        {data &&
+          data.pages.map((page) =>
+            page.results.map((item) => {
+              return (
+                <CardItem pagesArray={data.pages} item={item} key={item.id} />
+              );
+            })
+          )}
+      </SimpleGrid>
+
+      <Center p="5">
+        <Button
+          ref={(node) => setButtonRef(node)}
+          onClick={() => fetchNextPage()}
+          isLoading={isFetchingNextPage}
+          loadingText="Loading more..."
+          bg="#b62a07"
+          color="white"
+          _hover={{
+            bg: '#6e1a05',
+            boxShadow: '1px 1px 10px black',
+            transitionDuration: '0.5s',
+          }}
+        >
+          {hasNextPage ? (
+            <Text>Load Newer</Text>
+          ) : (
+            <Text>Nothing more to Load</Text>
+          )}
+        </Button>
+      </Center>
     </Box>
   );
 }

src/components/ViewRecipe.jsx

@@ -21,10 +21,12 @@ function ViewRecipe() {
   useEffect(onOpen, [onOpen]);
 
   const { state = {} } = location;
-  const { modal, background = {}, galleryArray = [], item = {} } = state;
+  const { modal, background = {}, pagesArray = [], item = {} } = state;
 
   const { pathname, search } = background;
 
+  const galleryArray = pagesArray.map((page) => page.results).flat();
+
   const currentItemIndex = galleryArray.indexOf(item);
   const maxIndex = galleryArray.length - 1;
 
@@ -75,7 +77,7 @@ function ViewRecipe() {
                     state: {
                       modal,
                       background,
-                      galleryArray,
+                      pagesArray,
                       item: prevItem,
                     },
                   }}
@@ -100,7 +102,7 @@ function ViewRecipe() {
                     state: {
                       modal,
                       background,
-                      galleryArray,
+                      pagesArray,
                       item: nextItem,
                     },
                   }}