Implement editing of the schedule

Cobbled together minimum viable system for editing the schedule in a way
that propogates updates to connected clients.

app/api/events/actions.ts

@@ -0,0 +1,70 @@
+"use server";
+import { Schedule } from "@/app/schedule/types";
+import { readFile, writeFile } from "fs/promises";
+import { broadcastUpdate } from "./streams";
+
+export async function createEvent(formData: FormData) {
+	const schedule: Schedule = JSON.parse(await readFile("schedule.json", "utf-8"));
+	const id = formData.get("id") as string;
+	const name = formData.get("name") as string;
+	const description = formData.get("description") as string;
+	const start = formData.get("start") as string;
+	const end = formData.get("end") as string;
+	const location = formData.get("location") as string;
+	schedule.events.push({
+		name,
+		id,
+		description,
+		slots: [
+			{
+				id: `${id}-1`,
+				start,
+				end,
+				locations: [location],
+			}
+		]
+	});
+	broadcastUpdate(schedule);
+	await writeFile("schedule.json", JSON.stringify(schedule, null, "\t"), "utf-8");
+}
+
+export async function modifyEvent(formData: FormData) {
+	const schedule: Schedule = JSON.parse(await readFile("schedule.json", "utf-8"));
+	const id = formData.get("id") as string;
+	const name = formData.get("name") as string;
+	const description = formData.get("description") as string;
+	const start = formData.get("start") as string;
+	const end = formData.get("end") as string;
+	const location = formData.get("location") as string;
+	const index = schedule.events.findIndex(event => event.id === id);
+	if (index === -1) {
+		throw Error("No such event");
+	}
+	schedule.events[index] = {
+		name,
+		id,
+		description,
+		slots: [
+			{
+				id: `${id}-1`,
+				start,
+				end,
+				locations: [location],
+			}
+		]
+	};
+	broadcastUpdate(schedule);
+	await writeFile("schedule.json", JSON.stringify(schedule, null, "\t"), "utf-8");
+}
+
+export async function deleteEvent(formData: FormData) {
+	const schedule: Schedule = JSON.parse(await readFile("schedule.json", "utf-8"));
+	const id = formData.get("id") as string;
+	const index = schedule.events.findIndex(event => event.id === id);
+	if (index === -1) {
+		throw Error("No such event");
+	}
+	schedule.events.splice(index, 1);
+	broadcastUpdate(schedule);
+	await writeFile("schedule.json", JSON.stringify(schedule, null, "\t"), "utf-8");
+}

app/api/events/route.ts

@@ -1,36 +1,4 @@
-import { Schedule } from "@/app/schedule/types";
-
-function sendMessage(
-	stream: WritableStream<string>,
-	message: string,
-) {
-	const writer = stream.getWriter();
-	writer.ready
-		.then(() => writer.write(message))
-		.catch(console.error)
-		.finally(() => writer.releaseLock())
-	;
-}
-
-let streams = new Set<WritableStream<string>>();
-let lastBroadcastData: string | null = null;
-let lastBroadcastId = 0;
-export function broadcastUpdate(schedule: Schedule) {
-	const id = Date.now();
-	const data = JSON.stringify(schedule);
-	lastBroadcastId = id;
-	lastBroadcastData = data;
-	const message = `id: ${id}\nevent: update\ndata: ${data}\n\n`
-	for (const stream of streams) {
-		sendMessage(stream, message);
-	}
-}
-
-setInterval(() => {
-	for (const stream of streams) {
-		sendMessage(stream, "data: keepalive\n\n");
-	}
-}, 10e3)
+import { addStream, deleteStream } from "./streams";
 
 export async function GET(request: Request) {
 	const encoder = new TextEncoder();
@@ -42,21 +10,15 @@ export async function GET(request: Request) {
 		},
 		flush(controller) {
 			console.log(`finished event stream for ${source}`);
-			streams.delete(stream.writable);
+			deleteStream(stream.writable);
 		},
 		// @ts-expect-error experimental API
 		cancel(reason) {
 			console.log(`cancelled event stream for ${source}`);
-			streams.delete(stream.writable);
+			deleteStream(stream.writable);
 		}
 	})
