UseAxiosDemo

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  AxiosProvider,
22  useAxiosContext,
23  useAxiosGet,
24  useAxiosInstance,
25  useAxiosPost,
26  type AxiosConfig,
27} from '@/hooks/guarahooks/use-axios';
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, string | number | boolean | null> | null;
36  origin: string;
37  url: string;
38}
39 
40interface Post {
41  id: number;
42  title: string;
43  body: string;
44  userId: number;
45}
46 
47interface User {
48  id: number;
49  name: string;
50  email: string;
51  username: string;
52}
53 
54function GetDemo() {
55  const { data, error, loading, refetch, abort, aborted } =
56    useAxiosGet<HttpBinResponse>('/delay/5');
57 
58  return (
59    <Card>
60      <CardHeader>
61        <CardTitle>GET Request</CardTitle>
62        <CardDescription>
63          Fetches data with a 5-second delay to test abort functionality
64        </CardDescription>
65      </CardHeader>
66      <CardContent className="space-y-4">
67        <div className="flex items-center gap-2">
68          <Badge variant={loading ? 'default' : 'secondary'}>
69            {loading ? 'Loading...' : 'Idle'}
70          </Badge>
71          {aborted && <Badge variant="destructive">Aborted</Badge>}
72        </div>
73 
74        {error && <p className="text-destructive">Error: {error.message}</p>}
75 
76        {!loading && !aborted && data && (
77          <div>
78            <Label className="text-sm font-medium">Response:</Label>
79            <pre className="mt-2 p-3 rounded-md bg-muted text-sm overflow-auto max-h-32">
80              {JSON.stringify(data, null, 2)}
81            </pre>
82          </div>
83        )}
84      </CardContent>
85      <CardFooter className="flex justify-end gap-2">
86        <Button variant="outline" onClick={abort} disabled={!loading}>
87          Abort
88        </Button>
89        <Button onClick={refetch} disabled={loading}>
90          Refetch
91        </Button>
92      </CardFooter>
93    </Card>
94  );
95}
96 
97function PostDemo() {
98// … truncated