public/owltide
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages 1 Wiki Activity Actions

Use a pinia store to manage account state
All checks were successful
/ build (push) Successful in 3m29s
Details
/ deploy (push) Successful in 47s
Details

Browse source 
Refactor the existing scattered code dealing with the account state into
a pinia store.
This commit is contained in:
Hornwitser 2025-05-24 20:01:23 +02:00
parent fae8b4e2e4
commit e722876aae
12 changed files with 126 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

37
components/EventCard.vue
View file

@ -5,13 +5,13 @@
<p v-if="event.interested">
{{ event.interested }} interested
</p>
<p v-if="sessionStore.account">
<p v-if="accountStore.interestedIds">
<button
class="interested"
:class="{ active: interestedIds.has(event.id) }"
:class="{ active: accountStore.interestedIds?.has(event.id) }"
@click="toggle(event.id, event.slots.map(slot => slot.id))"
>
{{ interestedIds.has(event.id) ? "✔ interested" : "🔔 interested?" }}
{{ accountStore.interestedIds?.has(event.id) ? "✔ interested" : "🔔 interested?" }}
</button>
</p>
@ -20,13 +20,13 @@
<li v-for="slot in event.slots" :key="slot.id">
{{ formatTime(slot.start) }} - {{ formatTime(slot.end) }}
<button
v-if="sessionStore.account && event.slots.length > 1"
v-if="accountStore.interestedIds && event.slots.length > 1"
class="interested"
:disabled="interestedIds.has(event.id)"
:class="{ active: interestedIds.has(event.id) || interestedIds.has(slot.id) }"
:disabled="accountStore.interestedIds.has(event.id)"
:class="{ active: accountStore.interestedIds.has(event.id) || accountStore.interestedIds.has(slot.id) }"
@click="toggle(slot.id)"
>
{{ interestedIds.has(event.id) || interestedIds.has(slot.id) ? "✔ interested" : "🔔 interested?" }}
{{ accountStore.interestedIds.has(event.id) || accountStore.interestedIds.has(slot.id) ? "✔ interested" : "🔔 interested?" }}
</button>
<template v-if="slot.interested">
({{ slot.interested }} interested)
@ -48,33 +48,16 @@ defineProps<{
event: ScheduleEvent
}>()
const runtimeConfig = useRuntimeConfig();
const sessionStore = useSessionStore();
const interestedIds = computed(() => new Set(sessionStore.account?.interestedIds ?? []));
const timezone = computed(() => sessionStore.account?.timezone ?? runtimeConfig.public.defaultTimezone);
const accountStore = useAccountStore();
const { data: accounts } = await useAccounts();
const idToAccount = computed(() => new Map(accounts.value?.map(a => [a.id, a])));
function formatTime(time: string) {
return DateTime.fromISO(time, { zone: timezone.value }).toFormat("yyyy-LL-dd HH:mm");
return DateTime.fromISO(time, { zone: accountStore.activeTimezone }).toFormat("yyyy-LL-dd HH:mm");
}
async function toggle(id: string, slotIds?: string[]) {
let newIds = [...sessionStore.account!.interestedIds ?? []];
if (interestedIds.value.has(id)) {
newIds = newIds.filter(newId => newId !== id);
} else {
newIds.push(id);
if (slotIds) {
const filterIds = new Set(slotIds);
newIds = newIds.filter(newId => !filterIds.has(newId));
}
}
await $fetch("/api/account", {
method: "PATCH",
body: { interestedIds: newIds },
})
await sessionStore.fetch();
await accountStore.toggleInterestedId(id, slotIds);
}
</script>