UseFetchDemo

1'use client';
2 
3import React, { useState } from 'react';
4 
5import { Badge } from '@/components/ui/badge';
6import { Button } from '@/components/ui/button';
7import {
8  Card,
9  CardContent,
10  CardDescription,
11  CardFooter,
12  CardHeader,
13  CardTitle,
14} from '@/components/ui/card';
15import { Input } from '@/components/ui/input';
16import { Label } from '@/components/ui/label';
17import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
18 
19import {
20  FetchProvider,
21  useFetch,
22  useFetchContext,
23  type FetchConfig,
24} from '@/hooks/guarahooks/use-fetch';
25 
26interface HttpBinResponse {
27  args: Record<string, string>;
28  data: string;
29  files: Record<string, string>;
30  form: Record<string, string>;
31  headers: Record<string, string>;
32  json: Record<string, string | number | boolean | null> | null;
33  origin: string;
34  url: string;
35}
36 
37interface PostData {
38  title: string;
39  body: string;
40  userId: number;
41}
42 
43interface Post extends PostData {
44  id: number;
45}
46 
47// Demo component that shows GET request
48function GetDemo() {
49  const { data, error, loading, refetch, abort, aborted } =
50    useFetch<HttpBinResponse>('/delay/3');
51 
52  return (
53    <Card>
54      <CardHeader>
55        <CardTitle>GET Request</CardTitle>
56        <CardDescription>
57          Fetches data with a 3-second delay to test abort functionality
58        </CardDescription>
59      </CardHeader>
60      <CardContent className="space-y-4">
61        <div className="flex items-center gap-2">
62          <Badge variant={loading ? 'default' : 'secondary'}>
63            {loading ? 'Loading...' : 'Idle'}
64          </Badge>
65          {aborted && <Badge variant="destructive">Aborted</Badge>}
66        </div>
67 
68        {error && <p className="text-destructive">Error: {error.message}</p>}
69 
70        {!loading && !aborted && data && (
71          <div>
72            <Label className="text-sm font-medium">Response:</Label>
73            <pre className="mt-2 p-3 rounded-md bg-muted text-sm overflow-auto max-h-32">
74              {JSON.stringify(data, null, 2)}
75            </pre>
76          </div>
77        )}
78      </CardContent>
79      <CardFooter className="flex justify-end gap-2">
80        <Button variant="outline" onClick={abort} disabled={!loading}>
81          Abort
82        </Button>
83        <Button onClick={refetch} disabled={loading}>
84          Refetch
85        </Button>
86      </CardFooter>
87    </Card>
88  );
89}
90 
91// Demo component that shows POST request
92function PostDemo() {
93  const [title, setTitle] = useState('Test Post');
94// … truncated