-	streams.add(stream.writable);
-	if (lastBroadcastId) {
-		sendMessage(
-			stream.writable,
-			`id: ${lastBroadcastData}\nevent: update\ndata: ${lastBroadcastData}\n\n`
-		);
-	}
+	addStream(stream.writable);
 	return new Response(
 		stream.readable,
 		{

app/api/events/streams.ts

@@ -0,0 +1,50 @@
+import { Schedule } from "@/app/schedule/types";
+
+function sendMessage(
+	stream: WritableStream<string>,
+	message: string,
+) {
+	const writer = stream.getWriter();
+	writer.ready
+		.then(() => writer.write(message))
+		.catch(console.error)
+		.finally(() => writer.releaseLock())
+	;
+}
+
+declare global {
+	var streams: Set<WritableStream<string>>;
+}
+global.streams = global.streams ?? new Set<WritableStream<string>>();
+
+let keepaliveInterval: ReturnType<typeof setInterval> | null = null
+export function addStream(stream: WritableStream<string>) {
+	if (streams.size === 0) {
+		console.log("Starting keepalive")
+		keepaliveInterval = setInterval(sendKeepalive, 4000)
+	}
+	streams.add(stream);
+}
+export function deleteStream(stream: WritableStream<string>) {
+	streams.delete(stream);
+	if (streams.size === 0) {
+		console.log("Ending keepalive")
+		clearInterval(keepaliveInterval!);
+	}
+}
+
+export function broadcastUpdate(schedule: Schedule) {
+	const id = Date.now();
+	const data = JSON.stringify(schedule);
+	const message = `id: ${id}\nevent: update\ndata: ${data}\n\n`
+	console.log(`broadcasting update from ${process.pid} to ${streams.size} clients`);
+	for (const stream of streams) {
+		sendMessage(stream, message);
+	}
+}
+
+function sendKeepalive() {
+	for (const stream of streams) {
+		sendMessage(stream, "data: keepalive\n\n");
+	}
+}

app/globals.css

@@ -52,3 +52,15 @@ a {
 		border-color: transparent;
 	}
 }
+
+label {
+	display: block;
+}
+
+label>* {
+	margin-inline-start: 0.5rem;
+}
+
+label + label {
+	margin-block-start: 0.5rem;
+}

app/schedule/context.tsx

@@ -16,14 +16,12 @@ export function ScheduleProvider(props: ScheduleProviderProps) {
 		const source = new EventSource("/api/events");
 		source.addEventListener("message", (message) => {
 			console.log("Message", message.data);
-			setSchedule(old => {
-				const copy: Schedule = JSON.parse(JSON.stringify(old));
-				const ts = copy.events[0].slots[0].start;
-				copy.events[0].slots[0].start = new Date(Date.parse(ts) + 36e5).toISOString();
-				return copy;
-			})
 		});
-		source.addEventListener("update", (message) => console.log("Update", message.data));
+		source.addEventListener("update", (message) => {
+			const updatedSchedule: Schedule = JSON.parse(message.data);
+			console.log("Update", updatedSchedule);
+			setSchedule(updatedSchedule);
+		});
 		return () => {
 			console.log("Closing event source")
 			source.close();

app/schedule/page.tsx

@@ -4,6 +4,7 @@ import { readFile } from "fs/promises"
 import { ScheduleProvider } from "./context"
 import { Events } from "@/ui/events";
 import { Locations } from "@/ui/locations";
+import { EventsEdit } from "@/ui/events-edit";
 
 export default async function page() {
 	const schedule: Schedule = JSON.parse(await readFile("schedule.json", "utf-8"));
@@ -16,6 +17,7 @@ export default async function page() {
 				</p>
 				<h2>Schedule</h2>
 				<Timetable />
+				<EventsEdit />
 				<h2>Events</h2>
 				<Events />
 				<h2>Locations</h2>