owltide/stores/schedules.ts
Hornwitser 753da6d3d4 Refactor to persist and reliably deliver events
Store events that are to be broadcasted in the database, and fetch
events to serve in the /api/event stream to the client from the
database.  This ensures that events are not lost if the operation to
open the stream takes longer than usual, or the client was not connected
at the time the event was broadcast.

To ensure no events are lost in the transition from server generating
the page to the client hydrating and establishing a connection with the
event stream, the /api/last-event-id endpoint is first queried on the
server before any other entities is fetched from the database.  The
client then passes this id when establishing the event stream, and
receives all events greater than that id.
2025-09-20 20:36:37 +02:00

114 lines
3.5 KiB
TypeScript

/*
SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
SPDX-License-Identifier: AGPL-3.0-or-later
*/
import { Info } from "~/shared/utils/luxon";
interface SyncOperation {
controller: AbortController,
promise: Promise<Ref<ClientSchedule>>,
}
export const useSchedulesStore = defineStore("schedules", () => {
const sessionStore = useSessionStore();
const accountStore = useAccountStore();
const state = {
activeScheduleId: ref<number | undefined>(111),
schedules: ref<Map<number, Ref<ClientSchedule>>>(new Map()),
pendingSyncs: ref<Map<number, SyncOperation>>(new Map()),
};
/* Expose schedules to the console on the client to make it easy to inspect and do scripted modifications. */
if (import.meta.client)
(window as any).owltideSchedules = state.schedules;
const getters = {
activeSchedule: computed(() => {
if (state.activeScheduleId.value === undefined)
throw Error("No active schedule");
const schedule = state.schedules.value.get(state.activeScheduleId.value);
if (!schedule)
throw Error("Active schedule has not been fetched");
return schedule;
}),
};
const actions = {
async fetch(id: number) {
if (id !== 111) { throw Error("invalid id"); }
console.log("schedules store fetch", id);
const schedule = state.schedules.value.get(id);
if (schedule) {
console.log("return cached");
return schedule;
}
const pending = state.pendingSyncs.value.get(id);
if (pending) {
console.log("return pending");
return pending.promise;
}
console.log("return new fetch");
const requestFetch = useRequestFetch();
const controller = new AbortController();
const zone = Info.normalizeZone(accountStore.activeTimezone);
const locale = accountStore.activeLocale;
const promise = (async () => {
try {
const apiSchedule = await requestFetch("/api/schedule", { signal: controller.signal });
if (apiSchedule.deleted) {
throw new Error("Unexpecetd deleted schedule");
}
const schedule = ref(ClientSchedule.fromApi(apiSchedule, { zone, locale })) as Ref<ClientSchedule>;
state.schedules.value.set(id, schedule);
state.pendingSyncs.value.delete(id);
return schedule;
} catch (err: any) {
if (err.name !== "AbortError")
state.pendingSyncs.value.delete(id);
throw err;
}
})();
state.pendingSyncs.value.set(id, {
controller,
promise,
});
return promise;
},
async resync(id: number) {
if (id !== 111) { throw Error("invalid id"); }
const pending = state.pendingSyncs.value.get(id);
if (pending) {
pending.controller.abort();
}
state.schedules.value.delete(id);
state.pendingSyncs.value.delete(id);
await actions.fetch(id);
},
}
watch(() => sessionStore.id, (id, oldId) => {
for (const [scheduleId, pending] of state.pendingSyncs.value) {
console.log("Aborting pending schedule sync", scheduleId, "due session.id change from", oldId, "to", id);
pending.controller.abort();
state.pendingSyncs.value.delete(scheduleId);
}
})
appEventSource?.addEventListener("event", (event) => {
if (event.data.type !== "schedule-update") {
return;
}
const schedule = state.schedules.value.get(111);
const update = event.data.data;
// XXX validate updatedFrom/updatedAt here
if (schedule && !schedule.value.deleted && !update.deleted) {
const zone = Info.normalizeZone(accountStore.activeTimezone);
const locale = accountStore.activeLocale;
schedule.value.apiUpdate(update, { zone, locale })
}
});
return { ...state, ...getters, ...actions };
});