From d558cb7e99fd9298a21d7303febc3bb160210258 Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Sat, 24 Jun 2023 21:35:01 +0800
Subject: [PATCH] Update note page (working get and update)

---
 pages/notes/[id].vue    | 185 +++++++++++++++++++---------------------
 server/api/note.get.ts  |   8 +-
 server/api/note.post.ts |   6 +-
 server/api/note/new.ts  |   4 +-
 4 files changed, 100 insertions(+), 103 deletions(-)

diff --git a/pages/notes/[id].vue b/pages/notes/[id].vue
index bb351a1..3c754d1 100644
--- a/pages/notes/[id].vue
+++ b/pages/notes/[id].vue
@@ -1,110 +1,103 @@
 <template>
-	<NuxtLayout
-		name="edit"
-		@keydown.ctrl.s.prevent="submit(note)">
-		<template #content>
-			<div class="sticky top-0 flex w-full justify-between">
-				<div
-					@click="toggleComp('text')"
-					class="bg-lightgray w-1/2 p-2 text-center text-xl"
-					:class="{ 'bg-secondary': comp === 'text' }">
-					Text
-				</div>
-				<div
-					@click="toggleComp('md')"
-					class="bg-lightgray w-1/2 p-2 text-center text-xl"
-					:class="{ 'bg-secondary': comp === 'md' }">
-					Markdown
-				</div>
-			</div>
-			<div class="flex h-full w-full flex-col">
-				<textarea
-					ref="noteTextArea"
-					v-show="comp === 'text'"
-					class="bg-secondary min-h-screen w-full flex-grow resize-none border-none p-4 outline-none placeholder:text-zinc-700 focus:outline-none"
-					v-model="input">
+    <NuxtLayout name="edit">
+        <template #content>
+            <div class="sticky top-0 flex w-full justify-between">
+                <div @click="toggleComp('text')" class="bg-lightgray w-1/2 p-2 text-center text-xl"
+                    :class="{ 'bg-secondary': comp === 'text' }">
+                    Text
+                </div>
+                <div @click="toggleComp('md')" class="bg-lightgray w-1/2 p-2 text-center text-xl"
+                    :class="{ 'bg-secondary': comp === 'md' }">
+                    Markdown
+                </div>
+            </div>
+            <div class="flex h-full w-full flex-col">
+                <textarea ref="noteTextArea" v-show="comp === 'text'"
+                    class="bg-secondary min-h-screen w-full flex-grow resize-none border-none p-4 outline-none placeholder:text-zinc-700 focus:outline-none"
+                    v-model="input" @change="submit()">
 				</textarea>
-				<CardMarkdownRenderer
-					v-show="comp === 'md'"
-					:content="note.description"
-					:state="'description'" />
-			</div>
-		</template>
-	</NuxtLayout>
+                <CardMarkdownRenderer v-show="comp === 'md'" :content="note.description" :state="'description'" />
+            </div>
+        </template>
+    </NuxtLayout>
 </template>
 
 <script setup lang="ts">
-	definePageMeta({
-		middleware: ['auth'],
-	})
+definePageMeta({
+    middleware: ['auth'],
+})
 
-	type Comp = 'text' | 'md'
+type Mode = 'text' | 'md'
 
-	const note = useNote()
-	const route = useRoute()
-	const router = useRouter()
-	const isLoading = ref<Boolean>(false)
-	const isSubmitting = ref<Boolean>(false)
-	const isDeleting = ref<Boolean>(false)
-	const comp = ref<Comp>('text')
-	const description = useDescription()
-	const { textarea: noteTextArea, input } = useTextareaAutosize()
+const note = useNote()
+const route = useRoute()
+const router = useRouter()
+const isLoading = ref<Boolean>(false)
+const isSubmitting = ref<Boolean>(false)
+const isDeleting = ref<Boolean>(false)
+const comp = ref<Mode>('text')
+const { textarea: noteTextArea, input } = useTextareaAutosize()
 
-	const toggleComp = (name: Comp) => {
-		comp.value = name
-	}
+const toggleComp = (name: Mode) => {
+    comp.value = name
+}
 
