Tasks are sync'd now

islands/Routine.tsx

@@ -29,6 +29,34 @@ export function Routine(
 	const tasks = useSignal(props.tasks)
 	const currentPhase = useSignal(toPhase())
 
+	const reload = async () => {
+		console.log('reloading...')
+		const newData = await (await fetch(location.href, {
+			headers: { accept: 'application/json' },
+		})).json()
+		tasks.value = newData
+		console.log('new tasks:', newData)
+	}
+
+	useEffect(() => {
+		let es = new EventSource('/api/tasks')
+		console.log('Streaming task events...')
+
+		es.addEventListener('message', (e) => {
+			console.log('task event from server:', e)
+			reload()
+		})
+
+		es.addEventListener('error', async (e) => {
+			// try and reconnect
+			console.log('Streaming todo events error:', e)
+			es.close()
+			const backoff = 10000 + Math.random() * 5000
+			await new Promise((resolve) => setTimeout(resolve, backoff))
+			es = new EventSource('/api/tasks')
+		})
+	}, [])
+
 	useEffect(() => {
 		if (IS_BROWSER) {
 			setInterval(() => {

routes/api/tasks.ts

@@ -114,7 +114,11 @@ export const handler: Handlers<Task | null> = {
 			)
 		} else {
 			return new Response(
-				JSON.stringify(Array.fromAsync(kv.list({ prefix: ['task'] }))),
+				JSON.stringify(
+					(await Array.fromAsync(kv.list({ prefix: ['task'] }))).map((r) =>
+						r.value
+					),
+				),
 			)
 		}
 	},

routes/routine.tsx

@@ -9,11 +9,14 @@ interface Data {
 }
 
 export const handler: Handlers = {
-	async GET(_req, ctx) {
+	async GET(req, ctx) {
 		const tasks = (await Array.fromAsync(kv.list({ prefix: ['task'] }))).map(
-			(r) => r.value
+			(r) => r.value,
 		)
-		console.log({ tasks })
+		const accept = req.headers.get('accept')
+		if (accept === 'application/json') {
+			return new Response(JSON.stringify(tasks))
+		}
 		return ctx.render({ tasks })
 	},
 }