74

Author: kossiecoder

db.json

@@ -888,13 +888,6 @@
       "publish": false,
       "createdAt": 1657240162434,
       "id": 127
-    },
-    {
-      "title": "f",
-      "body": "f",
-      "publish": false,
-      "createdAt": 1657240212897,
-      "id": 130
     }
   ]
 }

src/components/NavBar.js

@@ -1,6 +1,10 @@
+import { useDispatch, useSelector } from 'react-redux';
 import { Link, NavLink } from 'react-router-dom';
+import { login, logout } from '../store/authSlice'; 
 
 const NavBar = () => {
+  const isLoggedIn = useSelector(state => state.auth.isLoggedIn);
+  const dispatch = useDispatch();
   return (
     <nav className="navbar navbar-dark bg-dark">
         <div className="container">
@@ -11,6 +15,20 @@ const NavBar = () => {
             }}
             className="navbar-nav"
           >
+            <li className="nav-item me-2">
+              <button 
+                className="text-white btn btn-link text-decoration-none"
+                onClick={() => {
+                  if (isLoggedIn) {
+                    dispatch(logout());
+                  } else {
+                    dispatch(login());
+                  }
+                }}
+              >
+                {isLoggedIn ? 'Logout' : 'Login'}
+              </button>
+            </li>
             <li className="nav-item me-2">
               <NavLink 
                 activeClassName="active"

src/store/authSlice.js

@@ -0,0 +1,22 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  isLoggedIn: false
+};
+
+const authSlice = createSlice({
+  name: 'auth',
+  initialState,
+  reducers: {
+    login: (state) => {
+      state.isLoggedIn = true;
+    },
+    logout: (state) => {
+      state.isLoggedIn = false;
+    }
+  } 
+})
+
+export const { login, logout } = authSlice.actions;
+
+export default authSlice.reducer;

src/store/store.js

@@ -1,8 +1,10 @@
 import { configureStore } from '@reduxjs/toolkit'
 import toastReducer from './toastSlice'
+import authReducer from './authSlice'
 
 export const store = configureStore({
   reducer: {
-    toast: toastReducer
+    toast: toastReducer,
+    auth: authReducer
   },
 })