From 13f344472e140d58bb5f1d05cdff0ca72035914a Mon Sep 17 00:00:00 2001
From: Hornwitser <github@hornwitser.no>
Date: Mon, 10 Mar 2025 15:41:32 +0100
Subject: [PATCH] Move schedule fetching into useSchedule composable

---
 components/EventsEdit.vue |  2 +-
 components/Timetable.vue  |  2 +-
 composables/schedule.ts   | 46 +++++++++++++++++++++++++++++++++++++++
 composables/states.ts     |  3 ---
 pages/schedule.vue        | 31 +-------------------------
 5 files changed, 49 insertions(+), 35 deletions(-)
 create mode 100644 composables/schedule.ts
 delete mode 100644 composables/states.ts

diff --git a/components/EventsEdit.vue b/components/EventsEdit.vue
index 574636d..3dbd699 100644
--- a/components/EventsEdit.vue
+++ b/components/EventsEdit.vue
@@ -80,7 +80,7 @@
 </template>
 
 <script lang="ts" setup>
-const schedule = useSchedule();
+const schedule = await useSchedule();
 const eventSelect = useTemplateRef("eventSelect");
 
 function onChange(event: any) {
diff --git a/components/Timetable.vue b/components/Timetable.vue
index a4ebdb8..0945291 100644
--- a/components/Timetable.vue
+++ b/components/Timetable.vue
@@ -429,7 +429,7 @@ function tableElementsFromStretches(
 	};
 }
 
-const schedule = useSchedule();
+const schedule = await useSchedule();
 const junctions = computed(() => junctionsFromEdges(edgesFromEvents(schedule.value.events)));
 const stretches = computed(() => [
 	...stretchesFromSpans(spansFromJunctions(junctions.value, schedule.value.locations), oneHourMs * 5)
diff --git a/composables/schedule.ts b/composables/schedule.ts
new file mode 100644
index 0000000..cbf77e1
--- /dev/null
+++ b/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);
+}
diff --git a/composables/states.ts b/composables/states.ts
deleted file mode 100644
index 797812d..0000000
--- a/composables/states.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import type { Schedule } from "~/shared/types/schedule";
-
-export const useSchedule = () => useState<Schedule>('schedule');
diff --git a/pages/schedule.vue b/pages/schedule.vue
index 29142cc..d431fc6 100644
--- a/pages/schedule.vue
+++ b/pages/schedule.vue
@@ -27,35 +27,6 @@
 </template>
 
 <script setup lang="ts">
-import type { Schedule } from '~/shared/types/schedule';
 const { data: session } = await useAccountSession();
-
-const schedule = useSchedule();
-
-await callOnce(async () => {
-	schedule.value = await $fetch("/api/schedule");
-})
-
-const source = ref<EventSource | null>(null);
-
-onMounted(() => {
-	console.log("Opening event source")
-	source.value = new EventSource("/api/events");
-	source.value.addEventListener("message", (message) => {
-		console.log("Message", message.data);
-	});
-	source.value.addEventListener("update", (message) => {
-		const updatedSchedule: Schedule = JSON.parse(message.data);
-		console.log("Update", updatedSchedule);
-		schedule.value = updatedSchedule;
-	});
-})
-
-onUnmounted(() => {
-	if (source.value) {
-		console.log("Closing event source")
-		source.value.close();
-		source.value = null;
-	}
-});
+const schedule = await useSchedule();
 </script>