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

@ -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);