Adding pagination controls to feed page

src/components/app-body/posts/index.js

@@ -5,7 +5,7 @@
 // Global npm libraries
 import React, { useState, useEffect } from 'react'
 import { Link } from 'react-router-dom'
-import { Container, Row, Col, Spinner, Table } from 'react-bootstrap'
+import { Container, Row, Col, Spinner, Table, Button } from 'react-bootstrap'
 
 // Local libraries
 import MemoDb from '../../../services/memo-db'
@@ -14,6 +14,7 @@ import PostReplyCount from '../../post-reply-count'
 import '../../../App.css'
 
 const appUtil = new AppUtil()
+const PAGE_SIZE = 100
 
 function truncate (str, maxLen = 16) {
   if (!str || str.length <= maxLen) return str
@@ -32,33 +33,54 @@ function RecentPosts () {
   const [error, setError] = useState(null)
   const [posts, setPosts] = useState([])
   const [pagination, setPagination] = useState(null)
+  const [offset, setOffset] = useState(0)
 
   useEffect(() => {
     const loadPosts = async () => {
+      setLoading(true)
+      setError(null)
+
       try {
         const memoDb = new MemoDb()
-        const data = await memoDb.getRecentPosts({ limit: 100, offset: 0 })
+        const data = await memoDb.getRecentPosts({ limit: PAGE_SIZE, offset })
         setPosts(data.posts || [])
         setPagination(data.pagination || null)
       } catch (err) {
         setError(err.message || 'Failed to load recent posts')
+        setPosts([])
+        setPagination(null)
       }
+
       setLoading(false)
     }
 
     loadPosts()
-  }, [])
+  }, [offset])
+
+  const canGoBack = offset > 0
+  const canGoNext = pagination?.hasMore ?? false
+
+  const handlePrevious = () => {
+    setOffset((prev) => Math.max(0, prev - PAGE_SIZE))
+  }
+
+  const handleNext = () => {
+    setOffset((prev) => prev + PAGE_SIZE)
+  }
 
   return (
     <Container>
       <Row>
         <Col>
           <h1 className='mt-4'>Recent Posts</h1>
-          {pagination && (
+          {pagination && posts.length > 0 && (
             <p className='text-muted'>
-              Showing {posts.length} of {pagination.total} posts
+              Showing {pagination.offset + 1}–{pagination.offset + posts.length} of {pagination.total} posts
             </p>
           )}
+          {pagination && posts.length === 0 && (
+            <p className='text-muted'>No posts on this page.</p>
+          )}
 
           {error && <p className='text-danger'>{error}</p>}
 
@@ -113,6 +135,25 @@ function RecentPosts () {
               </tbody>
             </Table>
           )}
+
+          {!loading && !error && (pagination || offset > 0) && (
+            <div className='d-flex justify-content-between mt-3 mb-4'>
+              <Button
+                variant='outline-primary'
+                onClick={handlePrevious}
+                disabled={!canGoBack}
+              >
+                Previous
+              </Button>
+              <Button
+                variant='outline-primary'
+                onClick={handleNext}
+                disabled={!canGoNext}
+              >
+                Next
+              </Button>
+            </div>
+          )}
         </Col>
       </Row>
     </Container>