80

Author: kossiecoder

src/App.js

@@ -7,12 +7,28 @@ import NavBar from './components/NavBar';
 import routes from './routes';
 import Toast from './components/Toast';
 import useToast from './hooks/toast';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import ProtectedRoute from './ProtectedRoute';
+import { useEffect, useState } from 'react';
+import { login } from './store/authSlice';
+import LoadingSpinner from './components/LoadingSpinner';
 
 function App() {
   const toasts = useSelector(state => state.toast.toasts);
   const { deleteToast } = useToast();
+  const [loading, setLoading] = useState(true);
+  const dispatch = useDispatch();
+  useEffect(() => {
+    if (localStorage.getItem('isLoggedIn')) {
+      dispatch(login());
+    }
+    setLoading(false);
+  }, []);
+
+  if (loading) {
+    return <LoadingSpinner />
+  }
+
   return (
     <Router>
       <NavBar />

src/store/authSlice.js

@@ -9,9 +9,11 @@ const authSlice = createSlice({
   initialState,
   reducers: {
     login: (state) => {
+      localStorage.setItem('isLoggedIn', 'yes');
       state.isLoggedIn = true;
     },
     logout: (state) => {
+      localStorage.removeItem('isLoggedIn');
       state.isLoggedIn = false;
     }
   }