From b3ee03b5c3936dce7d72b553417b726dd6d1d298 Mon Sep 17 00:00:00 2001 From: Michael Dausmann Date: Sun, 19 Feb 2023 01:22:55 +1100 Subject: [PATCH] ditch useState and composables in favour of pinia store - add server rendered note detail page --- components/AppHeader.vue | 13 +- composables/states.ts | 10 - lib/services/notes.service.ts | 4 + nuxt.config.ts | 5 +- package-lock.json | 730 +++++++++------------------- package.json | 5 + pages/dashboard.vue | 25 +- pages/notes/[note_id].vue | 13 + server/trpc/routers/notes.router.ts | 11 +- stores/app.store.ts | 48 ++ 10 files changed, 325 insertions(+), 539 deletions(-) delete mode 100644 composables/states.ts create mode 100644 pages/notes/[note_id].vue create mode 100644 stores/app.store.ts diff --git a/components/AppHeader.vue b/components/AppHeader.vue index 4e30555..97d5990 100644 --- a/components/AppHeader.vue +++ b/components/AppHeader.vue @@ -1,17 +1,15 @@ diff --git a/pages/notes/[note_id].vue b/pages/notes/[note_id].vue new file mode 100644 index 0000000..7348be2 --- /dev/null +++ b/pages/notes/[note_id].vue @@ -0,0 +1,13 @@ + + diff --git a/server/trpc/routers/notes.router.ts b/server/trpc/routers/notes.router.ts index d16fe73..05a1b15 100644 --- a/server/trpc/routers/notes.router.ts +++ b/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, + } + }), }) \ No newline at end of file diff --git a/stores/app.store.ts b/stores/app.store.ts new file mode 100644 index 0000000..4e3431a --- /dev/null +++ b/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(); + } + }, + } +});