feat: Implement User Session Persistence (#19)

* feat: Create fetchCurrentUser reducer

* chore: Remove imports not used

* feat: Update root app to fetch state

frontend/src/App.tsx

@@ -1,4 +1,9 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { AppDispatch } from './app/store';
+import { fetchCurrentUser, fetchUsers } from './features/usersSlice';
+import { fetchPolls } from './features/pollSlice';
+import { getToken } from './server/api';
 import { Route, Routes } from 'react-router-dom';
 import ProtectedRoute from './ProtectedRoute';
 import Navbar from './components/Navbar';
@@ -11,6 +16,18 @@ import PollDetails from './components/PollDetails';
 import NotFoundPage from './components/PageNotFound';
 
 const App: React.FC = () => {
+  const dispatch: AppDispatch = useDispatch();
+
+  useEffect(() => {
+    const token = getToken();
+    if (token) {
+      dispatch(fetchCurrentUser(token));
+    }
+    dispatch(fetchUsers());
+    dispatch(fetchPolls());
+  }, [dispatch]);
+
+
   return (
     <div className="app">
       <Navbar />

frontend/src/components/Navbar.tsx

@@ -11,7 +11,6 @@ import {
   IconButton,
   Menu,
   MenuItem,
-  Typography,
 } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
 

frontend/src/features/usersSlice.ts

@@ -39,6 +39,22 @@ export const initialState: UsersState = {
   error: undefined,
 };
 
+export const fetchCurrentUser = createAsyncThunk<User, string, { rejectValue: string }>('users/fetchCurrentUser', async (token, { rejectWithValue }) => {
+  try {
+    if (!token) {
+      return rejectWithValue('No token provided');
+    }
+    const decoded = jwtDecode<JWTPayload>(token);
+    if (!decoded || !decoded.user) {
+      return rejectWithValue('Failed to decode token');
+    }
+    return decoded.user;
+  } catch (error) {
+    console.error('Failed to fetch polls:', error);
+    throw error;
+  }
+});
+
 // Asynchronous thunk for fetching users
 export const fetchUsers = createAsyncThunk<User[], void, { state: RootState }>(
   'user/fetchUsers',
@@ -157,6 +173,11 @@ export const usersSlice = createSlice({
         state.currentUser = null;
         state.status = 'failed';
         state.error = action.payload as string;
+      })
+      .addCase(fetchCurrentUser.fulfilled, (state, action) => {
+        state.currentUser = action.payload;
+        state.status = 'succeeded';
+        state.error = undefined;
       });
   },
 });

frontend/src/server/api.ts

@@ -20,7 +20,7 @@ function storeToken(token: string): void {
 }
 
 // Function to get the JWT token from local storage
-function getToken(): string | null {
+export function getToken(): string | null {
   return localStorage.getItem('jwtToken');
 }