Refactor notes pages

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)
 }

pages/notes/index.vue

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