From 21f7c8f810523f6e0d5cdbc46d64faf2a31122b2 Mon Sep 17 00:00:00 2001
From: SandraBergstrom <bergstrom_sandra@hotmail.com>
Date: Tue, 27 Jun 2023 10:21:03 +0000
Subject: [PATCH] #15 Add infinity scroll

---
 src/pages/posts/PostsPage.js | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/pages/posts/PostsPage.js b/src/pages/posts/PostsPage.js
index 11795dc..86b1061 100644
--- a/src/pages/posts/PostsPage.js
+++ b/src/pages/posts/PostsPage.js
@@ -13,6 +13,8 @@ import { useLocation } from "react-router-dom";
 import { axiosReq } from "../../api/axiosDefaults";
 
 import NoResults from "../../assets/no-results.png";
+import InfiniteScroll from "react-infinite-scroll-component";
+import {fetchMoreData}  from "../../utils/utils"
 
 function PostsPage({ message, filter = "" }) {
   const [posts, setPosts] = useState({ results: [] });
@@ -60,9 +62,18 @@ function PostsPage({ message, filter = "" }) {
         {hasLoaded ? (
           <>
             {posts.results.length ? (
-              posts.results.map((post) => (
-                <Post key={post.id} {...post} setPosts={setPosts} />
-              ))
+              <InfiniteScroll 
+              children={
+                posts.results.map((post) => (
+                  <Post key={post.id} {...post} setPosts={setPosts} />
+                ))
+              }
+              dataLength={posts.results.length}
+              loader={<Asset spinner />}
+              hasMore={!!posts.next}
+              next={() => fetchMoreData(posts, setPosts)}
+              />
+              
             ) : (
               <Container className="appStyles.Content">
                 <Asset src={NoResults} message={message} />