3a9e44758c
Several fixes discovered while smoke-testing the homepage under the new
port layout (web 3200 / api 3201) to avoid clashing with a sibling project:
- analytics-api: add `unwrap<T>()` helper for the `{ data, cacheMeta }`
envelope the backend CacheMetaInterceptor appends to every
`/analytics/*` response. Apply to all 9 analytics methods. Without this
`data.activeCount` (etc.) were `undefined`, crashing KpiStrip with
`TypeError: Cannot read properties of undefined (reading 'toLocaleString')`.
- public page: hard-coded `city = 'Ho Chi Minh'` returned 0 rows because
the DB stores `'Hồ Chí Minh'` and the SQL filter is case-insensitive but
not diacritic-insensitive. Use the accented spelling.
- use-analytics hooks: add `useAuthedAnalytics()` gate so unauthenticated
visitors on public routes no longer fire 401s from analytics queries.
- next.config.js CSP: add localhost:3200/3201 (http + ws) to connect-src so
the web origin can reach the relocated API. Without this fetches hit
`TypeError: Failed to fetch` on login.
- .claude/launch.json + package.json: web → 3200, api → 3201 (was 3000/3001,
conflicting with the sibling psyforge project also using 3000).
- Minor follow-ups from parallel QA work on this branch (analytics modules,
notifications gateway, auth test fixtures, trending-areas handler + DTO
+ tests, a few E2E smoke specs).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
104 lines
3.5 KiB
TypeScript
104 lines
3.5 KiB
TypeScript
import { useQuery } from '@tanstack/react-query';
|
|
import { analyticsApi } from '@/lib/analytics-api';
|
|
import { useAuthStore } from '@/lib/auth-store';
|
|
|
|
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,
|
|
marketSnapshot: (city: string) =>
|
|
['analytics', 'market-snapshot', city] as const,
|
|
priceMovers: (direction: 'up' | 'down', period: string) =>
|
|
['analytics', 'price-movers', direction, period] as const,
|
|
trendingAreas: (period: number) =>
|
|
['analytics', 'trending-areas', period] as const,
|
|
};
|
|
|
|
/**
|
|
* Analytics endpoints require authentication on the backend. Guard React Query
|
|
* hooks with `isAuthenticated` so unauthenticated visitors on public routes
|
|
* (e.g. homepage) do not fire requests that return 401 and spam the console.
|
|
*/
|
|
function useAuthedAnalytics() {
|
|
const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
|
|
const isInitialized = useAuthStore((s) => s.isInitialized);
|
|
// Only enable queries once auth state has initialized to avoid a spurious
|
|
// disabled → enabled transition on first paint.
|
|
return isInitialized && isAuthenticated;
|
|
}
|
|
|
|
export function useMarketReport(city: string, period: string) {
|
|
const enabled = useAuthedAnalytics();
|
|
return useQuery({
|
|
queryKey: analyticsKeys.marketReport(city, period),
|
|
queryFn: () => analyticsApi.getMarketReport(city, period),
|
|
enabled,
|
|
});
|
|
}
|
|
|
|
export function useHeatmap(city: string, period: string) {
|
|
const enabled = useAuthedAnalytics();
|
|
return useQuery({
|
|
queryKey: analyticsKeys.heatmap(city, period),
|
|
queryFn: () => analyticsApi.getHeatmap(city, period),
|
|
enabled,
|
|
});
|
|
}
|
|
|
|
export function useDistrictStats(city: string, period: string) {
|
|
const enabled = useAuthedAnalytics();
|
|
return useQuery({
|
|
queryKey: analyticsKeys.districtStats(city, period),
|
|
queryFn: () => analyticsApi.getDistrictStats(city, period),
|
|
enabled,
|
|
});
|
|
}
|
|
|
|
export function usePriceTrend(
|
|
district: string,
|
|
city: string,
|
|
propertyType: string,
|
|
periods: string[],
|
|
) {
|
|
const authed = useAuthedAnalytics();
|
|
return useQuery({
|
|
queryKey: analyticsKeys.priceTrend(district, city, propertyType, periods),
|
|
queryFn: () => analyticsApi.getPriceTrend(district, city, propertyType, periods),
|
|
enabled: authed && !!district && !!city,
|
|
});
|
|
}
|
|
|
|
export function useMarketSnapshot(city: string) {
|
|
const enabled = useAuthedAnalytics();
|
|
return useQuery({
|
|
queryKey: analyticsKeys.marketSnapshot(city),
|
|
queryFn: () => analyticsApi.getMarketSnapshot(city),
|
|
refetchInterval: 5 * 60 * 1000,
|
|
enabled,
|
|
});
|
|
}
|
|
|
|
export function usePriceMovers(direction: 'up' | 'down', period = '7d', limit = 5) {
|
|
const enabled = useAuthedAnalytics();
|
|
return useQuery({
|
|
queryKey: analyticsKeys.priceMovers(direction, period),
|
|
queryFn: () => analyticsApi.getPriceMovers(direction, period, limit),
|
|
enabled,
|
|
});
|
|
}
|
|
|
|
export function useTrendingAreas(period = 7, limit = 10) {
|
|
const enabled = useAuthedAnalytics();
|
|
return useQuery({
|
|
queryKey: analyticsKeys.trendingAreas(period),
|
|
queryFn: () => analyticsApi.getTrendingAreas(period, limit),
|
|
enabled,
|
|
});
|
|
}
|