Scrum4Me/components/backlog/backlog-hydration-wrapper.tsx
Madhura68 96fc50154d feat(PBI-74): hidden-tab + reconnect resync (Story 5)
Per ontwerp samen in één commit zodat geen vangnet wegvalt zonder vervanging.

- T-861: useBacklogRealtime sluit niet meer op visibilitychange hidden;
  EventSource blijft open zolang browser/netwerk dit toelaten. Reconnect bij
  netwerkfout blijft via backoff. visibilitychange fungeert nog wel als
  re-connect-trigger als de stream tussentijds is gesloten (b.v. 240s
  hard-close server-side).
- T-862: 'ready'-event-handler telt connect-cycles. De eerste 'ready' is de
  initial connect (geen resync). Bij latere 'ready' (post-reconnect) wordt
  resyncActiveScopes('reconnect') aangeroepen om gemiste events op te halen.
- T-863: nieuwe lib/realtime/use-workspace-resync.ts — luistert op
  document.visibilitychange (hidden→visible) en window.online; dispatcht
  resyncActiveScopes('visible') resp. 'reconnect'. Mounted in
  BacklogHydrationWrapper na useBacklogRealtime.
- T-864: 4 nieuwe vitest-cases voor useWorkspaceResync (jsdom): visible→
  visible event, online event, hidden negeren, cleanup-bij-unmount.

Daarnaast lint-cleanup: ongebruikte 'order'-variabelen in pbi-list en
story-panel weggehaald.

Verify: lint+typecheck clean, 646/646 tests groen.

Refs: PBI-74, ST-1322, T-861..T-864

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-10 01:20:06 +02:00

84 lines
3 KiB
TypeScript

'use client'
import { useEffect, useRef } from 'react'
import { useBacklogStore, type BacklogPbi, type BacklogStory, type BacklogTask } from '@/stores/backlog-store'
import { useBacklogRealtime } from '@/lib/realtime/use-backlog-realtime'
import { useWorkspaceResync } from '@/lib/realtime/use-workspace-resync'
import { useProductWorkspaceStore } from '@/stores/product-workspace/store'
import type {
BacklogPbi as WorkspacePbi,
BacklogStory as WorkspaceStory,
BacklogTask as WorkspaceTask,
ProductBacklogSnapshot,
} from '@/stores/product-workspace/types'
import { logWorkspaceFingerprint } from '@/lib/realtime/dev-workspace-fingerprint'
interface InitialData {
pbis: BacklogPbi[]
storiesByPbi: Record<string, BacklogStory[]>
tasksByStory: Record<string, BacklogTask[]>
}
interface BacklogHydrationWrapperProps {
initialData: InitialData
productId: string
productName?: string
children: React.ReactNode
}
function fingerprint(data: InitialData): string {
const pbiPart = data.pbis.map((p) => `${p.id}:${p.status}:${p.priority}`).join(',')
const storyPart = Object.entries(data.storiesByPbi)
.flatMap(([, list]) => list.map((s) => `${s.id}:${s.status}:${s.sprint_id ?? 'null'}`))
.join(',')
const taskPart = Object.entries(data.tasksByStory)
.flatMap(([, list]) => list.map((t) => `${t.id}:${t.status}`))
.join(',')
return `${pbiPart}|${storyPart}|${taskPart}`
}
// PBI-74 / T-844: dual-dispatch — naast de oude useBacklogStore vullen we nu
// ook de nieuwe product-workspace-store. De oude store blijft tijdelijk
// leidend voor componenten; in Story 3 verschuiven consumers één voor één.
// De runtime-payload bevat sort_order op PBI/Story (Prisma schema), ook al
// staat het niet op het oude InitialData type — daarom de cast hieronder.
function toWorkspaceSnapshot(
data: InitialData,
productId: string,
productName: string | undefined,
): ProductBacklogSnapshot {
return {
product: { id: productId, name: productName ?? '' },
pbis: data.pbis as unknown as WorkspacePbi[],
storiesByPbi: data.storiesByPbi as unknown as Record<string, WorkspaceStory[]>,
tasksByStory: data.tasksByStory as unknown as Record<string, WorkspaceTask[]>,
}
}
export function BacklogHydrationWrapper({
initialData,
productId,
productName,
children,
}: BacklogHydrationWrapperProps) {
const setInitialData = useBacklogStore((s) => s.setInitialData)
const lastFingerprint = useRef<string>('')
useEffect(() => {
const fp = fingerprint(initialData)
if (fp !== lastFingerprint.current) {
lastFingerprint.current = fp
setInitialData(initialData)
// Dual-dispatch: nieuwe workspace-store schaduwt mee.
useProductWorkspaceStore
.getState()
.hydrateSnapshot(toWorkspaceSnapshot(initialData, productId, productName))
logWorkspaceFingerprint('hydrate')
}
}, [initialData, productId, productName, setInitialData])
useBacklogRealtime(productId)
useWorkspaceResync()
return <>{children}</>
}