57

Author: kossiecoder

src/components/BlogList.js

@@ -11,12 +11,19 @@ const BlogList = ({ isAdmin }) => {
   const [posts, setPosts] = useState([]);
   const [loading, setLoading] = useState(true);
   const [currentPage, setCurrentPage] = useState(1);
+  const [numberOfPosts, setNumberOfPosts] = useState(0);
+  const [numberOfPages, setNumberOfPages] = useState(0);
+  const limit = 5;
+
+  useEffect(() => {
+    setNumberOfPages(Math.ceil(numberOfPosts/limit));
+  }, [numberOfPosts]);
 
   const getPosts = (page = 1) => {
     setCurrentPage(page);
     let params = {
       _page: page,
-      _limit: 5,
+      _limit: limit,
       _sort: 'id',
       _order: 'desc',
     }
@@ -28,6 +35,7 @@ const BlogList = ({ isAdmin }) => {
     axios.get(`http://localhost:3001/posts`, {
       params
     }).then((res) => {
+      setNumberOfPosts(res.headers['x-total-count']);
       setPosts(res.data);
       setLoading(false);
     })
@@ -78,11 +86,11 @@ const BlogList = ({ isAdmin }) => {
   return (
     <div>
       {renderBlogList()}
-      <Pagination 
+      {numberOfPages > 1 && <Pagination 
         currentPage={currentPage} 
-        numberOfPages={3} 
+        numberOfPages={numberOfPages} 
         onClick={getPosts}
-      />
+      />}
     </div>
   )
 };