From ba811ac51b284ccbaaf2d6b208aa63b7d45b8165 Mon Sep 17 00:00:00 2001
From: Giacomo Rebonato <grebonato@outlook.ie>
Date: Fri, 1 Nov 2024 15:09:50 +0100
Subject: [PATCH] small change

---
 frontend/App.tsx                           |  7 -------
 frontend/components/create-note-dialog.tsx |  4 +++-
 frontend/pocketbase-types.ts               | 10 ++++++++++
 frontend/routes/index.tsx                  |  7 +++++--
 4 files changed, 18 insertions(+), 10 deletions(-)
 delete mode 100644 frontend/App.tsx

diff --git a/frontend/App.tsx b/frontend/App.tsx
deleted file mode 100644
index 3f4e004..0000000
--- a/frontend/App.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export function App() {
-	return (
-		<div>
-			<div className='prose'>Welcome to pocket-react</div>
-		</div>
-	)
-}
diff --git a/frontend/components/create-note-dialog.tsx b/frontend/components/create-note-dialog.tsx
index 3e89967..0925577 100644
--- a/frontend/components/create-note-dialog.tsx
+++ b/frontend/components/create-note-dialog.tsx
@@ -1,5 +1,5 @@
 import { usePocketBase } from '@/use-pocketbase'
-import { useMutation } from '@tanstack/react-query'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { useNavigate } from '@tanstack/react-router'
 import { type RefObject, forwardRef } from 'react'
 
@@ -9,6 +9,7 @@ export const CreateNoteDialog = forwardRef<
 		inputTitleRef: RefObject<HTMLInputElement>
 	}
 >((props, dialogRef) => {
+	const queryClient = useQueryClient()
 	const pb = usePocketBase()
 	const navigate = useNavigate()
 	const createNotes = useMutation({
@@ -17,6 +18,7 @@ export const CreateNoteDialog = forwardRef<
 		},
 		onSuccess(data) {
 			if (dialogRef && typeof dialogRef !== 'function') {
+				queryClient.invalidateQueries({ queryKey: ['notes'] })
 				dialogRef?.current?.close()
 			}
 
diff --git a/frontend/pocketbase-types.ts b/frontend/pocketbase-types.ts
index e77ea85..60ab007 100644
--- a/frontend/pocketbase-types.ts
+++ b/frontend/pocketbase-types.ts
@@ -6,6 +6,7 @@ import type PocketBase from 'pocketbase'
 import type { RecordService } from 'pocketbase'
 
 export enum Collections {
+	Notes = "notes",
 	Users = "users",
 }
 
@@ -33,21 +34,29 @@ export type AuthSystemFields<T = never> = {
 
 // Record types for each collection
 
+export type NotesRecord = {
+	content?: string
+	title?: string
+}
+
 export type UsersRecord = {
 	avatar?: string
 	name?: string
 }
 
 // Response types include system fields and match responses from the PocketBase API
+export type NotesResponse<Texpand = unknown> = Required<NotesRecord> & BaseSystemFields<Texpand>
 export type UsersResponse<Texpand = unknown> = Required<UsersRecord> & AuthSystemFields<Texpand>
 
 // Types containing all Records and Responses, useful for creating typing helper functions
 
 export type CollectionRecords = {
+	notes: NotesRecord
 	users: UsersRecord
 }
 
 export type CollectionResponses = {
+	notes: NotesResponse
 	users: UsersResponse
 }
 
@@ -55,5 +64,6 @@ export type CollectionResponses = {
 // https://github.com/pocketbase/js-sdk#specify-typescript-definitions
 
 export type TypedPocketBase = PocketBase & {
+	collection(idOrName: 'notes'): RecordService<NotesResponse>
 	collection(idOrName: 'users'): RecordService<UsersResponse>
 }
diff --git a/frontend/routes/index.tsx b/frontend/routes/index.tsx
index c86023d..93a3a0f 100644
--- a/frontend/routes/index.tsx
+++ b/frontend/routes/index.tsx
@@ -1,6 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { z } from 'zod'
-import { App } from '../App'
 
 const searchSchema = z.object({
 	docId: z.string().optional(),
@@ -12,7 +11,11 @@ export const Route = createFileRoute('/')({
 	},
 	component: () => (
 		<div>
-			<App />
+			<h1 className='text-3xl font-bold'>Welcome to pocket-react</h1>
+			<p className='py-6'>
+				pocket-react is a starter kit that puts together PocketBase and React
+				SPA with Vite.
+			</p>
 		</div>
 	),
 })