51

Author: kossiecoder

db.json

@@ -41,6 +41,41 @@
       "publish": false,
       "createdAt": 1647211425309,
       "id": 10
+    },
+    {
+      "title": "test1",
+      "body": "test1",
+      "publish": false,
+      "createdAt": 1647211538719,
+      "id": 11
+    },
+    {
+      "title": "test2",
+      "body": "test2",
+      "publish": false,
+      "createdAt": 1647211545153,
+      "id": 12
+    },
+    {
+      "title": "test3",
+      "body": "test3",
+      "publish": false,
+      "createdAt": 1647211550036,
+      "id": 13
+    },
+    {
+      "title": "test4",
+      "body": "test4",
+      "publish": false,
+      "createdAt": 1647211557225,
+      "id": 14
+    },
+    {
+      "title": "test5",
+      "body": "test5",
+      "publish": false,
+      "createdAt": 1647211568779,
+      "id": 15
     }
   ]
 }

src/components/BlogList.js

@@ -4,6 +4,7 @@ import Card from '../components/Card';
 import { useHistory } from 'react-router';
 import LoadingSpinner from '../components/LoadingSpinner';
 import { bool } from 'prop-types';
+import Pagination from './Pagination';
 
 const BlogList = ({ isAdmin }) => {
   const history = useHistory();
@@ -38,27 +39,35 @@ const BlogList = ({ isAdmin }) => {
   if (posts.length === 0) {
     return (<div>No blog posts found</div>)
   }
+  const renderBlogList = () => {
+    return posts.filter(post => {
+      return isAdmin || post.publish
+    }).map(post => {
+      return (
+        <Card 
+          key={post.id} 
+          title={post.title} 
+          onClick={() => history.push(`/blogs/${post.id}`)} 
+        >
+          {isAdmin ? (<div>
+            <button 
+              className="btn btn-danger btn-sm"
+              onClick={(e) => deleteBlog(e, post.id)}
+            >
+              Delete
+            </button>
+          </div>) : null}
+        </Card>
+      );
+    })
+  }
 
-  return posts.filter(post => {
-    return isAdmin || post.publish
-  }).map(post => {
-    return (
-      <Card 
-        key={post.id} 
-        title={post.title} 
-        onClick={() => history.push(`/blogs/${post.id}`)} 
-      >
-        {isAdmin ? (<div>
-          <button 
-            className="btn btn-danger btn-sm"
-            onClick={(e) => deleteBlog(e, post.id)}
-          >
-            Delete
-          </button>
-        </div>) : null}
-      </Card>
-    );
-  })
+  return (
+    <div>
+      {renderBlogList()}
+      <Pagination />
+    </div>
+  )
 };
 
 BlogList.propTypes = {

src/components/Pagination.js

@@ -0,0 +1,19 @@
+const Pagination = () => {
+  return (
+    <nav aria-label="Page navigation example">
+      <ul className="pagination justify-content-center">
+        <li className="page-item disabled">
+          <a className="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
+        </li>
+        <li className="page-item"><a className="page-link" href="#">1</a></li>
+        <li className="page-item"><a className="page-link" href="#">2</a></li>
+        <li className="page-item"><a className="page-link" href="#">3</a></li>
+        <li className="page-item">
+          <a className="page-link" href="#">Next</a>
+        </li>
+      </ul>
+    </nav>
+  )
+}
+
+export default Pagination;