الخطّافات المخصّصة (Custom Hooks)

import { useState } from "react";

function useToggle(initial = false) {
  const [value, setValue] = useState(initial);
  const toggle = () => setValue((v) => !v);
  return [value, toggle];
}

// الاستخدام:
function Modal() {
  const [open, toggleOpen] = useToggle();
  return (
    <>
      <button onClick={toggleOpen}>{open ? "إغلاق" : "فتح"}</button>
      {open && <div>المحتوى</div>}
    </>
  );
}

function useLocalStorage(key, initial) {
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initial;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

// الاستخدام:
const [name, setName] = useLocalStorage("name", "");

import { useState, useEffect, useCallback } from "react";
import { ApiError, NetworkError, UserDTO, HttpClient, HttpUserRepository } from "./lib/react-base-repository";

// حالة عامة لجميع الخدمات
type AsyncState<T> =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: T }
  | { status: "error"; error: ApiError | NetworkError | Error };

// Service Hook العام — يستقبل Repository method وليس fetch
function useAsyncService<T>(
  fetcher: () => Promise<T>,
  deps: unknown[] = [],
): AsyncState<T> & { refetch: () => void } {
  const [state, setState] = useState<AsyncState<T>>({ status: "idle" });

  const execute = useCallback(() => {
    setState({ status: "loading" });
    fetcher()
      .then((data) => setState({ status: "success", data }))
      .catch((error) => setState({ status: "error", error }))
      .finally(() => {});
  }, deps);

  useEffect(() => { execute(); }, [execute]);

  return { ...state, refetch: execute };
}

// الاستخدام مع Repository — لا fetch مباشراً
const http = new HttpClient("/api");
const userRepo = new HttpUserRepository(http);

function Users() {
  const { status, data: users, error, refetch } = useAsyncService<UserDTO[]>(
    () => userRepo.getUsers(),
    [],
  );

  if (status === "loading") return <p>تحميل...</p>;
  if (status === "error") return <p role="alert">{error.message}</p>;
  return <ul>{data.map((u) => <li key={u.id}>{u.name}</li>)}</ul>;
}