client side state for activeMembership and fetch notes based on same

README.md

@@ -96,7 +96,7 @@ npx prisma generate
 # TODO
 - add role to membership and have methods for changing role, making sure one owner etc (done)
 - remove @unique so users can have multiple accounts (done)
-- add concept of 'current' account for user.. maybe put account on context or session. maybe just on DB...'current' boolean on membership?
+- add concept of 'current' account for user.. maybe put account on context or session. maybe just on DB...'current' boolean on membership? (done but app state is messy)
 - add max_notes property to plan and account as an example of a 'limit' property (done)
 - add spinup script somehow to create plans???.... should I use some sort of generator like sidebase?
 - team invitation thingy

components/AppHeader.vue

@@ -1,6 +1,16 @@
 <script setup lang="ts">
 const supabase = useSupabaseAuthClient();
 const user = useSupabaseUser();
+const theAppState = appState();
+
+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();
@@ -13,6 +23,8 @@ 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>
+    <p>Active ->{{ theAppState.activeMembership?.account_id }}</p>
     <hr>
   </div>
 </template>

composables/states.ts

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

lib/services/user.account.service.ts

@@ -1,4 +1,4 @@
-import { ACCOUNT_ACCESS, PrismaClient } from '@prisma/client';
+import { ACCOUNT_ACCESS, PrismaClient, User as DBUser, Membership } from '@prisma/client';
 import { UtilService } from './util.service';
 
 const TRIAL_PLAN_NAME = '3 Month Trial';  // TODO - some sort of config.. this will change for every use of the boilerplate
@@ -10,7 +10,7 @@ export default class UserAccountService {
     this.prisma = prisma;
   }
 
-  async getUserBySupabaseId(supabase_uid: string) {
+  async getUserBySupabaseId(supabase_uid: string): Promise<(DBUser & { memberships: Membership[]; }) | null> {
     return this.prisma.user.findFirst({ where: { supabase_uid }, include: { memberships: true } });
   }
 

pages/dashboard.vue

@@ -5,7 +5,16 @@
   });
 
   const { $client } = useNuxtApp();
-  const { data: notes } = await $client.notes.getForCurrentUser.useQuery();
+
+  const theAppState = appState();
+  watch(theAppState.value, (newAppState) => {
+    if(newAppState.activeMembership){
+      const { data: foundNotes } = $client.notes.getForCurrentUser.useQuery({account_id: newAppState.activeMembership.account_id});
+      if(foundNotes.value?.notes){
+        theAppState.value.notes = foundNotes.value.notes;
+      }
+    }
+  }); 
 
   async function changeAccountPlan(){
     const { data: account } = await $client.userAccount.changeAccountPlan.useQuery();
@@ -27,15 +36,17 @@
     console.log(`updated membership on current account: ${JSON.stringify(membership)}`);
   }
 
+  
 </script>
 <template>
   <div>
     <h3>{{ user?.user_metadata.full_name }}'s Notes Dashboard</h3>
-    <p v-for="note in notes?.notes">{{ note.note_text }}</p>
+    <p v-for="note in theAppState.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>

server/trpc/context.ts

@@ -1,5 +1,5 @@
-import { PrismaClient } from '@prisma/client';
-import type { inferAsyncReturnType } from '@trpc/server'
+import { Membership, PrismaClient, User as DBUser } from '@prisma/client';
+import { inferAsyncReturnType, TRPCError } from '@trpc/server'
 import { H3Event } from 'h3';
 import { serverSupabaseClient } from '#supabase/server';
 import SupabaseClient from '@supabase/supabase-js/dist/module/SupabaseClient';
@@ -8,8 +8,8 @@ import UserAccountService from '~~/lib/services/user.account.service';
 
 let prisma: PrismaClient | undefined
 let supabase: SupabaseClient | undefined
-let user: User | null = null;
-let dbUser: any | undefined
+let user: User | null;
+let dbUser: (DBUser & { memberships: Membership[]; }) | null
 
 export async function createContext(event: H3Event){
   if (!supabase) {
@@ -31,6 +31,13 @@ export async function createContext(event: H3Event){
     }
   }
 
+  if(!supabase || !user || !prisma || !dbUser) {
+    throw new TRPCError({
+      code: 'INTERNAL_SERVER_ERROR',
+      message: 'Unable to fetch user data, please try again later.',
+    });
+  }
+  
   // TODO - This seems excessive, trim context when I have figured out what I actually need
   return {
     supabase,

server/trpc/routers/notes.router.ts

@@ -1,12 +1,13 @@
 import NotesService from '~~/lib/services/notes.service';
-import { protectedProcedure, router } from '../trpc'
+import { protectedProcedure, router } from '../trpc';
+import { z } from 'zod';
 
 export const notesRouter = router({
   getForCurrentUser: protectedProcedure
-    .query(async ({ ctx }) => {
+    .input(z.object({ account_id: z.number() }))
+    .query(async ({ ctx, input }) => {
       const notesService = new NotesService(ctx.prisma);
-      console.log(`fetching notes for account_id: ${ctx.dbUser.memberships[0].account_id}`);
-      const notes = await notesService.getNotesForAccountId(ctx.dbUser.memberships[0].account_id);
+      const notes = await notesService.getNotesForAccountId(input.account_id); 
       return {
         notes,
       }

server/trpc/routers/user.account.router.ts

@@ -3,10 +3,17 @@ import { protectedProcedure, router } from '../trpc'
 import { ACCOUNT_ACCESS } from '@prisma/client';
 
 export const userAccountRouter = router({
+  getDBUser: protectedProcedure
+    .query(({ ctx }) => {
+      return {
+        dbUser: ctx.dbUser,
+      }
+    }),  
   changeAccountPlan: protectedProcedure
     .query(async ({ ctx }) => {
       const uaService = new UserAccountService(ctx.prisma);
-      const account = await uaService.changeAccountPlan(ctx.dbUser.memberships[0].account_id, 2); // todo - plan should be an in put param
+      // TODO - account id and plan should be an input param and then the ternary removed
+      const account = (ctx.dbUser?.memberships[0].account_id)?await uaService.changeAccountPlan(ctx.dbUser?.memberships[0].account_id, 2):null;
       return {
         account,
       }
@@ -14,7 +21,7 @@ export const userAccountRouter = router({
   joinUserToAccount: protectedProcedure
     .query(async ({ ctx }) => {
       const uaService = new UserAccountService(ctx.prisma);
-      const membership = await uaService.joinUserToAccount(ctx.dbUser.id, 5); // todo - account should be an input param
+      const membership = (ctx.dbUser?.id)?await uaService.joinUserToAccount(ctx.dbUser?.id, 5):null; // todo - account should be an input param and remove this shit
       return {
         membership,
       }