ditch useState and composables in favour of pinia store - add server rendered note detail page

components/AppHeader.vue

@@ -1,17 +1,15 @@
 <script setup lang="ts">
+import { storeToRefs } from 'pinia';
+
 const supabase = useSupabaseAuthClient();
 const user = useSupabaseUser();
-const theAppState = appState();
+const store = useAppStore()
+const { activeMembership } = storeToRefs(store);
 
 const { $client } = useNuxtApp();
 
 const { data: dbUser } = await $client.userAccount.getDBUser.useQuery();
 
-if(!theAppState.value.activeMembership && dbUser.value?.dbUser.memberships && dbUser.value?.dbUser.memberships.length > 0) {
-  const defaultMembership = dbUser.value?.dbUser.memberships[0];
-  theAppState.value.activeMembership = defaultMembership;
-}
-
 async function signout() {
   await supabase.auth.signOut();
   navigateTo('/', {replace: true});
@@ -23,8 +21,7 @@ async function signout() {
     <h3>Nuxt 3 Boilerplate - AppHeader</h3>
     <div v-if="user">logged in as: {{ user.email }}: <button @click="signout()">Sign Out</button></div>
     <div v-if="!user">Not Logged in</div>
-    <button v-for="membership in dbUser?.dbUser.memberships" @click="theAppState.activeMembership = membership">{{ membership.account_id }}</button>
+    <button v-for="membership in dbUser?.dbUser.memberships" @click="store.changeActiveMembership(membership)">{{ membership.account_id }}<span v-if="membership.account_id === activeMembership?.account_id">*</span></button>
-    <p>Active ->{{ theAppState.activeMembership?.account_id }}</p>
     <hr>
   </div>
 </template>

composables/states.ts

@@ -1,10 +0,0 @@
-import { Membership, Note } from ".prisma/client"
-
-export type AppState = {
-  activeMembership?: Membership
-  notes: Note[]
-}
-
-export const appState = () => useState<AppState>('appState', () => ({
-  notes: []
-}));

lib/services/notes.service.ts

@@ -11,6 +11,10 @@ export default class NotesService {
     return this.prisma.note.findMany();
   }
 
+  async getNoteById(id: number) {
+    return this.prisma.note.findUniqueOrThrow({ where: { id } });
+  }
+
   async getNotesForAccountId(account_id: number) {
     return this.prisma.note.findMany({ where: { account_id } });
   }

nuxt.config.ts

@@ -6,5 +6,8 @@ export default defineNuxtConfig({
   typescript: {
     shim: false
   },
-  modules: ['@nuxtjs/supabase'],
+  modules: ['@nuxtjs/supabase', '@pinia/nuxt'],
+  imports: {
+    dirs: ['./stores'],
+  },
 })

package.json

@@ -14,9 +14,14 @@
     "prisma": "^4.9.0"
   },
   "dependencies": {
+    "@pinia/nuxt": "^0.4.6",
     "@trpc/client": "^10.9.0",
     "@trpc/server": "^10.9.0",
+    "pinia": "^2.0.30",
     "trpc-nuxt": "^0.5.0",
     "zod": "^3.20.2"
+  },
+  "overrides": {
+    "vue": "latest"
   }
 }

pages/dashboard.vue

@@ -1,20 +1,18 @@
 <script setup lang="ts">
-  const user = await useSupabaseUser();
+  import { storeToRefs } from 'pinia';
+
   definePageMeta({
     middleware: ['auth'],
   });
 
   const { $client } = useNuxtApp();
 
-  const theAppState = appState();
+  const store = useAppStore();
-  watch(theAppState.value, (newAppState) => {
+  const { notes } = storeToRefs(store);  // ensure the notes list is reactive
-    if(newAppState.activeMembership){
+
-      const { data: foundNotes } = $client.notes.getForCurrentUser.useQuery({account_id: newAppState.activeMembership.account_id});
+  onMounted(async () => {
-      if(foundNotes.value?.notes){
+    await store.initUser();
-        theAppState.value.notes = foundNotes.value.notes;
+  })
-      }
-    }
-  }); 
 
   async function changeAccountPlan(){
     const { data: account } = await $client.userAccount.changeAccountPlan.useQuery();
@@ -35,18 +33,15 @@
     const { data: membership } = await $client.userAccount.claimOwnershipOfAccount.useQuery();
     console.log(`updated membership on current account: ${JSON.stringify(membership)}`);
   }
