48

Author: kossiecoder

src/components/BlogList.js

@@ -4,8 +4,9 @@ import Card from '../components/Card';
 import { Link } from 'react-router-dom'; 
 import { useHistory } from 'react-router';
 import LoadingSpinner from '../components/LoadingSpinner';
+import { bool } from 'prop-types';
 
-const BlogList = () => {
+const BlogList = ({ isAdmin }) => {
   const history = useHistory();
   const [posts, setPosts] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -40,25 +41,33 @@ const BlogList = () => {
   }
 
   return posts.filter(post => {
-    return post.publish
+    return isAdmin || post.publish
   }).map(post => {
     return (
       <Card 
         key={post.id} 
         title={post.title} 
         onClick={() => history.push(`/blogs/${post.id}`)} 
       >
-        <div>
+        {isAdmin ? (<div>
           <button 
             className="btn btn-danger btn-sm"
             onClick={(e) => deleteBlog(e, post.id)}
           >
             Delete
           </button>
-        </div>
+        </div>) : null}
       </Card>
     );
   })
 };
 
+BlogList.propTypes = {
+  isAdmin: bool
+};
+
+BlogList.defaultProps = {
+  isAdmin: false
+}
+
 export default BlogList;

src/components/NavBar.js

@@ -5,7 +5,22 @@ const NavBar = () => {
     <nav className="navbar navbar-dark bg-dark">
         <div className="container">
           <Link className="navbar-brand" to="/">Home</Link>
-          <ul className="navbar-nav">
+          <ul 
+            style={{
+              flexDirection: 'row'
+            }}
+            className="navbar-nav"
+          >
+            <li className="nav-item me-2">
+              <NavLink 
+                activeClassName="active"
+                className="nav-link" 
+                aria-current="page" 
+                to="/admin"
+              >
+                Admin
+              </NavLink>
+            </li>
             <li className="nav-item">
               <NavLink 
                 activeClassName="active"

src/pages/AdminPage.js

@@ -12,7 +12,7 @@ const AdminPage = () => {
           </Link>
         </div>
       </div>
-      <BlogList />
+      <BlogList isAdmin={true} />
     </div>
   );
 };