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:
23
apps/web/lib/hooks/use-listings.ts
Normal file
23
apps/web/lib/hooks/use-listings.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { listingsApi, type SearchListingsParams } from '@/lib/listings-api';
|
||||
|
||||
export const listingsKeys = {
|
||||
all: ['listings'] as const,
|
||||
search: (params: SearchListingsParams) => ['listings', 'search', params] as const,
|
||||
detail: (id: string) => ['listings', 'detail', id] as const,
|
||||
};
|
||||
|
||||
export function useListingsSearch(params: SearchListingsParams = {}) {
|
||||
return useQuery({
|
||||
queryKey: listingsKeys.search(params),
|
||||
queryFn: () => listingsApi.search(params),
|
||||
});
|
||||
}
|
||||
|
||||
export function useListingDetail(id: string) {
|
||||
return useQuery({
|
||||
queryKey: listingsKeys.detail(id),
|
||||
queryFn: () => listingsApi.getById(id),
|
||||
enabled: !!id,
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user