UseKyDemo

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