75

Author: kossiecoder

db.json

@@ -878,14 +878,14 @@
     {
       "title": "2",
       "body": "2",
-      "publish": false,
+      "publish": true,
       "createdAt": 1657240147188,
       "id": 126
     },
     {
       "title": "2",
       "body": "2",
-      "publish": false,
+      "publish": true,
       "createdAt": 1657240162434,
       "id": 127
     }

src/App.js

@@ -8,6 +8,7 @@ import routes from './routes';
 import Toast from './components/Toast';
 import useToast from './hooks/toast';
 import { useSelector } from 'react-redux';
+import ProtectedRoute from './ProtectedRoute';
 
 function App() {
   const toasts = useSelector(state => state.toast.toasts);
@@ -22,6 +23,13 @@ function App() {
       <div className="container mt-3">
         <Switch>
           {routes.map((route) => {
+            if (route.auth) {
+              return <ProtectedRoute
+                path={route.path} 
+                component={route.component}
+                key={route.path} 
+              />
+            }
             return <Route 
               key={route.path} 
               exact 

src/ProtectedRoute.jsx

@@ -0,0 +1,20 @@
+import { useSelector } from "react-redux";
+import { Redirect, Route } from "react-router-dom";
+
+const ProtectedRoute = (
+  {component, path, key}
+) => {
+  const isLoggedIn = useSelector(state => state.auth.isLoggedIn);
+  if (!isLoggedIn) {
+    return <Redirect to="/" />
+  }
+
+  return <Route 
+    component={component} 
+    path={path} 
+    key={key}
+    exact
+  />;
+};
+
+export default ProtectedRoute;

src/components/NavBar.js

@@ -29,7 +29,7 @@ const NavBar = () => {
                 {isLoggedIn ? 'Logout' : 'Login'}
               </button>
             </li>
-            <li className="nav-item me-2">
+            {isLoggedIn ? <li className="nav-item me-2">
               <NavLink 
                 activeClassName="active"
                 className="nav-link" 
@@ -38,7 +38,7 @@ const NavBar = () => {
               >
                 Admin
               </NavLink>
-            </li>
+            </li> : null}
             <li className="nav-item">
               <NavLink 
                 activeClassName="active"

src/pages/ShowPage.js

@@ -3,11 +3,13 @@ import axios from 'axios';
 import { useEffect, useState } from "react";
 import LoadingSpinner from "../components/LoadingSpinner";
 import { Link } from "react-router-dom";
+import { useSelector } from "react-redux";
 
 const ShowPage = () => {
   const { id } = useParams();
   const [post, setPost] = useState(null);
   const [loading, setLoading] = useState(true);
+  const isLoggedIn = useSelector(state => state.auth.isLoggedIn);
 
   const getPost = (id) => {
     axios.get(`http://localhost:3001/posts/${id}`).then((res) => {
@@ -32,14 +34,14 @@ const ShowPage = () => {
     <div>
       <div className="d-flex">
         <h1 className="flex-grow-1">{post.title}</h1>
-        <div>
+        {isLoggedIn && <div>
           <Link 
             className="btn btn-primary"
             to={`/blogs/${id}/edit`}
           >
             Edit
           </Link>
-        </div>
+        </div>}
       </div>
       <small className="text-muted">
         Created At: {printDate(post.createdAt)}

src/routes.js

@@ -16,15 +16,18 @@ const routes = [
   },
   {
     path: '/admin',
-    component: AdminPage
+    component: AdminPage,
+    auth: true
   },
   {
     path: '/blogs/create',
-    component: CreatePage
+    component: CreatePage,
+    auth: true
   },
   {
     path: '/blogs/:id/edit',
-    component: EditPage
+    component: EditPage,
+    auth: true
   },
   {
     path: '/blogs/:id',