Passing Data with Context

// Create Auth Context
const AuthContext = React.createContext();

// Auth Provider with state and functions
function AuthProvider({ children }) {
  const [user, setUser] = React.useState(null);
  const [isLoading, setIsLoading] = React.useState(false);

  // Login function
  const login = (username, password) => {
    setIsLoading(true);
    // Simulate API call
    setTimeout(() => {
      setUser({
        id: 1,
        username,
        email: `${username}@example.com`,
        role: 'user'
      });
      setIsLoading(false);
    }, 1000);
  };

  // Logout function
  const logout = () => {
    setUser(null);
  };

  // Context value: object with state and functions
  const value = {
    user,
    isLoading,
    login,
    logout,
    isAuthenticated: !!user
  };

  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  );
}

// Components consuming context
function NavBar() {
  const { user, logout, isAuthenticated } = React.useContext(AuthContext);

  return (
    <nav className="navbar">
      <h2>My App</h2>
      {isAuthenticated ? (
        <div className="user-section">
          <span className="username">👤 {user.username}</span>
          <button onClick={logout} className="logout-btn">
            Logout
          </button>
        </div>
      ) : (
        <span className="guest">Guest User</span>
      )}
    </nav>
  );
}

function Dashboard() {
  const { user, isAuthenticated } = React.useContext(AuthContext);

  if (!isAuthenticated) {
    return (
      <div className="dashboard">
        <div className="message">
          <h3>Welcome!</h3>
          <p>Please login to access the dashboard</p>
        </div>
      </div>
    );
  }

  return (
    <div className="dashboard">
      <div className="user-card">
        <h3>Dashboard</h3>
        <div className="user-details">
          <p><strong>ID:</strong> {user.id}</p>
          <p><strong>Username:</strong> {user.username}</p>
          <p><strong>Email:</strong> {user.email}</p>
          <p><strong>Role:</strong> {user.role}</p>
        </div>
      </div>
    </div>
  );
}

function LoginForm() {
  const { login, isLoading, isAuthenticated } = React.useContext(AuthContext);
  const [username, setUsername] = React.useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (username.trim()) {
      login(username, 'password123');
    }
  };

  if (isAuthenticated) return null;

  return (
    <div className="login-form">
      <h3>Login</h3>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          placeholder="Enter username"
          disabled={isLoading}
        />
        <button type="submit" disabled={isLoading || !username.trim()}>
          {isLoading ? 'Logging in...' : 'Login'}
        </button>
      </form>
    </div>
  );
}

// Root App
function App() {
  return (
    <AuthProvider>
      <div className="app">
        <NavBar />
        <Dashboard />
        <LoginForm />
      </div>
    </AuthProvider>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);