Rename and refactor the types passed over the API to be based on an entity that's either living or a tombstone. A living entity has a deleted property that's either undefined or false, while a tombstone has a deleted property set to true. All entities have a numeric id and an updatedAt timestamp. To sync entities, an array of replacements are passed around. Living entities are replaced with tombstones when they're deleted. And tombstones are replaced with living entities when restored.
109 lines
3.3 KiB
TypeScript
109 lines
3.3 KiB
TypeScript
import type { ApiSchedule } from "~/shared/types/api";
|
|
import { applyUpdatesToArray } from "~/shared/utils/update";
|
|
|
|
interface SyncOperation {
|
|
controller: AbortController,
|
|
promise: Promise<Ref<ApiSchedule>>,
|
|
}
|
|
|
|
export const useSchedulesStore = defineStore("schedules", () => {
|
|
const sessionStore = useSessionStore();
|
|
|
|
const state = {
|
|
activeScheduleId: ref<number | undefined>(111),
|
|
schedules: ref<Map<number, Ref<ApiSchedule>>>(new Map()),
|
|
pendingSyncs: ref<Map<number, SyncOperation>>(new Map()),
|
|
};
|
|
|
|
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 promise = (async () => {
|
|
try {
|
|
const schedule = ref(await requestFetch("/api/schedule", { signal: controller.signal }));
|
|
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("update", (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) {
|
|
if (update.locations) {
|
|
applyUpdatesToArray(update.locations, schedule.value.locations = schedule.value.locations ?? []);
|
|
}
|
|
if (update.events) {
|
|
applyUpdatesToArray(update.events, schedule.value.events = schedule.value.events ?? []);
|
|
}
|
|
if (update.roles) {
|
|
applyUpdatesToArray(update.roles, schedule.value.roles = schedule.value.roles ?? []);
|
|
}
|
|
if (update.shifts) {
|
|
applyUpdatesToArray(update.shifts, schedule.value.shifts = schedule.value.shifts ?? []);
|
|
}
|
|
}
|
|
});
|
|
|
|
return { ...state, ...getters, ...actions };
|
|
});
|