Merge pull request #385 from WebDevStudios/feature/383-todos-pagination

feature/383-todos-pagination
WebDevStudios · Apr 28, 2021 · bb902d9 · bb902d9 · vercel · Apr 28, 2021
2 parents ec39a04 + cbbd06f
commit bb902d9
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 13 deletions.
diff --git a/pages/blog/[[...slug]].js b/pages/blog/[[...slug]].js
@@ -10,6 +10,7 @@ import getPagePropTypes from '@/functions/getPagePropTypes'
 import getArchivePosts from '@/functions/next-api/wordpress/archive/getArchivePosts'
 import getPostTypeStaticPaths from '@/functions/wordpress/postTypes/getPostTypeStaticPaths'
 import getPostTypeStaticProps from '@/functions/wordpress/postTypes/getPostTypeStaticProps'
+import {useRef, useState} from 'react'
 
 // Define route post type.
 const postType = 'post'
@@ -26,12 +27,32 @@ const postType = 'post'
  * @return {Element}                 The BlogPost component.
  */
 export default function BlogPost({post, archive, posts, pagination}) {
+  // Track all posts, including initial posts and additionally loaded pages.
+  const [allPosts, setAllPosts] = useState(posts)
+
+  // Track "load more" button state.
+  const [loadingMore, setLoadingMore] = useState(false)
+
+  // Track current pagination object.
+  const paginationRef = useRef(pagination)
+
   /**
    * Load more posts for archive.
    */
   async function loadPosts() {
-    // TODO: use response to display next "page" of posts.
-    await getArchivePosts(postType, pagination?.endCursor)
+    setLoadingMore(true)
+
+    const newPosts = await getArchivePosts(
+      postType,
+      paginationRef.current?.endCursor
+    )
+
+    setAllPosts([...allPosts, ...(newPosts?.posts ?? [])])
+
+    // Update pagination ref.
+    paginationRef.current = newPosts?.pagination
+
+    setLoadingMore(false)
   }
 
   // Check for post archive.
@@ -40,11 +61,11 @@ export default function BlogPost({post, archive, posts, pagination}) {
     return (
       <Layout seo={{...post?.seo}}>
         <Container>
-          {!posts || !posts.length ? (
+          {!allPosts || !allPosts.length ? (
             <p>No posts found.</p>
           ) : (
             <div className="grid lg:grid-cols-2 gap-12">
-              {posts.map((post, index) => (
+              {allPosts.map((post, index) => (
                 <Card
                   key={index}
                   title={post?.title}
@@ -56,9 +77,9 @@ export default function BlogPost({post, archive, posts, pagination}) {
           )}
           <Button
             onClick={loadPosts}
-            text="Load More"
+            text={loadingMore ? 'Loading...' : 'Load More'}
             type="secondary"
-            disabled={!pagination.hasNextPage}
+            disabled={!paginationRef.current?.hasNextPage || loadingMore}
           />
         </Container>
       </Layout>

diff --git a/pages/team/[[...slug]].js b/pages/team/[[...slug]].js
@@ -9,6 +9,7 @@ import getPagePropTypes from '@/functions/getPagePropTypes'
 import getArchivePosts from '@/functions/next-api/wordpress/archive/getArchivePosts'
 import getPostTypeStaticPaths from '@/functions/wordpress/postTypes/getPostTypeStaticPaths'
 import getPostTypeStaticProps from '@/functions/wordpress/postTypes/getPostTypeStaticProps'
+import {useRef, useState} from 'react'
 
 // Define route post type.
 const postType = 'team'
@@ -25,12 +26,32 @@ const postType = 'team'
  * @return {Element}                 The Team component.
  */
 export default function Team({post, archive, posts, pagination}) {
+  // Track all posts, including initial posts and additionally loaded pages.
+  const [allPosts, setAllPosts] = useState(posts)
+
+  // Track "load more" button state.
+  const [loadingMore, setLoadingMore] = useState(false)
+
+  // Track current pagination object.
+  const paginationRef = useRef(pagination)
+
   /**
    * Load more posts for archive.
    */
   async function loadPosts() {
-    // TODO: use response to display next "page" of posts.
-    await getArchivePosts(postType, pagination?.endCursor)
+    setLoadingMore(true)
+
+    const newPosts = await getArchivePosts(
+      postType,
+      paginationRef.current?.endCursor
+    )
+
+    setAllPosts([...allPosts, ...(newPosts?.posts ?? [])])
+
+    // Update pagination ref.
+    paginationRef.current = newPosts?.pagination
+
+    setLoadingMore(false)
   }
 
   // Check for post archive.
@@ -39,11 +60,11 @@ export default function Team({post, archive, posts, pagination}) {
     return (
       <Layout seo={{...post?.seo}}>
         <Container className="container py-20">
-          {!posts || !posts.length ? (
+          {!allPosts || !allPosts.length ? (
             <p>No posts found.</p>
           ) : (
             <div className="grid lg:grid-cols-2 gap-12">
-              {posts.map((post, index) => (
+              {allPosts.map((post, index) => (
                 <Card
                   key={index}
                   title={post?.title}
@@ -54,10 +75,10 @@ export default function Team({post, archive, posts, pagination}) {
             </div>
           )}
           <Button
-            onClick={() => loadPosts}
-            text="Load More"
+            onClick={loadPosts}
+            text={loadingMore ? 'Loading...' : 'Load More'}
             type="secondary"
-            disabled={!pagination.hasNextPage}
+            disabled={!paginationRef.current?.hasNextPage || loadingMore}
           />
         </Container>
       </Layout>