Render props pattern

import { useState, useEffect, useCallback, ReactNode } from 'react';

// State types for different fetch phases
type LoadingState = {
  status: 'loading';
  data: null;
  error: null;
};

type ErrorState = {
  status: 'error';
  data: null;
  error: Error;
};

type SuccessState<T> = {
  status: 'success';
  data: T;
  error: null;
};

type IdleState = {
  status: 'idle';
  data: null;
  error: null;
};

// Union type for all possible states
type FetchState<T> = IdleState | LoadingState | ErrorState | SuccessState<T>;

// Render props payload with refetch capability
interface RenderProps<T> extends FetchState<T> {
  refetch: () => void;
  isLoading: boolean;
  isError: boolean;
  isSuccess: boolean;
}

// Component props
interface DataFetcherProps<T> {
  url: string;
  options?: RequestInit;
  children: (props: RenderProps<T>) => ReactNode;
  initialData?: T;
  enabled?: boolean;
  onSuccess?: (data: T) => void;
  onError?: (error: Error) => void;
}

// The DataFetcher component using render props pattern
function DataFetcher<T>({
  url,
  options,
  children,
  initialData,
  enabled = true,
  onSuccess,
  onError,
}: DataFetcherProps<T>): ReactNode {
  const [state, setState] = useState<FetchState<T>>(() => {
    if (initialData !== undefined) {
      return { status: 'success', data: initialData, error: null };
    }
    return { status: 'idle', data: null, error: null };
  });

  const fetchData = useCallback(async () => {
    setState({ status: 'loading', data: null, error: null });

    try {
      const response = await fetch(url, options);

      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }

      const data: T = await response.json();
      setState({ status: 'success', data, error: null });
      onSuccess?.(data);
    } catch (err) {
      const error = err instanceof Error ? err : new Error(String(err));
      setState({ status: 'error', data: null, error });
      onError?.(error);
    }
  }, [url, options, onSuccess, onError]);

  useEffect(() => {
    if (enabled) {
      fetchData();
    }
  }, [enabled, fetchData]);

  const renderProps: RenderProps<T> = {
    ...state,
    refetch: fetchData,
    isLoading: state.status === 'loading',
    isError: state.status === 'error',
    isSuccess: state.status === 'success',
  };

  return children(renderProps);
}

// Example usage with typed data
interface User {
  id: number;
  name: string;
  email: string;
}

interface Post {
  id: number;
  title: string;
  body: string;
  userId: number;
}

// User List Component using DataFetcher
function UserList(): ReactNode {
  return (
    <DataFetcher<User[]>
      url="https://jsonplaceholder.typicode.com/users"
      onSuccess={(users) => console.log(`Fetched ${users.length} users`)}
      onError={(error) => console.error('Failed to fetch users:', error)}
    >
      {({ data, isLoading, isError, error, refetch }) => {
        if (isLoading) {
          return <div className="loading">Loading users...</div>;
        }

        if (isError) {
          return (
            <div className="error">
              <p>Error: {error.message}</p>
              <button onClick={refetch}>Retry</button>
            </div>
          );
        }

        if (!data) {
          return null;
        }

        return (
          <div>
            <button onClick={refetch}>Refresh</button>
            <ul>
              {data.map((user) => (
                <li key={user.id}>
                  {user.name} - {user.email}
                </li>
              ))}
            </ul>
          </div>
        );
      }}
    </DataFetcher>
  );
}

// Nested DataFetchers example - fetch user then their posts
function UserWithPosts({ userId }: { userId: number }): ReactNode {
  return (
    <DataFetcher<User>
      url={`https://jsonplaceholder.typicode.com/users/${userId}`}
    >
      {({ data: user, isLoading: userLoading, isError: userError, error: userErr }) => {
        if (userLoading) return <div>Loading user...</div>;
        if (userError) return <div>User error: {userErr.message}</div>;
        if (!user) return null;

        return (
          <div>
            <h2>{user.name}</h2>
            <DataFetcher<Post[]>
              url={`https://jsonplaceholder.typicode.com/posts?userId=${userId}`}
            >
              {({ data: posts, isLoading, isError, error }) => {
                if (isLoading) return <div>Loading posts...</div>;
                if (isError) return <div>Posts error: {error.message}</div>;
                if (!posts) return null;

                return (
                  <ul>
                    {posts.map((post) => (
                      <li key={post.id}>{post.title}</li>
                    ))}
                  </ul>
                );
              }}
            </DataFetcher>
          </div>
        );
      }}
    </DataFetcher>
  );
}

// Conditional fetching example
function ConditionalFetch({ shouldFetch }: { shouldFetch: boolean }): ReactNode {
  return (
    <DataFetcher<User[]>
      url="https://jsonplaceholder.typicode.com/users"
      enabled={shouldFetch}
    >
      {({ data, status, refetch }) => (
        <div>
          <p>Status: {status}</p>
          {data && <p>Loaded {data.length} users</p>}
          <button onClick={refetch}>Manual Fetch</button>
        </div>
      )}
    </DataFetcher>
  );
}

export { DataFetcher, UserList, UserWithPosts, ConditionalFetch };
export type { FetchState, RenderProps, DataFetcherProps };