From 97860ddd71685803c46cee2a7fa0cea54862cdaf Mon Sep 17 00:00:00 2001
From: Barrod-Code <rbarros418@gmail.com>
Date: Fri, 12 Feb 2021 05:49:14 -0300
Subject: [PATCH 01/12] simplified interception observer logic

---
 src/components/SearchFieldCollapse.jsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/SearchFieldCollapse.jsx b/src/components/SearchFieldCollapse.jsx
index 9b76cda..d123960 100644
--- a/src/components/SearchFieldCollapse.jsx
+++ b/src/components/SearchFieldCollapse.jsx
@@ -65,7 +65,8 @@ function SearchFieldCollapse({ userQueryData }) {
       });
     };
 
-    const SearchQuery = () => {
+    const SearchQuery = (e) => {
+      e.preventDefault();
       const query = queryString.stringify(userQuery, {
         arrayFormat: 'comma',
         skipEmptyString: true,
@@ -75,7 +76,7 @@ function SearchFieldCollapse({ userQueryData }) {
     };
 
     return (
-      <Box>
+      <Box as="form">
         <Box>
           <InputGroup size="md">
             <Input
@@ -98,7 +99,7 @@ function SearchFieldCollapse({ userQueryData }) {
                 <IconButton
                   aria-label="Search"
                   icon={<SearchIcon />}
-                  onClick={() => SearchQuery()}
+                  onClick={(e) => SearchQuery(e)}
                   size="sm"
                   mr="1rem"
                   bg="#b62a07"
@@ -107,6 +108,7 @@ function SearchFieldCollapse({ userQueryData }) {
                     bg: '#6e1a05',
                   }}
                   _focus={{ border: 'none' }}
+                  type="submit"
                 />
                 <Button
                   size="sm"

From 64c7ee78dd978b4ffb8d4e97b0e653cfd7ce286d Mon Sep 17 00:00:00 2001
From: barrod-code <rbarros418@gmail.com>
Date: Mon, 15 Feb 2021 17:17:25 -0300
Subject: [PATCH 02/12] infinteQueries Working!

---
 package-lock.json                | 25 +++++-------
 package.json                     |  3 +-
 src/components/SearchResults.jsx | 66 ++++++++++++++++++++++++++++----
 src/index.js                     | 10 ++---
 4 files changed, 73 insertions(+), 31 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 77451da..b804fc1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11814,11 +11814,11 @@
       }
     },
     "match-sorter": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-4.2.1.tgz",
-      "integrity": "sha512-s+3h9TiZU9U1pWhIERHf8/f4LmBN6IXaRgo2CI17+XGByGS1GvG5VvXK9pcGyCjGe3WM3mSYRC3ipGrd5UEVgw==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.2.0.tgz",
+      "integrity": "sha512-yhmUTR5q6JP/ssR1L1y083Wp+C+TdR8LhYTxWI4IRgEUr8IXJu2mE6L3SwryCgX95/5J7qZdEg0G091sOxr1FQ==",
       "requires": {
-        "@babel/runtime": "^7.10.5",
+        "@babel/runtime": "^7.12.5",
         "remove-accents": "0.4.2"
       }
     },
@@ -14465,19 +14465,12 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "react-query": {
-      "version": "2.26.3",
-      "resolved": "https://registry.npmjs.org/react-query/-/react-query-2.26.3.tgz",
-      "integrity": "sha512-h4bhZioVY3kXfo+GLNg0zDn9XvbZkvK3I5eTzW82zpRwtJvUtxrkhrAyZ5N6A0Z9WPeRyo+384JubT5RkMaxEQ==",
-      "requires": {
-        "@babel/runtime": "^7.5.5"
-      }
-    },
-    "react-query-devtools": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/react-query-devtools/-/react-query-devtools-2.6.3.tgz",
-      "integrity": "sha512-pSvWq5Q8zgIP7QbF0+4BerCHLaLn5HPzce7sIXYqz4XEizcYJHkJtcrAwn6bUkCu5JmAt1Y7fViQtZwOIG2SYA==",
+      "version": "3.9.6",
+      "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.9.6.tgz",
+      "integrity": "sha512-EA0HDhryEYSsiVBkCtqpPAnKbIayUqJNz2eImEPgyVaaUxQhG53rnruknt4E1l3bL3nj+RbXFf7zUV5Q6kJgBw==",
       "requires": {
-        "match-sorter": "^4.1.0"
+        "@babel/runtime": "^7.5.5",
+        "match-sorter": "^6.0.2"
       }
     },
     "react-refresh": {
diff --git a/package.json b/package.json
index 5200346..9aa908b 100644
--- a/package.json
+++ b/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"
diff --git a/src/components/SearchResults.jsx b/src/components/SearchResults.jsx
index 679e8e2..82aafcf 100644
--- a/src/components/SearchResults.jsx
+++ b/src/components/SearchResults.jsx
@@ -1,18 +1,40 @@
 import React from 'react';
-import { useQuery } from 'react-query';
-import { Text, Flex, Box, Spinner } from '@chakra-ui/react';
+import { Box, SimpleGrid, Button, Text, Flex, Spinner } from '@chakra-ui/react';
+import { useInfiniteQuery } from 'react-query';
 
-import CardList from './CardList';
+import CardItem from './CardItem';
 
 function SearchResults({ query }) {
+  const itemsPerQuery = 50;
   const queryURL = `${process.env.REACT_APP_SEARCH_URL + query}&apiKey=${
     process.env.REACT_APP_KEY
-  }`;
+  }&number=${itemsPerQuery}&offset=`;
 
-  const { isLoading, error, data } = useQuery(
+  const loadMoreButtonRef = React.useRef();
+
+  const getParams = (lastPage) => {
+    console.log(
+      parseInt(lastPage.totalResults, 10) - parseInt(lastPage.offset, 10)
+    );
+    if (
+      parseInt(lastPage.totalResults, 10) - parseInt(lastPage.offset, 10) >
+      parseInt(itemsPerQuery, 10)
+    ) {
+      return parseInt(lastPage.offset, 10) + parseInt(itemsPerQuery, 10);
+    }
+    return false;
+  };
+  const {
+    isLoading,
+    error,
+    data,
+    isFetchingNextPage,
+    fetchNextPage,
+    hasNextPage,
+  } = useInfiniteQuery(
     ['foodData', queryURL],
-    async () => {
-      const response = await fetch(queryURL);
+    async ({ pageParam = 0 }) => {
+      const response = await fetch(queryURL + pageParam);
       if (response.ok) {
         return response.json();
       }
@@ -23,6 +45,7 @@ function SearchResults({ query }) {
       refetchOnMount: false,
       staleTime: 3600000,
       cacheTime: 3600000,
+      getNextPageParam: (lastPage) => getParams(lastPage),
     }
   );
 
@@ -62,7 +85,34 @@ function SearchResults({ query }) {
   }
   return (
     <Box>
-      <CardList items={data.results} />
+      <SimpleGrid minChildWidth="320px" spacing="5" alignContent="center">
+        {data &&
+          data.pages.map((page) =>
+            page.results.map((item) => {
+              return (
+                <CardItem
+                  galleryArray={page.results}
+                  item={item}
+                  key={item.id}
+                />
+              );
+            })
+          )}
+      </SimpleGrid>
+      <Button
+        ref={loadMoreButtonRef}
+        onClick={() => fetchNextPage()}
+        disabled={!hasNextPage || isFetchingNextPage}
+      >
+        {
+          // eslint-disable-next-line no-nested-ternary
+          isFetchingNextPage
+            ? 'Loading more...'
+            : hasNextPage
+            ? 'Load Newer'
+            : 'Nothing more to load'
+        }
+      </Button>
     </Box>
   );
 }
diff --git a/src/index.js b/src/index.js
index 4689d02..b917cab 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,22 +2,22 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { ChakraProvider } from '@chakra-ui/react';
 import { BrowserRouter } from 'react-router-dom';
-import { QueryCache, ReactQueryCacheProvider } from 'react-query';
-import { ReactQueryDevtools } from 'react-query-devtools';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { ReactQueryDevtools } from 'react-query/devtools';
 
 import './styles/index.css';
 import App from './components/App';
 
-const queryCache = new QueryCache();
+const queryClient = new QueryClient();
 
 ReactDOM.render(
   <React.StrictMode>
     <ChakraProvider>
       <BrowserRouter>
-        <ReactQueryCacheProvider queryCache={queryCache}>
+        <QueryClientProvider client={queryClient}>
           <App />
           <ReactQueryDevtools initialIsOpen />
-        </ReactQueryCacheProvider>
+        </QueryClientProvider>
       </BrowserRouter>
     </ChakraProvider>
   </React.StrictMode>,

From 3c9c4527967f06bde556a24fa97508e8765d62cb Mon Sep 17 00:00:00 2001
From: barrod-code <rbarros418@gmail.com>
Date: Mon, 15 Feb 2021 19:38:08 -0300
Subject: [PATCH 03/12] Modifications needed for infinte scrolling

---
 src/components/CardItem.jsx                   |  4 +-
 src/components/CardList.jsx                   | 17 ------
 src/components/ItemRecipe.jsx                 |  8 +--
 .../{ModalSwitch.js => ModalSwitch.jsx}       |  0
 src/components/SearchResults.jsx              | 57 ++++++++-----------
 src/components/ViewRecipe.jsx                 |  8 ++-
 src/index.js                                  | 11 +++-
 7 files changed, 41 insertions(+), 64 deletions(-)
 delete mode 100644 src/components/CardList.jsx
 rename src/components/{ModalSwitch.js => ModalSwitch.jsx} (100%)

diff --git a/src/components/CardItem.jsx b/src/components/CardItem.jsx
index 61361f2..6be62af 100644
--- a/src/components/CardItem.jsx
+++ b/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,
           },
         }}
diff --git a/src/components/CardList.jsx b/src/components/CardList.jsx
deleted file mode 100644
index 7c6074c..0000000
--- a/src/components/CardList.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { React } from 'react';
-import { SimpleGrid } from '@chakra-ui/react';
-
-import CardItem from './CardItem';
-
-function CardList({ items }) {
-  return (
-    <SimpleGrid minChildWidth="380px" spacing="5" alignContent="center">
-      {items &&
-        items.map((item) => {
-          return <CardItem galleryArray={items} item={item} key={item.id} />;
-        })}
-    </SimpleGrid>
-  );
-}
-
-export default CardList;
diff --git a/src/components/ItemRecipe.jsx b/src/components/ItemRecipe.jsx
index 26bbb26..c58e08d 100644
--- a/src/components/ItemRecipe.jsx
+++ b/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>
       )}
diff --git a/src/components/ModalSwitch.js b/src/components/ModalSwitch.jsx
similarity index 100%
rename from src/components/ModalSwitch.js
rename to src/components/ModalSwitch.jsx
diff --git a/src/components/SearchResults.jsx b/src/components/SearchResults.jsx
index 82aafcf..7f76d97 100644
--- a/src/components/SearchResults.jsx
+++ b/src/components/SearchResults.jsx
@@ -6,24 +6,18 @@ import CardItem from './CardItem';
 
 function SearchResults({ query }) {
   const itemsPerQuery = 50;
-  const queryURL = `${process.env.REACT_APP_SEARCH_URL + query}&apiKey=${
-    process.env.REACT_APP_KEY
-  }&number=${itemsPerQuery}&offset=`;
+  const queryURL = (offset) =>
+    `${process.env.REACT_APP_SEARCH_URL + query}&apiKey=${
+      process.env.REACT_APP_KEY
+    }&number=${itemsPerQuery}&offset=${offset}`;
 
   const loadMoreButtonRef = React.useRef();
 
-  const getParams = (lastPage) => {
-    console.log(
-      parseInt(lastPage.totalResults, 10) - parseInt(lastPage.offset, 10)
-    );
-    if (
-      parseInt(lastPage.totalResults, 10) - parseInt(lastPage.offset, 10) >
-      parseInt(itemsPerQuery, 10)
-    ) {
-      return parseInt(lastPage.offset, 10) + parseInt(itemsPerQuery, 10);
-    }
-    return false;
-  };
+  const getParams = (lastPage) =>
+    lastPage.totalResults - lastPage.offset > itemsPerQuery
+      ? lastPage.offset + itemsPerQuery
+      : false;
+
   const {
     isLoading,
     error,
@@ -32,23 +26,29 @@ function SearchResults({ query }) {
     fetchNextPage,
     hasNextPage,
   } = useInfiniteQuery(
-    ['foodData', queryURL],
+    ['foodData', queryURL(0)],
     async ({ pageParam = 0 }) => {
-      const response = await fetch(queryURL + pageParam);
+      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),
     }
   );
 
+  function statusButton() {
+    if (isFetchingNextPage) {
+      return <Text>Loading more...</Text>;
+    }
+    if (hasNextPage) {
+      return <Text>Load Newer</Text>;
+    }
+    return <Text>Nothing more to load</Text>;
+  }
+
   if (isLoading)
     return (
       <Flex alignItems="center" justifyContent="center" flexDirection="column">
@@ -90,11 +90,7 @@ function SearchResults({ query }) {
           data.pages.map((page) =>
             page.results.map((item) => {
               return (
-                <CardItem
-                  galleryArray={page.results}
-                  item={item}
-                  key={item.id}
-                />
+                <CardItem pagesArray={data.pages} item={item} key={item.id} />
               );
             })
           )}
@@ -104,14 +100,7 @@ function SearchResults({ query }) {
         onClick={() => fetchNextPage()}
         disabled={!hasNextPage || isFetchingNextPage}
       >
-        {
-          // eslint-disable-next-line no-nested-ternary
-          isFetchingNextPage
-            ? 'Loading more...'
-            : hasNextPage
-            ? 'Load Newer'
-            : 'Nothing more to load'
-        }
+        {statusButton()}
       </Button>
     </Box>
   );
diff --git a/src/components/ViewRecipe.jsx b/src/components/ViewRecipe.jsx
index 1405a24..3e44c6b 100644
--- a/src/components/ViewRecipe.jsx
+++ b/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,
                     },
                   }}
diff --git a/src/index.js b/src/index.js
index b917cab..5cfa263 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,7 +8,16 @@ import { ReactQueryDevtools } from 'react-query/devtools';
 import './styles/index.css';
 import App from './components/App';
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      staleTime: 3600000,
+      cacheTime: 3600000,
+    },
+  },
+});
 
 ReactDOM.render(
   <React.StrictMode>

From 1ec703a6a36b23a9ffaa6ca3137d04ddea4e8223 Mon Sep 17 00:00:00 2001
From: Barrod-code <rbarros@fisica.unlp.edu.ar>
Date: Wed, 17 Feb 2021 00:12:16 -0300
Subject: [PATCH 04/12] Automatic refetching working!

---
 src/components/SearchResults.jsx     |  9 +++++-
 src/hooks/useIntersectionObsever.jsx | 42 ++++++++++++++++++++++++++++
 2 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 src/hooks/useIntersectionObsever.jsx

diff --git a/src/components/SearchResults.jsx b/src/components/SearchResults.jsx
index 7f76d97..f8b2b34 100644
--- a/src/components/SearchResults.jsx
+++ b/src/components/SearchResults.jsx
@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Box, SimpleGrid, Button, Text, Flex, Spinner } from '@chakra-ui/react';
 import { useInfiniteQuery } from 'react-query';
 
 import CardItem from './CardItem';
+import useIntersectionObserver from '../hooks/useIntersectionObsever';
 
 function SearchResults({ query }) {
   const itemsPerQuery = 50;
@@ -39,6 +40,12 @@ function SearchResults({ query }) {
     }
   );
 
+  useIntersectionObserver({
+    target: loadMoreButtonRef,
+    onIntersect: useCallback(fetchNextPage, [getParams, fetchNextPage]),
+    enabled: hasNextPage,
+  });
+
   function statusButton() {
     if (isFetchingNextPage) {
       return <Text>Loading more...</Text>;
diff --git a/src/hooks/useIntersectionObsever.jsx b/src/hooks/useIntersectionObsever.jsx
new file mode 100644
index 0000000..c876d51
--- /dev/null
+++ b/src/hooks/useIntersectionObsever.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+
+export default function useIntersectionObserver({
+  root,
+  target,
+  onIntersect,
+  threshold = 1.0,
+  rootMargin = '0px',
+  enabled = true,
+}) {
+  React.useEffect(() => {
+    // do nothing if not enabled (ie: when there's nothing more to load)
+    if (!enabled) {
+      return;
+    }
+    // create new observer, and for each observed element, if isIntersecting is true, execute onIntercect function
+    const observer = new IntersectionObserver(
+      (entries) =>
+        entries.forEach((entry) => entry.isIntersecting && onIntersect()),
+      {
+        root: root && root.current,
+        rootMargin,
+        threshold,
+      }
+    );
+
+    // target is a useRef object (root if specified, must be a useRef object as well),
+    // the actual DOM element watched is target.current
+    // so if there is a target, el returns the DOM element, if not, returns undefined
+    const el = target && target.current;
+
+    // if there is no target, this hook does nothing
+    if (!el) {
+      return;
+    }
+
+    observer.observe(el);
+    // cleanup function
+    // eslint-disable-next-line consistent-return
+    return () => observer.unobserve(el);
+  }, [enabled, onIntersect, root, rootMargin, target, threshold]);
+}

From 90aaa25dba49795254564dbc6c3ee9c62c642cdd Mon Sep 17 00:00:00 2001
From: Barrod-Code <rbarros418@gmail.com>
Date: Wed, 17 Feb 2021 17:15:43 -0300
Subject: [PATCH 05/12] Fixed reference button not set on first render

---
 src/components/SearchResults.jsx     | 24 +++++++++++++++++-------
 src/hooks/useIntersectionObsever.jsx |  5 +++--
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/SearchResults.jsx b/src/components/SearchResults.jsx
index f8b2b34..3691339 100644
--- a/src/components/SearchResults.jsx
+++ b/src/components/SearchResults.jsx
@@ -1,5 +1,7 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Box, SimpleGrid, Button, Text, Flex, Spinner } from '@chakra-ui/react';
+/* eslint-disable no-unused-vars */
+
 import { useInfiniteQuery } from 'react-query';
 
 import CardItem from './CardItem';
@@ -12,8 +14,6 @@ function SearchResults({ query }) {
       process.env.REACT_APP_KEY
     }&number=${itemsPerQuery}&offset=${offset}`;
 
-  const loadMoreButtonRef = React.useRef();
-
   const getParams = (lastPage) =>
     lastPage.totalResults - lastPage.offset > itemsPerQuery
       ? lastPage.offset + itemsPerQuery
@@ -40,13 +40,22 @@ function SearchResults({ query }) {
     }
   );
 
+  const [ButtonRef, setButtonRef] = useState();
+
+  // Sets the target for useInterceptionObserver
+  const observedButton = useCallback((node) => {
+    if (node !== null) {
+      setButtonRef(node);
+    }
+  }, []);
+
   useIntersectionObserver({
-    target: loadMoreButtonRef,
+    target: ButtonRef,
     onIntersect: useCallback(fetchNextPage, [getParams, fetchNextPage]),
     enabled: hasNextPage,
   });
 
-  function statusButton() {
+  function buttonStatus() {
     if (isFetchingNextPage) {
       return <Text>Loading more...</Text>;
     }
@@ -103,11 +112,12 @@ function SearchResults({ query }) {
           )}
       </SimpleGrid>
       <Button
-        ref={loadMoreButtonRef}
+        ref={observedButton}
         onClick={() => fetchNextPage()}
         disabled={!hasNextPage || isFetchingNextPage}
+        on
       >
-        {statusButton()}
+        {buttonStatus()}
       </Button>
     </Box>
   );
diff --git a/src/hooks/useIntersectionObsever.jsx b/src/hooks/useIntersectionObsever.jsx
index c876d51..3f20aa2 100644
--- a/src/hooks/useIntersectionObsever.jsx
+++ b/src/hooks/useIntersectionObsever.jsx
@@ -18,7 +18,7 @@ export default function useIntersectionObserver({
       (entries) =>
         entries.forEach((entry) => entry.isIntersecting && onIntersect()),
       {
-        root: root && root.current,
+        root,
         rootMargin,
         threshold,
       }
@@ -27,7 +27,8 @@ export default function useIntersectionObserver({
     // target is a useRef object (root if specified, must be a useRef object as well),
     // the actual DOM element watched is target.current
     // so if there is a target, el returns the DOM element, if not, returns undefined
-    const el = target && target.current;
+    console.log('target', target);
+    const el = target;
 
     // if there is no target, this hook does nothing
     if (!el) {

From 298ac71aaacd37deb1b90160093e34782bba16d8 Mon Sep 17 00:00:00 2001
From: Barrod-Code <rbarros418@gmail.com>
Date: Wed, 17 Feb 2021 17:26:59 -0300
Subject: [PATCH 06/12] comments

---
 src/hooks/useIntersectionObsever.jsx | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/hooks/useIntersectionObsever.jsx b/src/hooks/useIntersectionObsever.jsx
index 3f20aa2..b8fb327 100644
--- a/src/hooks/useIntersectionObsever.jsx
+++ b/src/hooks/useIntersectionObsever.jsx
@@ -8,6 +8,17 @@ export default function useIntersectionObserver({
   rootMargin = '0px',
   enabled = true,
 }) {
+  // Target must be set with a callback like this, useRef kind of works, after the first render, this always works.
+
+  // const [ButtonRef, setButtonRef] = useState();
+
+  // // Sets the target for useInterceptionObserver
+  // const observedButton = useCallback((node) => {
+  //   if (node !== null) {
+  //     setButtonRef(node);
+  //   }
+  // }, []);
+
   React.useEffect(() => {
     // do nothing if not enabled (ie: when there's nothing more to load)
     if (!enabled) {
@@ -24,20 +35,14 @@ export default function useIntersectionObserver({
       }
     );
 
-    // target is a useRef object (root if specified, must be a useRef object as well),
-    // the actual DOM element watched is target.current
-    // so if there is a target, el returns the DOM element, if not, returns undefined
-    console.log('target', target);
-    const el = target;
-
     // if there is no target, this hook does nothing
-    if (!el) {
+    if (!target) {
       return;
     }
 
-    observer.observe(el);
+    observer.observe(target);
     // cleanup function
     // eslint-disable-next-line consistent-return
-    return () => observer.unobserve(el);
+    return () => observer.unobserve(target);
   }, [enabled, onIntersect, root, rootMargin, target, threshold]);
 }

From 0f3f3964dca4f04990da4898f6b35b9e76acd9a9 Mon Sep 17 00:00:00 2001
From: Barrod-code <rbarros@fisica.unlp.edu.ar>
Date: Wed, 17 Feb 2021 19:30:57 -0300
Subject: [PATCH 07/12] eslint rule unignored, extra comments

---
 src/components/SearchResults.jsx     |  2 ++
 src/hooks/useIntersectionObsever.jsx | 10 ++++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/SearchResults.jsx b/src/components/SearchResults.jsx
index 3691339..9977173 100644
--- a/src/components/SearchResults.jsx
+++ b/src/components/SearchResults.jsx
@@ -43,6 +43,8 @@ function SearchResults({ query }) {
   const [ButtonRef, setButtonRef] = useState();
 
   // Sets the target for useInterceptionObserver
+  // the ref prop calls this function when the component is mounted
+  // instead of on a rerender as useRef does
   const observedButton = useCallback((node) => {
     if (node !== null) {
       setButtonRef(node);
diff --git a/src/hooks/useIntersectionObsever.jsx b/src/hooks/useIntersectionObsever.jsx
index b8fb327..83cd315 100644
--- a/src/hooks/useIntersectionObsever.jsx
+++ b/src/hooks/useIntersectionObsever.jsx
@@ -8,11 +8,14 @@ export default function useIntersectionObserver({
   rootMargin = '0px',
   enabled = true,
 }) {
-  // Target must be set with a callback like this, useRef kind of works, after the first render, this always works.
+  // // Target must be set with a callback like this, useRef kind of works, after the first render, this always works.
 
   // const [ButtonRef, setButtonRef] = useState();
 
   // // Sets the target for useInterceptionObserver
+  // // the ref prop calls this function when the component is mounted
+  // // instead of on a rerender as useRef does
+
   // const observedButton = useCallback((node) => {
   //   if (node !== null) {
   //     setButtonRef(node);
@@ -22,7 +25,7 @@ export default function useIntersectionObserver({
   React.useEffect(() => {
     // do nothing if not enabled (ie: when there's nothing more to load)
     if (!enabled) {
-      return;
+      return undefined;
     }
     // create new observer, and for each observed element, if isIntersecting is true, execute onIntercect function
     const observer = new IntersectionObserver(
@@ -37,12 +40,11 @@ export default function useIntersectionObserver({
 
     // if there is no target, this hook does nothing
     if (!target) {
-      return;
+      return undefined;
     }
 
     observer.observe(target);
     // cleanup function
-    // eslint-disable-next-line consistent-return
     return () => observer.unobserve(target);
   }, [enabled, onIntersect, root, rootMargin, target, threshold]);
 }

From e9b3dfda967d93c5adabe31d5052966d8a6373ce Mon Sep 17 00:00:00 2001
From: Barrod-Code <rbarros418@gmail.com>
Date: Thu, 18 Feb 2021 23:14:30 -0300
Subject: [PATCH 08/12] simplified interception observer logic

---
 src/components/SearchResults.jsx | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/components/SearchResults.jsx b/src/components/SearchResults.jsx
index 9977173..699a10a 100644
--- a/src/components/SearchResults.jsx
+++ b/src/components/SearchResults.jsx
@@ -40,19 +40,11 @@ function SearchResults({ query }) {
     }
   );
 
-  const [ButtonRef, setButtonRef] = useState();
-
-  // Sets the target for useInterceptionObserver
-  // the ref prop calls this function when the component is mounted
-  // instead of on a rerender as useRef does
-  const observedButton = useCallback((node) => {
-    if (node !== null) {
-      setButtonRef(node);
-    }
-  }, []);
+  // could have been useRef, but the ref won't get updated with the DOM element until a rerender
+  const [buttonRef, setButtonRef] = useState();
 
   useIntersectionObserver({
-    target: ButtonRef,
+    target: buttonRef,
     onIntersect: useCallback(fetchNextPage, [getParams, fetchNextPage]),
     enabled: hasNextPage,
   });
@@ -114,10 +106,9 @@ function SearchResults({ query }) {
           )}
       </SimpleGrid>
       <Button
-        ref={observedButton}
+        ref={(node) => setButtonRef(node)}
         onClick={() => fetchNextPage()}
         disabled={!hasNextPage || isFetchingNextPage}
-        on
       >
         {buttonStatus()}
       </Button>

From 935faf85fb66b7e5dd931f2ab2762f14ed09eb48 Mon Sep 17 00:00:00 2001
From: barrod-code <rbarros418@gmail.com>
Date: Sat, 20 Feb 2021 17:33:21 -0300
Subject: [PATCH 09/12] infiniteQueries done and styles merged

---
 src/components/SearchResults.jsx     |  6 ++----
 src/hooks/useIntersectionObsever.jsx | 14 +-------------
 2 files changed, 3 insertions(+), 17 deletions(-)

diff --git a/src/components/SearchResults.jsx b/src/components/SearchResults.jsx
index 699a10a..b38056e 100644
--- a/src/components/SearchResults.jsx
+++ b/src/components/SearchResults.jsx
@@ -1,7 +1,5 @@
 import React, { useCallback, useState } from 'react';
 import { Box, SimpleGrid, Button, Text, Flex, Spinner } from '@chakra-ui/react';
-/* eslint-disable no-unused-vars */
-
 import { useInfiniteQuery } from 'react-query';
 
 import CardItem from './CardItem';
@@ -40,7 +38,7 @@ function SearchResults({ query }) {
     }
   );
 
-  // could have been useRef, but the ref won't get updated with the DOM element until a rerender
+  // could have used useRef, but the ref won't get updated with the DOM element until a rerender
   const [buttonRef, setButtonRef] = useState();
 
   useIntersectionObserver({
@@ -95,7 +93,7 @@ function SearchResults({ query }) {
   }
   return (
     <Box>
-      <SimpleGrid minChildWidth="320px" spacing="5" alignContent="center">
+      <SimpleGrid minChildWidth="280px" spacing="5" alignContent="center">
         {data &&
           data.pages.map((page) =>
             page.results.map((item) => {
diff --git a/src/hooks/useIntersectionObsever.jsx b/src/hooks/useIntersectionObsever.jsx
index 83cd315..4be8a9d 100644
--- a/src/hooks/useIntersectionObsever.jsx
+++ b/src/hooks/useIntersectionObsever.jsx
@@ -8,19 +8,7 @@ export default function useIntersectionObserver({
   rootMargin = '0px',
   enabled = true,
 }) {
-  // // Target must be set with a callback like this, useRef kind of works, after the first render, this always works.
-
-  // const [ButtonRef, setButtonRef] = useState();
-
-  // // Sets the target for useInterceptionObserver
-  // // the ref prop calls this function when the component is mounted
-  // // instead of on a rerender as useRef does
-
-  // const observedButton = useCallback((node) => {
-  //   if (node !== null) {
-  //     setButtonRef(node);
-  //   }
-  // }, []);
+  // // Target and root must be set with useState, useRef kind of works after the first render, this always works.
 
   React.useEffect(() => {
     // do nothing if not enabled (ie: when there's nothing more to load)

From fb95ecf7493579c7d6f074db875612aa9d14628d Mon Sep 17 00:00:00 2001
From: barrod-code <rbarros418@gmail.com>
Date: Sat, 20 Feb 2021 20:33:33 -0300
Subject: [PATCH 10/12] Merged styles, fixed some edge cases

---
 src/components/CardItem.jsx            | 13 +++---
 src/components/NutritionalTable.jsx    |  2 +-
 src/components/SearchFieldCollapse.jsx | 14 +++---
 src/components/SearchResults.jsx       | 60 ++++++++++++++++----------
 4 files changed, 53 insertions(+), 36 deletions(-)

diff --git a/src/components/CardItem.jsx b/src/components/CardItem.jsx
index 6be62af..0841294 100644
--- a/src/components/CardItem.jsx
+++ b/src/components/CardItem.jsx
@@ -22,10 +22,11 @@ function CardItem({ item, pagesArray }) {
           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"
         >
@@ -33,10 +34,11 @@ function CardItem({ item, pagesArray }) {
             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, pagesArray }) {
               p="10px"
               borderTop="1px solid white"
               borderBottom="1px solid white"
+              isTruncated
             >
               {item.title}
             </Text>
diff --git a/src/components/NutritionalTable.jsx b/src/components/NutritionalTable.jsx
index 25650c0..ae45ab9 100644
--- a/src/components/NutritionalTable.jsx
+++ b/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>
diff --git a/src/components/SearchFieldCollapse.jsx b/src/components/SearchFieldCollapse.jsx
index d123960..0ceb291 100644
--- a/src/components/SearchFieldCollapse.jsx
+++ b/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';
@@ -77,10 +77,10 @@ function SearchFieldCollapse({ userQueryData }) {
 
     return (
       <Box as="form">
-        <Box>
+        <Box m="1rem">
           <InputGroup size="md">
             <Input
-              m="1rem"
+              m="0rem"
               pr="4.5rem"
               fontWeight="bold"
               color="#b62a07"
@@ -94,15 +94,15 @@ 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={(e) => SearchQuery(e)}
                   size="sm"
-                  mr="1rem"
                   bg="#b62a07"
+                  mr="1px"
                   color="white"
                   _hover={{
                     bg: '#6e1a05',
@@ -122,7 +122,7 @@ function SearchFieldCollapse({ userQueryData }) {
                 >
                   {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
                 </Button>
-              </HStack>
+              </ButtonGroup>
             </InputRightElement>
           </InputGroup>
         </Box>
diff --git a/src/components/SearchResults.jsx b/src/components/SearchResults.jsx
index b38056e..6f5b0b6 100644
--- a/src/components/SearchResults.jsx
+++ b/src/components/SearchResults.jsx
@@ -1,5 +1,14 @@
+/* eslint-disable no-unused-vars */
 import React, { useCallback, useState } from 'react';
-import { Box, SimpleGrid, Button, Text, Flex, Spinner } from '@chakra-ui/react';
+import {
+  Box,
+  SimpleGrid,
+  Button,
+  Text,
+  Flex,
+  Spinner,
+  Center,
+} from '@chakra-ui/react';
 import { useInfiniteQuery } from 'react-query';
 
 import CardItem from './CardItem';
@@ -41,21 +50,11 @@ function SearchResults({ query }) {
   // 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,
-  });
-
-  function buttonStatus() {
-    if (isFetchingNextPage) {
-      return <Text>Loading more...</Text>;
-    }
-    if (hasNextPage) {
-      return <Text>Load Newer</Text>;
-    }
-    return <Text>Nothing more to load</Text>;
-  }
+  // useIntersectionObserver({
+  //   target: buttonRef,
+  //   onIntersect: useCallback(fetchNextPage, [getParams, fetchNextPage]),
+  //   enabled: hasNextPage,
+  // });
 
   if (isLoading)
     return (
@@ -103,13 +102,28 @@ function SearchResults({ query }) {
             })
           )}
       </SimpleGrid>
-      <Button
-        ref={(node) => setButtonRef(node)}
-        onClick={() => fetchNextPage()}
-        disabled={!hasNextPage || isFetchingNextPage}
-      >
-        {buttonStatus()}
-      </Button>
+
+      <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>
   );
 }

From 16a5b843b5ac12a79f47143cd031da1e0a828c8d Mon Sep 17 00:00:00 2001
From: barrod-code <rbarros418@gmail.com>
Date: Sat, 20 Feb 2021 22:06:55 -0300
Subject: [PATCH 11/12] Enabled observer, i'm an idiot

---
 src/components/SearchResults.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/SearchResults.jsx b/src/components/SearchResults.jsx
index 6f5b0b6..e12df35 100644
--- a/src/components/SearchResults.jsx
+++ b/src/components/SearchResults.jsx
@@ -50,11 +50,11 @@ function SearchResults({ query }) {
   // 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,
-  // });
+  useIntersectionObserver({
+    target: buttonRef,
+    onIntersect: useCallback(fetchNextPage, [getParams, fetchNextPage]),
+    enabled: hasNextPage,
+  });
 
   if (isLoading)
     return (

From b34521b2274350a057d038b76c267463aec9b75a Mon Sep 17 00:00:00 2001
From: Barrod-code <69771152+Barrod-code@users.noreply.github.com>
Date: Sat, 20 Feb 2021 22:15:24 -0300
Subject: [PATCH 12/12] linter oops

---
 src/components/SearchResults.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/SearchResults.jsx b/src/components/SearchResults.jsx
index e12df35..e9edfbf 100644
--- a/src/components/SearchResults.jsx
+++ b/src/components/SearchResults.jsx
@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import React, { useCallback, useState } from 'react';
 import {
   Box,