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>
32 lines
865 B
TypeScript
32 lines
865 B
TypeScript
import { useQuery } from '@tanstack/react-query';
|
|
import { subscriptionApi } from '@/lib/subscription-api';
|
|
|
|
export const subscriptionKeys = {
|
|
all: ['subscription'] as const,
|
|
plans: () => ['subscription', 'plans'] as const,
|
|
billing: () => ['subscription', 'billing'] as const,
|
|
quota: (metric: string) => ['subscription', 'quota', metric] as const,
|
|
};
|
|
|
|
export function usePlans() {
|
|
return useQuery({
|
|
queryKey: subscriptionKeys.plans(),
|
|
queryFn: () => subscriptionApi.getPlans(),
|
|
});
|
|
}
|
|
|
|
export function useBillingHistory() {
|
|
return useQuery({
|
|
queryKey: subscriptionKeys.billing(),
|
|
queryFn: () => subscriptionApi.getBillingHistory(),
|
|
});
|
|
}
|
|
|
|
export function useQuota(metric: string) {
|
|
return useQuery({
|
|
queryKey: subscriptionKeys.quota(metric),
|
|
queryFn: () => subscriptionApi.checkQuota(metric),
|
|
enabled: !!metric,
|
|
});
|
|
}
|