-
-  
 </script>
 <template>
   <div>
-    <h3>{{ user?.user_metadata.full_name }}'s Notes Dashboard</h3>
+    <h3>Notes Dashboard</h3>
-    <p v-for="note in theAppState.notes">{{ note.note_text }}</p>
+    <p v-for="note in notes">{{ note.note_text }}</p>
 
     <button @click.prevent="changeAccountPlan()">Change Account Plan</button>
     <button @click.prevent="joinUserToAccount()">Join user to account</button>
     <button @click.prevent="changeUserAccessWithinAccount()">Change user access within account</button>
     <button @click.prevent="claimOwnershipOfAccount()">Claim Account Ownership</button>
-    <p>Active ->{{ theAppState.activeMembership?.account_id }}</p>
   </div>
 </template>

pages/notes/[note_id].vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const route = useRoute();
+const { $client } = useNuxtApp();
+const { data: note } = await $client.notes.getById.useQuery({note_id: +route.params.note_id});
+</script>
+<template>
+  <div>
+    <h3>Note Detail {{ route.params.note_id }}</h3>
+    <pre>{{ note?.note.note_text }}</pre>
+
+    <NuxtLink to="/notes/1">Back to Note 1 via an internal link (should not reload page)</NuxtLink>
+  </div>
+</template>

server/trpc/routers/notes.router.ts

@@ -1,5 +1,5 @@
 import NotesService from '~~/lib/services/notes.service';
-import { protectedProcedure, router } from '../trpc';
+import { protectedProcedure, publicProcedure, router } from '../trpc';
 import { z } from 'zod';
 
 export const notesRouter = router({
@@ -12,4 +12,13 @@ export const notesRouter = router({
         notes,
       }
     }),
+    getById: publicProcedure
+    .input(z.object({ note_id: z.number() }))
+    .query(async ({ ctx, input }) => {
+      const notesService = new NotesService(ctx.prisma);
+      const note = await notesService.getNoteById(input.note_id); 
+      return {
+        note,
+      }
+    }),
 })

stores/app.store.ts

@@ -0,0 +1,48 @@
+import { Membership, Note, User } from ".prisma/client"
+import { defineStore } from "pinia"
+export type DBUser = User & { memberships: Membership[]; }
+
+interface State {
+  dbUser?: DBUser
+  activeMembership: Membership | null
+  notes: Note[]
+}
+
+export const useAppStore = defineStore('app', {
+  state: (): State => {
+    return {
+      notes: [],
+      activeMembership: null
+    }
+  },
+  actions: {
+    async initUser() {
+      const { $client } = useNuxtApp();
+      const { data: dbUser } = await $client.userAccount.getDBUser.useQuery();
+      if(dbUser.value?.dbUser){
+        this.dbUser = dbUser.value.dbUser;
+        if(dbUser.value.dbUser.memberships.length > 0){
+          this.activeMembership = dbUser.value.dbUser.memberships[0];
+          await this.fetchNotesForCurrentUser();
+        }
+      }
+    },
+    async fetchNotesForCurrentUser() {
+      if(!this.activeMembership) {
+        return; 
+      }
+
+      const { $client } = useNuxtApp();
+      const { data: foundNotes } = await $client.notes.getForCurrentUser.useQuery({account_id: this.activeMembership.account_id});
+      if(foundNotes.value?.notes){
+        this.notes = foundNotes.value.notes;
+      }  
+    },
+    async changeActiveMembership(membership: Membership) {
+      if(membership !== this.activeMembership){
+        this.activeMembership = membership;
+        await this.fetchNotesForCurrentUser();
+      }
+    }, 
+  }
+});