سياق React (useContext)

import { createContext } from "react";

export const ThemeContext = createContext();

function App() {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Page />
    </ThemeContext.Provider>
  );
}

import { useContext } from "react";

function ThemeButton() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      الوضع الحالي: {theme}
    </button>
  );
}

const UserContext = createContext();

function App() {
  const [user, setUser] = useState({ name: "براء" });
  return (
    <UserContext.Provider value={user}>
      <Navbar />
    </UserContext.Provider>
  );
}

function Navbar() {
  const user = useContext(UserContext);
  return <p>أهلًا {user.name}</p>;
}

import { createContext, useContext, useState, ReactNode } from "react";
import { HttpClient, UserRepository, HttpUserRepository, ApiError, NetworkError } from "./lib/react-base-repository";

// Repository — الطبقة الوحيدة التي تتصل بالخادم
const http = new HttpClient("/api");
const authRepo: UserRepository = new HttpUserRepository(http);

// Service Interface
interface AuthContextType {
  user: UserDTO | null;
  login(email: string, password: string): Promise<void>;
  logout(): void;
}

const AuthContext = createContext<AuthContextType | null>(null);

// Provider — يستخدم Repository، لا يستدعي fetch مباشرة
function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<UserDTO | null>(null);

  async function login(email: string, password: string) {
    try {
      const loggedInUser = await authRepo.createUser({ name: email, email, isActive: true });
      setUser(loggedInUser);
    } catch (err) {
      if (err instanceof ApiError) throw new Error(err.message);
      if (err instanceof NetworkError) throw new Error("تعذّر الاتصال");
      throw err;
    }
  }

  function logout() { setUser(null); }

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

// Custom Hook — Service Layer (المكوّنات تستخدم هذا فقط)
function useAuth(): AuthContextType {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error("useAuth must be used within AuthProvider");
  return ctx;
}

// المكوّن — لا يعرف Repository أو HTTP
function LoginButton() {
  const { login } = useAuth();
  return <button onClick={() => login("a@b.com", "pw").catch(alert)}>دخول</button>;
}