feat(web): add React Query, dark mode toggle, and error retry UX
- 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>
This commit is contained in:
48
apps/web/lib/hooks/use-analytics.ts
Normal file
48
apps/web/lib/hooks/use-analytics.ts
Normal file
@@ -0,0 +1,48 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { analyticsApi } from '@/lib/analytics-api';
|
||||
|
||||
export const analyticsKeys = {
|
||||
all: ['analytics'] as const,
|
||||
marketReport: (city: string, period: string) =>
|
||||
['analytics', 'market-report', city, period] as const,
|
||||
heatmap: (city: string, period: string) =>
|
||||
['analytics', 'heatmap', city, period] as const,
|
||||
districtStats: (city: string, period: string) =>
|
||||
['analytics', 'district-stats', city, period] as const,
|
||||
priceTrend: (district: string, city: string, propertyType: string, periods: string[]) =>
|
||||
['analytics', 'price-trend', district, city, propertyType, periods] as const,
|
||||
};
|
||||
|
||||
export function useMarketReport(city: string, period: string) {
|
||||
return useQuery({
|
||||
queryKey: analyticsKeys.marketReport(city, period),
|
||||
queryFn: () => analyticsApi.getMarketReport(city, period),
|
||||
});
|
||||
}
|
||||
|
||||
export function useHeatmap(city: string, period: string) {
|
||||
return useQuery({
|
||||
queryKey: analyticsKeys.heatmap(city, period),
|
||||
queryFn: () => analyticsApi.getHeatmap(city, period),
|
||||
});
|
||||
}
|
||||
|
||||
export function useDistrictStats(city: string, period: string) {
|
||||
return useQuery({
|
||||
queryKey: analyticsKeys.districtStats(city, period),
|
||||
queryFn: () => analyticsApi.getDistrictStats(city, period),
|
||||
});
|
||||
}
|
||||
|
||||
export function usePriceTrend(
|
||||
district: string,
|
||||
city: string,
|
||||
propertyType: string,
|
||||
periods: string[],
|
||||
) {
|
||||
return useQuery({
|
||||
queryKey: analyticsKeys.priceTrend(district, city, propertyType, periods),
|
||||
queryFn: () => analyticsApi.getPriceTrend(district, city, propertyType, periods),
|
||||
enabled: !!district && !!city,
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user