Move schedule fetching into useSchedule composable

composables/schedule.ts

@@ -0,0 +1,46 @@
+import type { Schedule } from '~/shared/types/schedule';
+
+let source: EventSource | null = null;
+let sourceRefs = 0;
+export const useSchedule = () => {
+	const asyncData = useAsyncData<Schedule>(
+		'schedule',
+		() => $fetch("/api/schedule"),
+		{ default: () => ({ events: [], locations: [] }) },
+	)
+	const { data: schedule } = asyncData;
+
+	onMounted(() => {
+		console.log("useSchedule onMounted", sourceRefs);
+		sourceRefs += 1;
+		if (sourceRefs !== 1) {
+			console.log("Event source already open");
+			return;
+		}
+		console.log("Opening event source");
+		source = new EventSource("/api/events");
+		source.addEventListener("message", (message) => {
+			console.log("Message", message.data);
+		});
+		source.addEventListener("update", (message) => {
+			const updatedSchedule: Schedule = JSON.parse(message.data);
+			console.log("Update", updatedSchedule);
+			schedule.value = updatedSchedule;
+		});
+	})
+
+	onUnmounted(() => {
+		console.log("useSchedule onUnmounted", sourceRefs);
+		sourceRefs -= 1;
+		if (source && sourceRefs === 0) {
+			console.log("Closing event source")
+			source.close();
+			source = null;
+		}
+		if (sourceRefs < 0) {
+			throw Error("Source reference count below zero");
+		}
+	});
+
+	return asyncData.then(({ data }) => data);
+}

composables/states.ts

@@ -1,3 +0,0 @@
-import type { Schedule } from "~/shared/types/schedule";
-
-export const useSchedule = () => useState<Schedule>('schedule');