week-2 done

week-10/authSystem/solution/AuthSystem.jsx

@@ -1,13 +1,13 @@
-import React, { createContext, useState, useContext } from 'react';
-import Home from "./Home"
-import AppBar from './AppBar';
-import Login from './Login';
+import React, { createContext, useState, useContext } from "react";
+import Home from "./Home";
+import AppBar from "./AppBar";
+import Login from "./Login";
 
 export const AuthContext = createContext(undefined);
 
 export default function AuthSystem() {
   const [useContextApi, setUseContextApi] = useState(false);
-  const [username, setUsername] = useState('');
+  const [username, setUsername] = useState("");
   const [isLoggedIn, setIsLoggedIn] = useState(false);
 
   const login = (newUsername) => {
@@ -16,47 +16,45 @@ export default function AuthSystem() {
   };
 
   const logout = () => {
-    setUsername('');
+    setUsername("");
     setIsLoggedIn(false);
   };
 
-  const contextValue = useContextApi ? { username, isLoggedIn, login, logout } : undefined;
+  const contextValue = useContextApi
+    ? { username, isLoggedIn, login, logout }
+    : undefined;
 
   return (
     <AuthContext.Provider value={contextValue}>
-      <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
-        <AppBar
-          username={username}
-          isLoggedIn={isLoggedIn}
-          logout={logout}
-        />
-        <div style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'flex-end',
-          padding: '1rem',
-          backgroundColor: '#f0f0f0'
-        }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+      <div
+        style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}
+      >
+        <AppBar username={username} isLoggedIn={isLoggedIn} logout={logout} />
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-end",
+            padding: "1rem",
+            backgroundColor: "#f0f0f0",
+          }}
+        >
+          <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
             <input
               id="use-context-api"
               type="checkbox"
               checked={useContextApi}
               onChange={(e) => setUseContextApi(e.target.checked)}
             />
             <label htmlFor="use-context-api">
-              Use Context API: {useContextApi ? 'On' : 'Off'}
+              Use Context API: {useContextApi ? "On" : "Off"}
             </label>
           </div>
         </div>
-        <main style={{ flex: 1, padding: '1rem' }}>
-          {isLoggedIn ? (
-            <Home />
-          ) : (
-            <Login onLogin={login} />
-          )}
+        <main style={{ flex: 1, padding: "1rem" }}>
+          {isLoggedIn ? <Home /> : <Login onLogin={login} />}
         </main>
       </div>
     </AuthContext.Provider>
   );
-} 
+}

week-10/authSystem/solution/Home.jsx

@@ -1,13 +1,28 @@
 const Home = () => (
-  <div style={{ padding: '1rem' }}>
-    <h2 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '1rem' }}>Welcome to the Auth System Demo</h2>
-    <p>This demo showcases two approaches to managing authentication state in React:</p>
-    <ul style={{ listStyleType: 'disc', paddingLeft: '2rem', marginTop: '0.5rem' }}>
+  <div style={{ padding: "1rem" }}>
+    <h2
+      style={{ fontSize: "1.5rem", fontWeight: "bold", marginBottom: "1rem" }}
+    >
+      Welcome to the Auth System Demo
+    </h2>
+    <p>
+      This demo showcases two approaches to managing authentication state in
+      React:
+    </p>
+    <ul
+      style={{
+        listStyleType: "disc",
+        paddingLeft: "2rem",
+        marginTop: "0.5rem",
+      }}
+    >
       <li>State Lifting</li>
       <li>Context API</li>
     </ul>
-    <p style={{ marginTop: '0.5rem' }}>Use the toggle above to switch between the two approaches.</p>
+    <p style={{ marginTop: "0.5rem" }}>
+      Use the toggle above to switch between the two approaches.
+    </p>
   </div>
 );
 
-export default Home;
+export default Home;

week-10/authSystem/src/components/AppBar.jsx

@@ -1,9 +1,45 @@
-import React from 'react'
+import { AuthContext } from "./AuthSystem";
+import { useContext } from "react";
+
+const AppBar = ({ username: propUsername, isLoggedIn: propIsLoggedIn, logout: propLogout }) => {
+  const contextValue = useContext(AuthContext);
+
+  const displayUsername = contextValue?.username ?? propUsername;
+  const displayIsLoggedIn = contextValue?.isLoggedIn ?? propIsLoggedIn;
+  const handleLogout = contextValue?.logout ?? propLogout;
 
-const AppBar = () => {
   return (
-    <div>AppBar</div>
-  )
-}
+    <div style={{
+      backgroundColor: '#3f98b5',
+      color: 'white',
+      padding: '1rem',
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center'
+    }}>
+      <h1 style={{ fontSize: '1.25rem', fontWeight: 'bold' }}>Auth System Demo</h1>
+      {displayIsLoggedIn ? (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+          <span>Welcome, {displayUsername}!</span>
+          <button
+            onClick={handleLogout}
+            style={{
+              backgroundColor: 'white',
+              color: '#3f51b5',
+              border: 'none',
+              padding: '0.5rem 1rem',
+              borderRadius: '4px',
+              cursor: 'pointer'
+            }}
+          >
+            Logout
+          </button>
+        </div>
+      ) : (
+        <span>Not logged in</span>
+      )}
+    </div>
+  );
+};
 
