Madhura68
6c2a75a1dd
Test of SSE-event → store → render-pipeline werkt buiten de Solo Paneel context. Mirrort het patroon van solo-store maar minimaal. - debug-store.ts: kleine Zustand-store met tasks + applyEvent + applyCount/skipCount-tellers - store-panel.tsx: rendert store-state in een tabel met statuskleuring - client.tsx: drie layer-toggles (dispatch / flushSync / startView- Transition) + lift dispatch in onmessage. Zo kunnen we elke combinatie isoleren Bevestigd: alle drie de toggles werken op het bare /debug-realtime endpoint. Volgende laag is Server Action revalidation. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
111 lines
3.2 KiB
TypeScript
111 lines
3.2 KiB
TypeScript
'use client'
|
|
|
|
import { useDebugStore } from './debug-store'
|
|
|
|
export function StorePanel() {
|
|
const tasks = useDebugStore((s) => s.tasks)
|
|
const applyCount = useDebugStore((s) => s.applyCount)
|
|
const skipCount = useDebugStore((s) => s.skipCount)
|
|
const reset = useDebugStore((s) => s.reset)
|
|
|
|
const taskList = Object.values(tasks)
|
|
|
|
return (
|
|
<div style={{ marginTop: 16 }}>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 12,
|
|
padding: 8,
|
|
background: '#eef',
|
|
border: '1px solid #cce',
|
|
borderRadius: 4,
|
|
fontSize: 12,
|
|
}}
|
|
>
|
|
<strong>Store layer:</strong>
|
|
<span>
|
|
applyCount: <code>{applyCount}</code>
|
|
</span>
|
|
<span>
|
|
skipCount: <code>{skipCount}</code>
|
|
</span>
|
|
<span>
|
|
taskCount: <code>{taskList.length}</code>
|
|
</span>
|
|
<button
|
|
onClick={reset}
|
|
style={{
|
|
marginLeft: 'auto',
|
|
padding: '4px 10px',
|
|
background: '#eee',
|
|
border: '1px solid #ccc',
|
|
borderRadius: 4,
|
|
fontSize: 12,
|
|
cursor: 'pointer',
|
|
}}
|
|
>
|
|
reset store
|
|
</button>
|
|
</div>
|
|
|
|
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12, marginTop: 8 }}>
|
|
<thead>
|
|
<tr style={{ background: '#f0f0f0', textAlign: 'left' }}>
|
|
<th style={{ padding: 6, border: '1px solid #ddd', width: 220 }}>id</th>
|
|
<th style={{ padding: 6, border: '1px solid #ddd', width: 100 }}>status</th>
|
|
<th style={{ padding: 6, border: '1px solid #ddd' }}>title</th>
|
|
<th style={{ padding: 6, border: '1px solid #ddd', width: 220 }}>updated_at (lokaal)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{taskList.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={4} style={{ padding: 8, textAlign: 'center', color: '#888' }}>
|
|
Store is leeg. Trigger een event en kijk of de tabel hier vult.
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
taskList.map((t) => (
|
|
<tr key={t.id}>
|
|
<td style={{ padding: 6, border: '1px solid #ddd' }}>
|
|
<code>{t.id}</code>
|
|
</td>
|
|
<td
|
|
style={{
|
|
padding: 6,
|
|
border: '1px solid #ddd',
|
|
fontWeight: 'bold',
|
|
color: statusColor(t.status),
|
|
}}
|
|
>
|
|
{t.status}
|
|
</td>
|
|
<td style={{ padding: 6, border: '1px solid #ddd' }}>{t.title}</td>
|
|
<td style={{ padding: 6, border: '1px solid #ddd', whiteSpace: 'nowrap' }}>
|
|
{t.updated_at}
|
|
</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function statusColor(status: string) {
|
|
switch (status) {
|
|
case 'TO_DO':
|
|
return '#888'
|
|
case 'IN_PROGRESS':
|
|
return '#0070cc'
|
|
case 'REVIEW':
|
|
return '#cc7a00'
|
|
case 'DONE':
|
|
return 'green'
|
|
default:
|
|
return 'inherit'
|
|
}
|
|
}
|