useFetch

"use client";
import { cn } from "cretex";
import { Code } from "@/ui/code";
import { Stack } from "@/ui/stack";
import { Button } from "@/ui/button";
import { useFetch } from "@/hooks/use-fetch";

type Data = {
  userId: number;
  id: number;
  title: string;
};

export function UseFetchDemo() {
  const { data, loading, error, refetch, abort } = useFetch<Data[]>("https://jsonplaceholder.typicode.com/albums/");

  const uniqueUserData = data
    ? Object.values(
        data.reduce(
          (acc, data) => {
            if (!acc[data.userId]) {
              acc[data.userId] = data;
            }
            return acc;
          },
          {} as Record<number, Data>
        )
      )
    : null;

  if (error) return <p className="text-sm font-medium text-red-600">{error.message}</p>;
  return (
    <>
      <Stack className="relative size-full overflow-y-auto scrollbar">
        <Code code={uniqueUserData ? JSON.stringify(uniqueUserData, null, 2) : "Fetching"} className="h-max min-h-max w-full" />
        <Code label="data type:" samp={uniqueUserData} className="h-max w-full" />
      </Stack>

      <Stack align="end" className="absolute right-3 top-0">
        <span className={cn("size-4 rounded-full", !uniqueUserData || loading ? "bg-destructive" : "bg-conservative")} />
        <Button onClick={refetch} color="blue" variant="outline" className="w-24">
          Refetch
        </Button>
        <Button onClick={abort} color="red" variant="outline" className="w-24">
          Abort
        </Button>
      </Stack>
    </>
  );
}