-	const { refresh } = await useFetch('/api/note', {
-		method: 'GET',
-		query: {
-			id: route.params.id,
-		},
-		onResponse({ response }) {
-			console.log('Response: ', response)
-			if (response.status === 500) {
-				console.log(`Error: ${response._data.message}`)
-				router.push('/notes')
-				return
-			}
-			note.value.title = response._data.note.title
-			note.value.description = response._data.note.description
-			description.value = note.value.description
-			input.value = note.value.description
-		},
-	})
+const { refresh } = await useFetch('/api/note', {
+    method: 'GET',
+    query: {
+        id: route.params.id,
+    },
+    onResponse({ response }) {
+        console.log('Response: ', response)
+        if (response.status === 500) {
+            console.log(`Error: ${response._data.message}`)
+            router.push('/notes')
+            return
+        }
+        note.value.title = response._data.note.title
+        note.value.description = response._data.note.description
+        input.value = note.value.description
+    },
+})
 
-	const submit = async (note: Note) => {
-		isSubmitting.value = true
-		await submitNote(note, { id: route.params.id })
-		isSubmitting.value = false
-	}
+const submitTimeout = ref()
 
-	const deleteNote = async () => {
-		isDeleting.value = true
-		await useFetch('/api/note', {
-			method: 'DELETE',
-			query: {
-				id: route.params.id,
-			},
-			onResponse({ response }) {
-				isDeleting.value = false
-				console.log('DELETE:', response._data.message)
-				router.push('/notes')
-			},
-		})
-	}
+const submit = async () => {
+    isSubmitting.value = true
 
-	onMounted(() => {
-		isLoading.value = true
-		refresh()
-		isLoading.value = false
-	})
+    if (submitTimeout.value) clearTimeout(submitTimeout.value)
 
-	watch(
-		() => note.value.description,
-		() => {
-			description.value = note.value.description
-			input.value = note.value.description
-		}
-	)
+    submitTimeout.value = setTimeout(async () => {
+        await submitNote(note.value, { id: route.params.id })
+        isSubmitting.value = false
+    }, 1000)
+}
+
+const deleteNote = async () => {
+    isDeleting.value = true
+    await useFetch('/api/note', {
+        method: 'DELETE',
+        query: {
+            id: route.params.id,
+        },
+        onResponse({ response }) {
+            isDeleting.value = false
+            console.log('DELETE:', response._data.message)
+            router.push('/notes')
+        },
+    })
+}
+
+onMounted(() => {
+    isLoading.value = true
+    refresh()
+    isLoading.value = false
+})
+
+watch(
+    () => input.value,
+    () => {
+        note.value.description = input.value
+    }
+)
 </script>
diff --git a/server/api/note.get.ts b/server/api/note.get.ts
index 944fa3a..4528054 100644
--- a/server/api/note.get.ts
+++ b/server/api/note.get.ts
@@ -1,8 +1,12 @@
-import { serverSupabaseUser, serverSupabaseClient } from '#supabase/server'
+import {
+    serverSupabaseUser,
+    serverSupabaseClient,
+    serverSupabaseServiceRole,
+} from '#supabase/server'
 
 export default defineEventHandler(async (event) => {
     const user = await serverSupabaseUser(event)
-    const supabase = serverSupabaseClient(event)
+    const supabase = serverSupabaseServiceRole(event)
     const query = getQuery(event)
 
     if (!user) {
diff --git a/server/api/note.post.ts b/server/api/note.post.ts
index 6fe3f2f..ceb9cde 100644
--- a/server/api/note.post.ts
+++ b/server/api/note.post.ts
@@ -1,8 +1,8 @@
-import { serverSupabaseUser, serverSupabaseClient } from '#supabase/server'
+import { serverSupabaseUser, serverSupabaseServiceRole } from '#supabase/server'
 
-export default defineEventHandler(async (event): Promise<ApiResponse> => {
+export default defineEventHandler(async (event) => {
     const user = await serverSupabaseUser(event)
-    const supabase = serverSupabaseClient(event)
+    const supabase = serverSupabaseServiceRole(event)
     const query = getQuery(event)
     const body = await readBody(event)
 
diff --git a/server/api/note/new.ts b/server/api/note/new.ts
index fe9fcf3..75c993b 100644
--- a/server/api/note/new.ts
+++ b/server/api/note/new.ts
@@ -1,8 +1,8 @@
-import { serverSupabaseUser, serverSupabaseClient } from '#supabase/server'
+import { serverSupabaseUser, serverSupabaseServiceRole } from '#supabase/server'
 
 export default defineEventHandler(async (event) => {
     const user = await serverSupabaseUser(event)
-    const supabase = serverSupabaseClient(event)
+    const supabase = serverSupabaseServiceRole(event)
 
     if (!user) {
         throw createError({ statusCode: 401, message: 'Unauthorized' })