UseAbortControllerDemo

1'use client';
2 
3import React, { useState } from 'react';
4 
5import { DownloadIcon, Loader2Icon, RefreshCwIcon, XIcon } from 'lucide-react';
6 
7import { Badge } from '@/components/ui/badge';
8import { Button } from '@/components/ui/button';
9import {
10  Card,
11  CardContent,
12  CardDescription,
13  CardHeader,
14  CardTitle,
15} from '@/components/ui/card';
16 
17import { useAbortController } from '@/hooks/guarahooks/use-abort-controller';
18 
19interface Post {
20  userId: number;
21  id: number;
22  title: string;
23  body: string;
24}
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 
37export default function UseAbortControllerDemo() {
38  const [fetchStatus, setFetchStatus] = useState<
39    'idle' | 'loading' | 'success' | 'error' | 'aborted'
40  >('idle');
41  const [data, setData] = useState<Post | HttpBinResponse | null>(null);
42  const [error, setError] = useState<string | null>(null);
43 
44  const {
45    signal,
46    abort,
47    reset,
48    fetch: abortableFetch,
49    aborted,
50  } = useAbortController();
51 
52  const handleFetch = async () => {
53    setFetchStatus('loading');
54    setError(null);
55    setData(null);
56 
57    try {
58      // Simulate a slow API call
59      const response = await abortableFetch(
60        'https://jsonplaceholder.typicode.com/posts/1',
61      );
62 
63      if (!response.ok) {
64        throw new Error(`HTTP error! status: ${response.status}`);
65      }
66 
67      const result: Post = await response.json();
68      setData(result);
69      setFetchStatus('success');
70    } catch (err: unknown) {
71      if (err instanceof Error && err.name === 'AbortError') {
72        setFetchStatus('aborted');
73        setError('Request was aborted');
74      } else {
75        setFetchStatus('error');
76        setError(err instanceof Error ? err.message : 'An error occurred');
77      }
78    }
79  };
80 
81  const handleLongFetch = async () => {
82    setFetchStatus('loading');
83    setError(null);
84    setData(null);
85 
86    try {
87      // Simulate a very slow API call using httpbin delay
88      const response = await abortableFetch('https://httpbin.org/delay/5');
89 
90      if (!response.ok) {
91        throw new Error(`HTTP error! status: ${response.status}`);
92      }
93 
94      const result: HttpBinResponse = await response.json();
95      setData(result);
96      setFetchStatus('success');
97    } catch (err: unknown) {
98// … truncated