Scrum4Me/stores/solo-store.ts
Madhura68 562735b98b feat(ST-804): solo-store realtime dispatch + pendingOps
Wire de SSE-events uit /api/realtime/solo door naar de Zustand-store
zodat het Solo Paneel zonder refresh meebeweegt met DB-mutaties uit
welke bron dan ook (web, REST, MCP).

Migratie 20260427000216_extend_realtime_payload: voegt new-state
velden aan de pg_notify-payload toe (task_status, task_sort_order,
task_title, story_status, story_sort_order, story_title, story_code)
zodat de client geen extra fetch nodig heeft per event.

Store-uitbreiding (stores/solo-store.ts):
- pendingOps: Set<task-id> die optimistic-writes markeert; realtime
  echos voor die ids worden onderdrukt zodat eigen UI-mutaties niet
  twee keer toegepast worden of door een latere echo overschreven
- handleRealtimeEvent: dispatch op entity + op
  - task UPDATE/INSERT: bestaande tasks krijgen status/title/sort_order
    bijgewerkt; onbekende tasks worden genegeerd (story-context
    ontbreekt — gebruiker ziet ze pas na refresh)
  - task DELETE: verwijdert uit store
  - story UPDATE: werkt story_title/story_code bij op alle child-tasks
    in de store
  - story DELETE: verwijdert alle child-tasks (cascade reflectie)

Unit-test: 7 scenario's (status update, pendingOps echo-suppression,
DELETE, story-rename cascade, story-delete cascade, unknown task
no-op).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-27 02:11:08 +02:00

171 lines
5.4 KiB
TypeScript

import { create } from 'zustand'
import type { SoloTask } from '@/components/solo/solo-board'
type TaskStatus = SoloTask['status']
// Payload-shape gepubliceerd door de Postgres-trigger via pg_notify (ST-801
// + ST-804 prereq). Komt het Solo Paneel binnen via de SSE-stream uit
// /api/realtime/solo (ST-802).
export interface RealtimeEvent {
op: 'I' | 'U' | 'D'
entity: 'task' | 'story'
id: string
story_id?: string
product_id: string
sprint_id: string | null
assignee_id: string | null
// Task-specifieke velden (alleen aanwezig als entity === 'task')
task_status?: TaskStatus
task_sort_order?: number
task_title?: string
// Story-specifieke velden (alleen aanwezig als entity === 'story')
story_status?: 'OPEN' | 'IN_SPRINT' | 'DONE'
story_sort_order?: number
story_title?: string
story_code?: string | null
// Op UPDATE: lijst van kolommen die zijn veranderd
changed_fields?: string[]
}
interface SoloStore {
tasks: Record<string, SoloTask>
/** Task-ids die op dit moment een eigen optimistic write in de lucht hebben.
* Realtime echos voor deze ids worden onderdrukt zodat de eigen update niet
* twee keer toegepast wordt of door een latere echo overschreven. */
pendingOps: Set<string>
initTasks: (tasks: SoloTask[]) => void
optimisticMove: (taskId: string, toStatus: TaskStatus) => TaskStatus | null
rollback: (taskId: string, prevStatus: TaskStatus) => void
updatePlan: (taskId: string, plan: string | null) => void
markPending: (taskId: string) => void
clearPending: (taskId: string) => void
handleRealtimeEvent: (event: RealtimeEvent) => void
}
export const useSoloStore = create<SoloStore>((set, get) => ({
tasks: {},
pendingOps: new Set<string>(),
initTasks: (tasks) =>
set({ tasks: Object.fromEntries(tasks.map(t => [t.id, t])) }),
optimisticMove: (taskId, toStatus) => {
const prev = get().tasks[taskId]?.status ?? null
if (!prev) return null
set((s) => ({ tasks: { ...s.tasks, [taskId]: { ...s.tasks[taskId], status: toStatus } } }))
return prev
},
rollback: (taskId, prevStatus) =>
set((s) => ({ tasks: { ...s.tasks, [taskId]: { ...s.tasks[taskId], status: prevStatus } } })),
updatePlan: (taskId, plan) =>
set((s) => ({ tasks: { ...s.tasks, [taskId]: { ...s.tasks[taskId], implementation_plan: plan } } })),
markPending: (taskId) =>
set((s) => {
if (s.pendingOps.has(taskId)) return s
const next = new Set(s.pendingOps)
next.add(taskId)
return { pendingOps: next }
}),
clearPending: (taskId) =>
set((s) => {
if (!s.pendingOps.has(taskId)) return s
const next = new Set(s.pendingOps)
next.delete(taskId)
return { pendingOps: next }
}),
handleRealtimeEvent: (event) => {
if (event.entity === 'task') {
const { id, op } = event
if (op === 'D') {
set((s) => {
if (!(id in s.tasks)) return s
const next = { ...s.tasks }
delete next[id]
return { tasks: next }
})
return
}
// INSERT en UPDATE: alleen bestaande taken bijwerken. Nieuwe taken
// zonder story-context (story_title, story_code) renderen we niet
// — gebruiker ziet ze pas na een refresh. Acceptabel voor v1.
const existing = get().tasks[id]
if (!existing) return
if (get().pendingOps.has(id)) {
// Echo van een eigen optimistic move — laat de optimistic-state staan
return
}
const updates: Partial<SoloTask> = {}
if (event.task_status !== undefined && event.task_status !== existing.status) {
updates.status = event.task_status
}
if (
event.task_sort_order !== undefined &&
event.task_sort_order !== existing.sort_order
) {
updates.sort_order = event.task_sort_order
}
if (event.task_title !== undefined && event.task_title !== existing.title) {
updates.title = event.task_title
}
if (Object.keys(updates).length === 0) return
set((s) => ({ tasks: { ...s.tasks, [id]: { ...s.tasks[id], ...updates } } }))
return
}
if (event.entity === 'story') {
const { id, op } = event
if (op === 'D') {
// Story-cascade pakt tasks ook in de DB; verwijder de bijbehorende
// SoloTask-records uit de store.
set((s) => {
const next: Record<string, SoloTask> = {}
for (const [taskId, task] of Object.entries(s.tasks)) {
if (task.story_id !== id) next[taskId] = task
}
return { tasks: next }
})
return
}
const tasks = get().tasks
const affectedIds = Object.entries(tasks)
.filter(([, t]) => t.story_id === id)
.map(([taskId]) => taskId)
if (affectedIds.length === 0) return
const newTitle = event.story_title
const newCode = event.story_code ?? null
set((s) => {
const next = { ...s.tasks }
for (const taskId of affectedIds) {
const t = next[taskId]
const titleChanged = newTitle !== undefined && t.story_title !== newTitle
const codeChanged = newCode !== t.story_code
if (!titleChanged && !codeChanged) continue
next[taskId] = {
...t,
...(titleChanged && newTitle !== undefined && { story_title: newTitle }),
...(codeChanged && { story_code: newCode }),
}
}
return { tasks: next }
})
}
},
}))