From 56b5fc49f371933bf9ab874739dc9c298ea3e50e Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Mon, 26 Jun 2023 01:18:18 +0800
Subject: [PATCH] Refactor notes pages

---
 pages/notes/[id].vue  |   2 +-
 pages/notes/index.vue | 101 ++++++++++++++++++------------------------
 2 files changed, 44 insertions(+), 59 deletions(-)

diff --git a/pages/notes/[id].vue b/pages/notes/[id].vue
index 3c754d1..99e922a 100644
--- a/pages/notes/[id].vue
+++ b/pages/notes/[id].vue
@@ -68,7 +68,7 @@ const submit = async () => {
     if (submitTimeout.value) clearTimeout(submitTimeout.value)
 
     submitTimeout.value = setTimeout(async () => {
-        await submitNote(note.value, { id: route.params.id })
+        await submitNote(note.value, route.params.id)
         isSubmitting.value = false
     }, 1000)
 }
diff --git a/pages/notes/index.vue b/pages/notes/index.vue
index 598c829..b010760 100644
--- a/pages/notes/index.vue
+++ b/pages/notes/index.vue
@@ -1,68 +1,53 @@
 <template>
-	<App>
-		<Header />
-		<div class="flex w-full max-w-3xl justify-end gap-4">
-			<ElementButton
-				@click="userSignOut()"
-				class="group/button flex gap-2 align-middle hover:bg-red-500 hover:text-black">
-				<Icon name="fa6-solid:arrow-right-from-bracket" />
-				<p> Sign Out </p>
-			</ElementButton>
-			<ElementButton
-				class="group/button flex gap-2 align-middle hover:bg-blue-500 hover:text-black"
-				@click="create()">
-				<Icon
-					v-if="isCreating"
-					name="loading" />
-				<Icon
-					v-if="!isCreating"
-					name="fa6-solid:square-plus" />
-				<p> New Note </p>
-			</ElementButton>
-		</div>
+    <App>
+        <Header />
+        <div class="flex w-full max-w-3xl justify-end gap-4">
+            <ElementButton @click="userSignOut()"
+                class="group/button flex gap-2 align-middle hover:bg-red-500 hover:text-black">
+                <Icon name="fa6-solid:arrow-right-from-bracket" />
+                <p> Sign Out </p>
+            </ElementButton>
+            <ElementButton class="group/button flex gap-2 align-middle hover:bg-blue-500 hover:text-black"
+                @click="create()">
+                <Icon v-if="isCreating" name="loading" />
+                <Icon v-if="!isCreating" name="fa6-solid:square-plus" />
+                <p> New Note </p>
+            </ElementButton>
+        </div>
 
-		<div
-			class="mx-12 flex h-full w-full max-w-3xl flex-row justify-center gap-4 p-2">
-			<div
-				v-if="data"
-				class="flex w-full flex-col gap-4">
-				<div
-					v-for="note in data.notes"
-					:key="note.id">
-					<LazyCardNote
-						:id="note.id"
-						:uuid="note.uuid"
-						:title="note.title ? note.title : 'untitled'"
-						:description="note.description" />
-				</div>
-			</div>
-		</div>
-	</App>
+        <div class="mx-12 flex h-full w-full max-w-3xl flex-row justify-center gap-4">
+            <div v-if="data" class="flex w-full flex-col gap-4">
+                <div v-for="note in data.notes" :key="note.id">
+                    <LazyCardNote :id="note.id" :uuid="note.uuid" :title="note.title ? note.title : 'untitled'"
+                        :description="note.description" />
+                </div>
+            </div>
+        </div>
+    </App>
 </template>
 
 <script setup lang="ts">
-	definePageMeta({
-		middleware: ['auth'],
-	})
+definePageMeta({
+    middleware: ['auth'],
+})
 
-	const router = useRouter()
-	const supabase = useSupabaseAuthClient()
-	const isCreating = ref<boolean>(false)
+const router = useRouter()
+const isCreating = ref<boolean>(false)
 
-	const { data: data, refresh } = await useFetch('/api/notes')
+const { data: data, refresh } = await useFetch('/api/notes')
 
-	const create = async () => {
-		isCreating.value = true
-		await useFetch('/api/note/new', {
-			onResponse({ response }) {
-				console.log(response._data.message)
-				isCreating.value = false
-				router.push(`/notes/${response._data.note.uuid}`)
-			},
-		})
-	}
+const create = async () => {
+    isCreating.value = true
+    await useFetch('/api/note/new', {
+        onResponse({ response }) {
+            console.log(response._data.message)
+            router.push(`/notes/${response._data.note.uuid}`)
+        },
+    })
+    isCreating.value = false
+}
 
-	onMounted(() => {
-		refresh()
-	})
+onMounted(() => {
+    refresh()
+})
 </script>