جلب البيانات في React

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

// 1. Repository — الطبقة الوحيدة التي تعرف fetch
// لا يُسمح باستدعاء fetch/http مباشرة من المكوّنات
const http = new HttpClient("https://api.example.com");
const userRepo: UserRepository = new HttpUserRepository(http);

// 2. Service Hook — يغلّف Repository ويعرض حالة المكوّن
function useUsers(): AsyncState<UserDTO[]> & { refetch: () => void } {
  const result = useAsyncService(() => userRepo.getUsers());
  useEffect(() => { result.refetch(); }, [result.refetch]);
  return result;
}

// 3. المكوّن — لا يعرف fetch ولا axios ولا Repository
// يتعامل فقط مع hooks و domain exceptions
function Users() {
  const { status, data: users, error, refetch } = useUsers();

  if (status === 'loading') return <p>جارٍ التحميل...</p>;

  if (status === 'error') {
    const message = error instanceof ApiError
      ? error.message
      : error instanceof NetworkError
        ? 'تعذّر الاتصال — تحقق من اتصالك بالإنترنت'
        : 'حدث خطأ غير متوقع';
    return (
      <div role="alert">
        <p>خطأ: {message}</p>
        <button onClick={refetch}>إعادة المحاولة</button>
      </div>
    );
  }

  return (
    <ul>
      {users.map((u) => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}

import { HttpClient, ApiError, NetworkError } from "./lib/react-base-repository";

// ❌ قبل Repository — fetch مباشرة في المكوّن
// ✅ بعد Repository — المكوّن يستخدم hook فقط
function useUsers_V2(): AsyncState<UserDTO[]> & { refetch: () => void } {
  const result = useAsyncService(async () => {
    const response = await fetch("/api/users");
    if (!response.ok) throw ApiError.fromResponse(response);
    return response.json();
  });
  useEffect(() => { result.refetch(); }, [result.refetch]);
  return result;
}

import { useAsyncService } from "./lib/react-base-repository";

// عند تغيّر userId، إعادة جلب البيانات عبر Repository
function useUser(userId: string): AsyncState<UserDTO> & { refetch: () => void } {
  const result = useAsyncService(() => userRepo.getUser(userId));
  useEffect(() => { result.refetch(); }, [userId, result.refetch]);
  return result;
}

import { useAsyncService } from "./lib/react-base-repository";

// useAsyncService يعالج cleanup تلقائياً — لا حاجة لـ active flag
function useSafeData(): AsyncState<DataDTO> & { refetch: () => void } {
  const result = useAsyncService(() => http.get<DataDTO>("/data"));
  useEffect(() => { result.refetch(); }, [result.refetch]);
  return result;
}