Use a pinia store to manage session state

Replace the convoluted useAccountSession composable with a pinia store
that in addition allows for the consolidation of all session related
functions to grouped into one module.
This commit is contained in:
Hornwitser 2025-05-24 17:53:33 +02:00
parent c47452a8b4
commit fae8b4e2e4
21 changed files with 181 additions and 118 deletions

View file

@ -5,7 +5,7 @@
<p v-if="event.interested">
{{ event.interested }} interested
</p>
<p v-if="session">
<p v-if="sessionStore.account">
<button
class="interested"
:class="{ active: interestedIds.has(event.id) }"
@ -20,7 +20,7 @@
<li v-for="slot in event.slots" :key="slot.id">
{{ formatTime(slot.start) }} - {{ formatTime(slot.end) }}
<button
v-if="session && event.slots.length > 1"
v-if="sessionStore.account && event.slots.length > 1"
class="interested"
:disabled="interestedIds.has(event.id)"
:class="{ active: interestedIds.has(event.id) || interestedIds.has(slot.id) }"
@ -49,9 +49,9 @@ defineProps<{
}>()
const runtimeConfig = useRuntimeConfig();
const { data: session, refresh: refreshSession } = await useAccountSession();
const interestedIds = computed(() => new Set(session.value?.account.interestedIds ?? []));
const timezone = computed(() => session.value?.account?.timezone ?? runtimeConfig.public.defaultTimezone);
const sessionStore = useSessionStore();
const interestedIds = computed(() => new Set(sessionStore.account?.interestedIds ?? []));
const timezone = computed(() => sessionStore.account?.timezone ?? runtimeConfig.public.defaultTimezone);
const { data: accounts } = await useAccounts();
const idToAccount = computed(() => new Map(accounts.value?.map(a => [a.id, a])));
@ -60,7 +60,7 @@ function formatTime(time: string) {
}
async function toggle(id: string, slotIds?: string[]) {
let newIds = [...session.value!.account.interestedIds ?? []];
let newIds = [...sessionStore.account!.interestedIds ?? []];
if (interestedIds.value.has(id)) {
newIds = newIds.filter(newId => newId !== id);
} else {
@ -74,7 +74,7 @@ async function toggle(id: string, slotIds?: string[]) {
method: "PATCH",
body: { interestedIds: newIds },
})
await refreshSession();
await sessionStore.fetch();
}
</script>