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:
Ho Ngoc Hai
2026-04-08 23:02:44 +07:00
parent ccb82fddf8
commit 9d120dd21f
20 changed files with 481 additions and 155 deletions

View 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,
});
}