Create context state for login and logout

client/src/context/app/state.jsx

@@ -23,6 +23,7 @@ import {
   LOGIN_SUCCESS,
   LOGIN_FAIL,
   LOGOUT,
+  LOGIN,
 } from '../types';
 
 const AppState = (props) => {

client/src/context/auth-context/AuthContext.jsx

@@ -0,0 +1,28 @@
+import { createContext, useReducer } from "react";
+
+export const AuthContext = createContext();
+
+export const authReducer = (state, action) => {
+    switch (action.type) {
+        case "LOGIN":
+            return { user: action.payload };
+        case "LOGOUT":
+            return { user: null };
+        default:
+            return state;
+    }
+}
+
+export const AuthContextProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(AuthReducer, {
+    user: null
+  });
+
+  return (
+    <AuthContext.Provider
+      value={{...state, dispatch}}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}

client/src/hooks/useAuthContext.jsx

@@ -0,0 +1,11 @@
+import { AuthContext } from "../context/auth-context/AuthContext";
+import { useContext } from "react";
+
+export const useAuthContext = () => {
+    const context = useContext(AuthContext);
+
+    if (context === undefined) {
+        throw new Error("useAuthContext must be used within a AuthContextProvider");
+    }
+    return context;
+}

client/src/main.jsx

@@ -5,11 +5,14 @@ import theme from './theme';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import './index.css';
 import App from './App.jsx';
+import { AuthContextProvider } from './context/auth-context/AuthContext.js';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <ThemeProvider theme={theme}>
-      <App />
-    </ThemeProvider>
+    <AuthContextProvider>
+      <ThemeProvider theme={theme}>
+        <App />
+      </ThemeProvider>
+    </AuthContextProvider>
   </React.StrictMode>
 );