#15 Add infinity scroll

SandraBergstrom · Jun 27, 2023 · 21f7c8f · 21f7c8f
1 parent 6b9671b
commit 21f7c8f
Showing 1 changed file with 14 additions and 3 deletions.
diff --git 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} />