77ad10ced1
DateRangePicker grows a "Custom range" mode (From/To inputs capped at today, mutually-bounded so From <= To). dashboard-shell threads the range through to /api/v1/analytics, which validates calendar dates via ISO round-trip and enforces a 365-day cap as a backstop against the occupancy timeline N+1. KpiCards now gates its query on currentPortId so the early unhydrated-store fetch can't cache a zeroed/error response and display "-" until staleTime expires. MyRemindersRail drops xl:h-full so the rail no longer stretches past its grid row and overlaps ActivityFeed below. useRealtimeInvalidation switches to partial-prefix queryKeys so a realtime mutation invalidates every cached range bucket at once instead of just the one currently visible. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useRef } from 'react';
|
|
import { useQueryClient } from '@tanstack/react-query';
|
|
|
|
import { useSocket } from '@/providers/socket-provider';
|
|
import { subscribeRealtimeInvalidations, type EventMap } from '@/hooks/realtime-invalidation-core';
|
|
|
|
// Re-export for convenience so callers don't need to know about the split.
|
|
export type { EventMap, SocketLike } from '@/hooks/realtime-invalidation-core';
|
|
|
|
/**
|
|
* Subscribes to socket events and invalidates React Query caches.
|
|
*
|
|
* Safe to call with an inline-literal `eventMap` - the hook only re-subscribes
|
|
* when the SET of event keys actually changes (not when the object identity
|
|
* changes). The latest query-key list is read at event fire-time via a ref.
|
|
*
|
|
* @example
|
|
* useRealtimeInvalidation({
|
|
* 'client:created': [['clients']],
|
|
* 'client:updated': [['clients'], ['clients', clientId]],
|
|
* 'client:archived': [['clients']],
|
|
* });
|
|
*/
|
|
export function useRealtimeInvalidation(eventMap: EventMap) {
|
|
const socket = useSocket();
|
|
const queryClient = useQueryClient();
|
|
|
|
// Stash the latest map in a ref so handlers always see fresh queryKeys
|
|
// without re-subscribing.
|
|
const eventMapRef = useRef(eventMap);
|
|
eventMapRef.current = eventMap;
|
|
|
|
// Re-subscribe ONLY when the set of event names changes. Object identity
|
|
// of `eventMap` flips on every caller render; the joined key signature
|
|
// doesn't.
|
|
const eventKeysSig = Object.keys(eventMap).sort().join('|');
|
|
|
|
useEffect(() => {
|
|
if (!socket) return;
|
|
// eventMapRef is intentionally not in deps - it's a ref; we only want to
|
|
// re-run when the socket, queryClient, or the event-key SET changes.
|
|
return subscribeRealtimeInvalidations(
|
|
socket,
|
|
eventKeysSig.length > 0 ? eventKeysSig.split('|') : [],
|
|
queryClient,
|
|
() => eventMapRef.current,
|
|
);
|
|
}, [socket, queryClient, eventKeysSig]);
|
|
}
|