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>
29 lines
782 B
TypeScript
29 lines
782 B
TypeScript
import { useQuery } from '@tanstack/react-query';
|
|
import { paymentApi } from '@/lib/payment-api';
|
|
|
|
export const paymentKeys = {
|
|
all: ['payments'] as const,
|
|
transactions: (params: { status?: string; limit?: number; offset?: number }) =>
|
|
['payments', 'transactions', params] as const,
|
|
status: (id: string) => ['payments', 'status', id] as const,
|
|
};
|
|
|
|
export function useTransactions(params: {
|
|
status?: string;
|
|
limit?: number;
|
|
offset?: number;
|
|
} = {}) {
|
|
return useQuery({
|
|
queryKey: paymentKeys.transactions(params),
|
|
queryFn: () => paymentApi.getTransactions(params),
|
|
});
|
|
}
|
|
|
|
export function usePaymentStatus(id: string) {
|
|
return useQuery({
|
|
queryKey: paymentKeys.status(id),
|
|
queryFn: () => paymentApi.getPaymentStatus(id),
|
|
enabled: !!id,
|
|
});
|
|
}
|