using uuid to get notes

components/card/Note.vue

@@ -1,7 +1,7 @@
 <template>
 	<div
 		class="bg-secondary flex w-96 cursor-pointer flex-col gap-4 rounded-lg p-4"
-		@click="noteDetail(props.id)">
+		@click="noteDetail(props.uuid)">
 		<div class="w-full text-center text-2xl font-bold">
 			{{ props.title }}
 		</div>
@@ -14,6 +14,7 @@
 <script setup lang="ts">
 	interface Props {
 		id: string | number;
+		uuid: string;
 		title: string;
 		description: string;
 	}

pages/notes/index.vue

@@ -20,6 +20,7 @@
 				<div v-for="note in data.notes">
 					<LazyCardNote
 						:id="note.id"
+						:uuid="note.uuid"
 						:title="note.title ? note.title : 'untitled'"
 						:description="note.description" />
 				</div>
@@ -29,8 +30,6 @@
 </template>
 
 <script setup lang="ts">
-	import { title } from 'process';
-
 	definePageMeta({
 		middleware: ['auth'],
 	});
@@ -47,7 +46,7 @@
 			onResponse({ response }) {
 				console.log(response._data.message);
 				isCreating.value = false;
-				router.push(`/notes/${response._data.note.id}`);
+				router.push(`/notes/${response._data.note.uuid}`);
 			},
 		});
 	};

server/api/note.get.ts

@@ -13,7 +13,7 @@ export default defineEventHandler(async (event) => {
 	const { data: note, error } = await supabase
 		.from('notes')
 		.select('*')
-		.eq('id', query.id)
+		.eq('uuid', query.id)
 		.eq('user_id', user.id)
 		.limit(1)
 		.single();

server/api/note/new.ts

@@ -15,7 +15,7 @@ export default defineEventHandler(async (event) => {
 
 	const { data: note, error: fetchError } = await supabase
 		.from('notes')
-		.select('id')
+		.select('uuid')
 		.eq('user_id', user.id)
 		.order('created_at', { ascending: false })
 		.limit(1)