feat(default): add real rankings data

web/default/src/features/rankings/hooks/use-rankings.ts

@@ -1,15 +1,11 @@
-import { useMemo } from 'react'
-import { buildRankingsSnapshot } from '../lib/mock-rankings'
-import type { RankingPeriod, RankingsSnapshot } from '../types'
+import { useQuery } from '@tanstack/react-query'
+import { getRankings } from '../api'
+import type { RankingPeriod } from '../types'
 
-/**
- * Memoised rankings snapshot for a period.
- *
- * Currently this synchronously builds deterministic mock data. When the
- * backend ships real analytics endpoints, swap the body to a
- * `useQuery`-based fetch — the consuming components don't care which side
- * produced the data as long as it conforms to {@link RankingsSnapshot}.
- */
-export function useRankings(period: RankingPeriod): RankingsSnapshot {
-  return useMemo(() => buildRankingsSnapshot(period), [period])
+export function useRankings(period: RankingPeriod) {
+  return useQuery({
+    queryKey: ['rankings', period],
+    queryFn: () => getRankings(period),
+    staleTime: 5 * 60 * 1000,
+  })
 }