Delete unused components (Auth & TextArea)

components/card/Auth.vue

@@ -1,78 +0,0 @@
-<template>
-	<div
-		class="bg-secondary mx-auto mt-12 flex h-96 w-96 flex-col items-center justify-center gap-8 rounded-xl p-8">
-		<div class="flex w-full flex-col gap-2">
-			<label> Email </label>
-			<input
-				type="text"
-				v-model="credential.email"
-				placeholder="username" />
-		</div>
-		<div class="flex w-full flex-col gap-2">
-			<label> Password </label>
-			<input
-				type="password"
-				v-model="credential.password"
-				placeholder="password" />
-		</div>
-		<p
-			v-if="mode === 'login'"
-			class="cursor-pointer text-blue-500 underline">
-			Don't have an account? Sign up
-		</p>
-		<p
-			v-if="mode === 'signup'"
-			class="cursor-pointer text-blue-500 underline">
-			Already have an account? Login
-		</p>
-		<button
-			v-on="
-				mode === 'login'
-					? { click: () => signIn($event) }
-					: { click: () => signUp($event) }
-			">
-			{{ mode === 'login' ? 'Login' : 'Sign Up' }}
-		</button>
-	</div>
-</template>
-
-<script setup lang="ts">
-	interface Props {
-		mode: 'login' | 'signup'
-	}
-
-	interface Credential {
-		email: string
-		password: string
-		name?: string
-	}
-
-	const credential: Credential = reactive({
-		email: '',
-		password: '',
-	})
-
-	const props = withDefaults(defineProps<Props>(), {
-		mode: 'login',
-	})
-
-	const supabase = useSupabaseAuthClient()
-
-	const signUp = async (event: Event) => {
-		const { data: user, error } = await supabase.auth.signUp({
-			email: credential.email,
-			password: credential.password,
-		})
-		console.log('user', user)
-		console.log('error', error)
-	}
-
-	const signIn = async (event: Event) => {
-		const { data: user, error } = await supabase.auth.signInWithPassword({
-			email: credential.email,
-			password: credential.password,
-		})
-		console.log('user', user)
-		console.log('error', error)
-	}
-</script>

components/element/TextArea.client.vue

@@ -1,31 +0,0 @@
-<template>
-	<textarea
-		class="bg-secondary w-full max-w-2xl resize-none border-none outline-none placeholder:text-zinc-700 focus:outline-none"
-		v-model="data"
-		:rows="props.row"
-		:placeholder="props.placeholder"
-		@input="updateData()">
-	</textarea>
-</template>
-
-<script setup lang="ts">
-	interface Props {
-		modelValue: string
-		placeholder?: string
-		row?: number
-	}
-
-	const props = defineProps<Props>()
-	const emit = defineEmits(['update:modelValue'])
-
-	const data = ref<string>(props.modelValue)
-
-	const updateData = () => {
-		emit('update:modelValue', data.value)
-	}
-
-	watch(
-		() => props.modelValue,
-		() => (data.value = props.modelValue)
-	)
-</script>

pages/notes/[id].vue

@@ -1,60 +1,48 @@
 <template>
-	<NuxtLayout
-		name="edit"
-		@keydown.ctrl.s.prevent="submit(note)">
+    <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"
+                <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"
+                <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'"
+                <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">
+                    v-model="input" @change="submit()">
 				</textarea>
-				<CardMarkdownRenderer
-					v-show="comp === 'md'"
-					:content="note.description"
-					:state="'description'" />
+                <CardMarkdownRenderer v-show="comp === 'md'" :content="note.description" :state="'description'" />
             </div>
         </template>
     </NuxtLayout>
 </template>
 
 <script setup lang="ts">
-	definePageMeta({
+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) => {
+const toggleComp = (name: Mode) => {
     comp.value = name
-	}
+}
 
-	const { refresh } = await useFetch('/api/note', {
+const { refresh } = await useFetch('/api/note', {
     method: 'GET',
     query: {
         id: route.params.id,
@@ -68,18 +56,24 @@
         }
         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 submit = async (note: Note) => {
+const submitTimeout = ref()
+
+const submit = async () => {
     isSubmitting.value = true
-		await submitNote(note, { id: route.params.id })
+
+    if (submitTimeout.value) clearTimeout(submitTimeout.value)
+
+    submitTimeout.value = setTimeout(async () => {
+        await submitNote(note.value, { id: route.params.id })
         isSubmitting.value = false
-	}
+    }, 1000)
+}
 
-	const deleteNote = async () => {
+const deleteNote = async () => {
     isDeleting.value = true
     await useFetch('/api/note', {
         method: 'DELETE',
@@ -92,19 +86,18 @@
             router.push('/notes')
         },
     })
-	}
+}
 
-	onMounted(() => {
+onMounted(() => {
     isLoading.value = true
     refresh()
     isLoading.value = false
-	})
+})
 
-	watch(
-		() => note.value.description,
+watch(
+    () => input.value,
     () => {
-			description.value = note.value.description
-			input.value = note.value.description
+        note.value.description = input.value
     }
-	)
+)
 </script>

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

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)
 

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