-export default AppBar
+export default AppBar;

week-10/authSystem/src/components/AuthSystem.jsx

@@ -1,9 +1,60 @@
-import React from 'react'
+import React, { createContext, useState, useContext } from "react";
+import Home from "./Home";
+import AppBar from "./AppBar";
+import Login from "./Login";
+
+export const AuthContext = createContext(undefined);
+
+export default function AuthSystem() {
+  const [useContextApi, setUseContextApi] = useState(false);
+  const [username, setUsername] = useState("");
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  const login = (newUsername) => {
+    setUsername(newUsername);
+    setIsLoggedIn(true);
+  };
+
+  const logout = () => {
+    setUsername("");
+    setIsLoggedIn(false);
+  };
+
+  const contextValue = useContextApi
+    ? { username, isLoggedIn, login, logout }
+    : undefined;
 
-const AuthSystem = () => {
   return (
-    <div>AuthSystem</div>
-  )
+    <AuthContext.Provider value={contextValue}>
+      <div
+        style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}
+      >
+        <AppBar username={username} isLoggedIn={isLoggedIn} logout={logout} />
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-end",
+            padding: "1rem",
+            backgroundColor: "#f0f0f0",
+          }}
+        >
+          <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+            <input
+              id="use-context-api"
+              type="checkbox"
+              checked={useContextApi}
+              onChange={(e) => setUseContextApi(e.target.checked)}
+            />
+            <label htmlFor="use-context-api">
+              Use Context API: {useContextApi ? "On" : "Off"}
+            </label>
+          </div>
+        </div>
+        <main style={{ flex: 1, padding: "1rem" }}>
+          {isLoggedIn ? <Home /> : <Login onLogin={login} />}
+        </main>
+      </div>
+    </AuthContext.Provider>
+  );
 }
-
-export default AuthSystem

week-10/authSystem/src/components/Home.jsx

@@ -1,9 +1,28 @@
-import React from 'react'
+const Home = () => (
+  <div style={{ padding: "1rem" }}>
+    <h2
+      style={{ fontSize: "1.5rem", fontWeight: "bold", marginBottom: "1rem" }}
+    >
+      Welcome to the Auth System Demo
+    </h2>
+    <p>
+      This demo showcases two approaches to managing authentication state in
+      React:
+    </p>
+    <ul
+      style={{
+        listStyleType: "disc",
+        paddingLeft: "2rem",
+        marginTop: "0.5rem",
+      }}
+    >
+      <li>State Lifting</li>
+      <li>Context API</li>
+    </ul>
+    <p style={{ marginTop: "0.5rem" }}>
+      Use the toggle above to switch between the two approaches.
+    </p>
+  </div>
+);
 
-const Home = () => {
-  return (
-    <div>Home</div>
-  )
-}
-
-export default Home
+export default Home;

week-10/authSystem/src/components/Login.jsx

@@ -1,9 +1,50 @@
-import React from 'react'
+import React, { useState, useContext } from 'react';
+import { AuthContext } from './AuthSystem';
+
+const Login = ({ onLogin: propOnLogin }) => {
+  const [username, setUsername] = useState('');
+  const contextValue = useContext(AuthContext);
+
+  const handleLogin = () => {
+    if (contextValue?.login) {
+      contextValue.login(username);
+    } else if (propOnLogin) {
+      propOnLogin(username);
+    }
+    setUsername('');
+  };
 
-const Login = () => {
   return (
-    <div>Login</div>
-  )
-}
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: '300px', margin: '0 auto' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+        <label htmlFor="username" style={{ fontWeight: 'bold' }}>Username</label>
+        <input
+          id="username"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          placeholder="Enter your username"
+          style={{
+            padding: '0.5rem',
+            borderRadius: '4px',
+            border: '1px solid #ccc'
+          }}
+        />
+      </div>
+      <button
+        onClick={handleLogin}
+        style={{
+          backgroundColor: '#3f98b5',
+          color: 'white',
+          border: 'none',
+          padding: '0.5rem 1rem',
+          borderRadius: '4px',
+          cursor: 'pointer'
+        }}
+      >
+        Login
+      </button>
+    </div>
+  );
+};
 
-export default Login
+export default Login;

week-10/userApi/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^1.7.7",
+    "node": "^20.19.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },