9d120dd21f
- Install @tanstack/react-query with exponential backoff retry config - Create QueryClientProvider and custom hooks for listings, analytics, payments, and subscription API calls - Migrate 5 dashboard pages from useState/useEffect to React Query hooks - Add dark mode CSS variables and ThemeProvider with localStorage persistence - Add theme toggle button in dashboard header (sun/moon icon) - Enhance error boundaries with auto-retry, retry count, and loading state Co-Authored-By: Paperclip <noreply@paperclip.ing>
98 lines
3.3 KiB
TypeScript
98 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
|
|
export default function SearchError({
|
|
error,
|
|
reset,
|
|
}: {
|
|
error: Error & { digest?: string };
|
|
reset: () => void;
|
|
}) {
|
|
const [retryCount, setRetryCount] = useState(0);
|
|
const [autoRetrying, setAutoRetrying] = useState(false);
|
|
|
|
useEffect(() => {
|
|
console.error('Search error:', error);
|
|
}, [error]);
|
|
|
|
useEffect(() => {
|
|
if (retryCount > 0) return;
|
|
setAutoRetrying(true);
|
|
const timer = setTimeout(() => {
|
|
setAutoRetrying(false);
|
|
setRetryCount((c) => c + 1);
|
|
reset();
|
|
}, 3000);
|
|
return () => clearTimeout(timer);
|
|
}, [error, reset, retryCount]);
|
|
|
|
const handleRetry = () => {
|
|
setRetryCount((c) => c + 1);
|
|
reset();
|
|
};
|
|
|
|
return (
|
|
<div className="mx-auto max-w-7xl px-4 py-6">
|
|
<div className="flex min-h-[400px] flex-col items-center justify-center">
|
|
<div className="mx-auto max-w-md text-center">
|
|
<div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-destructive/10">
|
|
<svg
|
|
className="h-7 w-7 text-destructive"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h2 className="mt-4 text-xl font-semibold">Lỗi tìm kiếm</h2>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
{autoRetrying
|
|
? 'Đang tự động thử lại...'
|
|
: 'Không thể thực hiện tìm kiếm. Vui lòng thử lại hoặc thay đổi bộ lọc.'}
|
|
</p>
|
|
{error.digest && (
|
|
<p className="mt-1 text-xs text-muted-foreground">Mã lỗi: {error.digest}</p>
|
|
)}
|
|
{retryCount > 0 && (
|
|
<p className="mt-1 text-xs text-muted-foreground">
|
|
Đã thử lại {retryCount} lần
|
|
</p>
|
|
)}
|
|
<div className="mt-6 flex justify-center gap-3">
|
|
<button
|
|
onClick={handleRetry}
|
|
disabled={autoRetrying}
|
|
className="inline-flex h-9 items-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 disabled:opacity-50"
|
|
>
|
|
{autoRetrying ? (
|
|
<>
|
|
<svg className="mr-2 h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
|
</svg>
|
|
Đang thử lại...
|
|
</>
|
|
) : (
|
|
'Thử lại'
|
|
)}
|
|
</button>
|
|
<a
|
|
href="/"
|
|
className="inline-flex h-9 items-center rounded-md border border-input bg-background px-4 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
|
|
>
|
|
Về trang chủ
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|