Lesson 09 Advanced state, useReducer, useContext continued

src/App.jsx

@@ -1,23 +1,16 @@
-import { useState } from "react";
-
 import TodosPage from "./features/Todos/TodosPage.jsx";
 import Header from "./shared/Header.jsx";
 import Logon from "./features/Logon.jsx";
-
+import { useAuth } from "./contexts/AuthContext.jsx";
 import "./App.css";
 
 export default function App() {
-  const [email, setEmail] = useState("");
-  const [token, setToken] = useState("");
+  const { isAuthenticated } = useAuth();
 
   return (
     <div>
-      <Header token={token} onSetToken={setToken} onSetEmail={setEmail} />
-      {token ? (
-        <TodosPage token={token} />
-      ) : (
-        <Logon onSetEmail={setEmail} onSetToken={setToken} />
-      )}
+      <Header />
+      {isAuthenticated ? <TodosPage /> : <Logon />}
     </div>
   );
 }

src/contexts/AuthContext.jsx

@@ -0,0 +1,95 @@
+import { createContext, useContext, useState } from "react";
+
+const AuthContext = createContext();
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+
+  if (!context) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+}
+
+export function AuthProvider({ children }) {
+  const [email, setEmail] = useState("");
+  const [token, setToken] = useState("");
+
+  const login = async (userEmail, password) => {
+    try {
+      const options = {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email: userEmail, password }),
+        credentials: "include",
+      };
+
+      const res = await fetch("/api/users/logon", options);
+      const data = await res.json();
+
+      if (res.status === 200 && data.name && data.csrfToken) {
+        setEmail(data.name);
+        setToken(data.csrfToken);
+        return { success: true };
+      } else {
+        return {
+          success: false,
+          error: `Authentication failed: ${data?.message}`,
+        };
+      }
+    } catch {
+      return {
+        success: false,
+        error: "Network error during login",
+      };
+    }
+  };
+
+  const logout = async () => {
+    try {
+      if (!token) {
+        setEmail("");
+        setToken("");
+        return {
+          success: true,
+        };
+      }
+      const options = {
+        method: "POST",
+        headers: {
+          "X-CSRF-TOKEN": token,
+        },
+        credentials: "include",
+      };
+      const res = await fetch("/api/users/logoff", options);
+      setEmail("");
+      setToken("");
+      if (res.ok) {
+        return {
+          success: true,
+        };
+      }
+      return {
+        success: false,
+        error: "Logout failed",
+      };
+    } catch {
+      setEmail("");
+      setToken("");
+      return {
+        success: false,
+        error: "Network error during logout",
+      };
+    }
+  };
+
+  const value = {
+    email: email,
+    token: token,
+    isAuthenticated: !!token,
+    login: login,
+    logout: logout,
+  };
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}

src/features/Logoff.jsx

@@ -0,0 +1,23 @@
+import { useState } from "react";
+import { useAuth } from "../contexts/AuthContext.jsx";
+
+export default function Logoff() {
+  const { logout } = useAuth();
+  const [error, setError] = useState("");
+
+  async function handleLogoff() {
+    const result = await logout();
+    if (!result.success) {
+      setError(result.error);
+    }
+  }
+
+  return (
+    <>
+      {error && <p>{error}</p>}
+      <button type="button" onClick={handleLogoff}>
+        Log Off
+      </button>
+    </>
+  );
+}

src/features/Logon.jsx

@@ -1,28 +1,20 @@
 import { useState } from "react";
+import { useAuth } from "../contexts/AuthContext.jsx";
 
-export default function Logon({ onSetEmail, onSetToken }) {
+export default function Logon() {
+  const { login } = useAuth();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [authError, setAuthError] = useState("");
   const [isLoggingOn, setIsLoggingOn] = useState(false);
-
   async function handleSubmit(event) {
     event.preventDefault();
     setIsLoggingOn(true);
 
     try {
-      const response = await fetch("/api/users/logon", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        credentials: "include",
-        body: JSON.stringify({ email, password }),
-      });
-      const data = await response.json();
-      if (response.status === 200 && data.name && data.csrfToken) {
-        onSetEmail(data.name);
-        onSetToken(data.csrfToken);
-      } else {
-        setAuthError(`Authentication failed: ${data?.message}`);
+      const result = await login(email, password);
+      if (!result.success) {
+        setAuthError(result.error);
       }
     } catch (error) {
       setAuthError(`Error: ${error.name} | ${error.message}`);