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:
parent
c47452a8b4
commit
fae8b4e2e4
21 changed files with 181 additions and 118 deletions
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<main>
|
||||
<h1>Account Settings</h1>
|
||||
<p v-if="session?.account.type !== 'anonymous'">
|
||||
Name: {{ session?.account.name }}
|
||||
<p v-if="sessionStore.account?.type !== 'anonymous'">
|
||||
Name: {{ sessionStore.account?.name }}
|
||||
</p>
|
||||
<p>Access: {{ session?.account.type }}</p>
|
||||
<p>Access: {{ sessionStore.account?.type }}</p>
|
||||
<form @submit.prevent="changeSettings">
|
||||
<label>
|
||||
Timezone
|
||||
|
|
@ -34,9 +34,9 @@ definePageMeta({
|
|||
middleware: ["authenticated"],
|
||||
});
|
||||
|
||||
const { data: session, refresh: sessionRefresh } = await useAccountSession();
|
||||
const sessionStore = useSessionStore();
|
||||
|
||||
const timezone = ref(session.value?.account.timezone ?? "");
|
||||
const timezone = ref(sessionStore.account?.timezone ?? "");
|
||||
|
||||
async function changeSettings() {
|
||||
try {
|
||||
|
|
@ -46,7 +46,7 @@ async function changeSettings() {
|
|||
timezone: timezone.value,
|
||||
}
|
||||
});
|
||||
await sessionRefresh();
|
||||
await sessionStore.fetch();
|
||||
} catch (err: any) {
|
||||
alert(err.data.message);
|
||||
}
|
||||
|
|
@ -57,7 +57,7 @@ async function deleteAccount() {
|
|||
await $fetch.raw("/api/account", {
|
||||
method: "DELETE",
|
||||
});
|
||||
await sessionRefresh();
|
||||
await sessionStore.fetch();
|
||||
await navigateTo("/");
|
||||
|
||||
} catch (err: any) {
|
||||
|
|
|
|||
|
|
@ -77,6 +77,7 @@ definePageMeta({
|
|||
|
||||
const schedule = await useSchedule();
|
||||
const { data: accounts } = await useAccounts();
|
||||
const sessionStore = useSessionStore();
|
||||
|
||||
const route = useRoute();
|
||||
const crewFilter = computed({
|
||||
|
|
@ -90,14 +91,14 @@ const crewFilter = computed({
|
|||
}),
|
||||
});
|
||||
const eventSlotFilter = computed(() => {
|
||||
if (crewFilter.value === undefined || !session.value) {
|
||||
if (crewFilter.value === undefined || !sessionStore.account) {
|
||||
return () => true;
|
||||
}
|
||||
const cid = parseInt(crewFilter.value);
|
||||
return (slot: TimeSlot) => slot.assigned?.some(id => id === cid) || false;
|
||||
});
|
||||
const shiftSlotFilter = computed(() => {
|
||||
if (crewFilter.value === undefined || !session.value) {
|
||||
if (crewFilter.value === undefined || !sessionStore.account) {
|
||||
return () => true;
|
||||
}
|
||||
const cid = parseInt(crewFilter.value);
|
||||
|
|
@ -126,6 +127,5 @@ const roleFilter = computed({
|
|||
}),
|
||||
});
|
||||
|
||||
const { data: session } = await useAccountSession();
|
||||
const isAdmin = computed(() => session.value?.account.type === "admin")
|
||||
const isAdmin = computed(() => sessionStore.account?.type === "admin")
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@
|
|||
<li>
|
||||
<NuxtLink to="/schedule">View Schedule</NuxtLink>
|
||||
</li>
|
||||
<li v-if="session?.account?.type === 'admin' || session?.account?.type === 'crew'">
|
||||
<li v-if="sessionStore.account?.type === 'admin' || sessionStore.account?.type === 'crew'">
|
||||
<NuxtLink to="/edit">Edit Schedule</NuxtLink>
|
||||
</li>
|
||||
<li v-if="session">
|
||||
<li v-if="sessionStore.account">
|
||||
<NuxtLink to="/account/settings">Account Settings</NuxtLink>
|
||||
</li>
|
||||
<li v-if="!session">
|
||||
<li v-if="!sessionStore.account">
|
||||
<NuxtLink to="/login">Log In / Create Account</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -19,5 +19,5 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const { data: session } = await useAccountSession();
|
||||
const sessionStore = useSessionStore();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -25,29 +25,26 @@
|
|||
<button type="button" @click="createAnonymousAccount">Create anonymous account</button>
|
||||
</fieldset>
|
||||
<pre><code>{{ result }}</code></pre>
|
||||
<pre><code>Session: {{ session }}</code></pre>
|
||||
<pre><code>Session: {{ ({ id: sessionStore.id, account: sessionStore.account, push: sessionStore.push }) }}</code></pre>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const { data: session, refresh: sessionRefresh } = await useAccountSession();
|
||||
const sessionStore = useSessionStore();
|
||||
const { getSubscription, subscribe } = usePushNotification();
|
||||
|
||||
const name = ref("");
|
||||
const result = ref("")
|
||||
async function logIn() {
|
||||
try {
|
||||
const res = await $fetch.raw("/api/auth/login", {
|
||||
method: "POST",
|
||||
body: { name: name.value },
|
||||
});
|
||||
result.value = `Server replied: ${res.status} ${res.statusText}`;
|
||||
result.value = await sessionStore.logIn(name.value);
|
||||
// Resubscribe push notifications if the user was subscribed before.
|
||||
const subscription = await getSubscription();
|
||||
if (subscription) {
|
||||
await subscribe();
|
||||
}
|
||||
await sessionRefresh();
|
||||
// XXX Remove the need for this.
|
||||
await sessionStore.fetch();
|
||||
|
||||
} catch (err: any) {
|
||||
console.log(err);
|
||||
|
|
@ -67,7 +64,7 @@ async function createAccount() {
|
|||
body: new URLSearchParams({ name: createName.value })
|
||||
});
|
||||
result.value = `Server replied: ${res.status} ${res.statusText}`;
|
||||
await sessionRefresh();
|
||||
await sessionStore.fetch();
|
||||
|
||||
} catch (err: any) {
|
||||
console.log(err);
|
||||
|
|
@ -84,7 +81,7 @@ async function createAnonymousAccount() {
|
|||
},
|
||||
});
|
||||
result.value = `Server replied: ${res.status} ${res.statusText}`;
|
||||
await sessionRefresh();
|
||||
await sessionStore.fetch();
|
||||
|
||||
} catch (err: any) {
|
||||
console.log(err);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<p>
|
||||
Study carefully, we only hold these events once a year.
|
||||
</p>
|
||||
<p v-if="!session">
|
||||
<p v-if="!sessionStore.account">
|
||||
<NuxtLink to="/login">Login</NuxtLink> or <NuxtLink to="/login#create-account">Create an account</NuxtLink>
|
||||
to get notified about updates to the schedule.
|
||||
</p>
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
Check out your <NuxtLink to="/account/settings">Account Setting</NuxtLink> to set up notifications for changes to schedule.
|
||||
</p>
|
||||
<h2>Schedule</h2>
|
||||
<label v-if="session">
|
||||
<label v-if="sessionStore.account">
|
||||
Filter:
|
||||
<select
|
||||
v-model="filter"
|
||||
|
|
@ -57,12 +57,12 @@
|
|||
<script setup lang="ts">
|
||||
import type { ShiftSlot, TimeSlot } from '~/shared/types/schedule';
|
||||
|
||||
const { data: session } = await useAccountSession();
|
||||
const sessionStore = useSessionStore();
|
||||
const { data: accounts } = await useAccounts();
|
||||
const schedule = await useSchedule();
|
||||
const isCrew = computed(() => (
|
||||
session.value?.account?.type === "crew"
|
||||
|| session.value?.account?.type === "admin"
|
||||
sessionStore.account?.type === "crew"
|
||||
|| sessionStore.account?.type === "admin"
|
||||
));
|
||||
|
||||
const route = useRoute();
|
||||
|
|
@ -78,12 +78,12 @@ const filter = computed({
|
|||
});
|
||||
|
||||
const eventSlotFilter = computed(() => {
|
||||
if (filter.value === undefined || !session.value) {
|
||||
if (filter.value === undefined || !sessionStore.account) {
|
||||
return () => true;
|
||||
}
|
||||
const aid = session.value?.account?.id;
|
||||
const aid = sessionStore.account?.id;
|
||||
if (filter.value === "my-schedule") {
|
||||
const ids = new Set(session.value?.account?.interestedIds);
|
||||
const ids = new Set(sessionStore.account?.interestedIds);
|
||||
for (const event of schedule.value.events) {
|
||||
if (ids.has(event.id)) {
|
||||
for (const slot of event.slots) {
|
||||
|
|
@ -103,11 +103,11 @@ const eventSlotFilter = computed(() => {
|
|||
return () => false;
|
||||
});
|
||||
const shiftSlotFilter = computed(() => {
|
||||
if (filter.value === undefined || !session.value) {
|
||||
if (filter.value === undefined || !sessionStore.account) {
|
||||
return () => true;
|
||||
}
|
||||
if (filter.value === "my-schedule" || filter.value === "assigned") {
|
||||
const aid = session.value?.account?.id;
|
||||
const aid = sessionStore.account?.id;
|
||||
return (slot: ShiftSlot) => slot.assigned?.some(id => id === aid) || false;
|
||||
}
|
||||
if (filter.value.startsWith("crew-")) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue