Refactor user.ts composable

assets/css/tailwind.css

@@ -14,3 +14,11 @@ body::-webkit-scrollbar,
 #__nuxt::-webkit-scrollbar {
 	@apply hidden;
 }
+
+input {
+	@apply bg-primary border-none p-2;
+}
+
+input:focus {
+	@apply bg-secondary border-none outline-none;
+}

components/header/Header.vue

@@ -1,22 +1,14 @@
 <template>
-	<div
+    <div class="bg-secondary flex h-fit w-full flex-row items-center justify-center p-2">
-		class="bg-secondary flex h-fit w-full flex-row items-center justify-center p-2">
+        <div class="flex w-full max-w-3xl items-center justify-between gap-4">
-		<div class="flex w-full max-w-3xl items-center justify-between gap-4">
+            <div class="flex items-center gap-4 hover:cursor-pointer" @click="navigateTo('/notes')">
-			<div
+                <Icon class="text-blue-500" name="fa6-solid:book-open" />
-				class="flex items-center gap-4 hover:cursor-pointer"
+                <p class="text-xl font-bold"> Notes </p>
-				@click="navigateTo('/notes')">
+            </div>
-				<Icon
+            <div class="flex w-fit justify-end">
-					class="text-blue-500"
+                <Icon class="bg-secondary rounded-full hover:cursor-pointer" @click="navigateTo('/profile')"
-					name="fa6-solid:book-open" />
+                    name="fa6-solid:circle-user" size="36" />
-				<p class="text-xl font-bold"> Notes </p>
+            </div>
-			</div>
+        </div>
-			<div class="flex w-fit justify-end">
+    </div>
-				<Icon
-					class="bg-secondary rounded-full hover:cursor-pointer"
-					@click="navigateTo('/profile')"
-					name="fa6-solid:circle-user"
-					size="36" />
-			</div>
-		</div>
-	</div>
 </template>

composables/user.ts

@@ -6,7 +6,7 @@ const userSchema = z.object({
 })
 
 const returnMain = () => {
-    navigateTo('/notes')
+    navigateTo('/')
 }
 
 const userSignOut = async () => {
@@ -24,8 +24,9 @@ const userSignIn = async (email: unknown, password: unknown) => {
 
     if (!parsedUser.success) return
 
-    const { data: user, error } =
+    const { error } = await useSupabaseAuthClient().auth.signInWithPassword(
-        await useSupabaseAuthClient().auth.signInWithPassword(parsedUser.data)
+        parsedUser.data
+    )
 
     if (error) return error
 
@@ -37,9 +38,7 @@ const userSignUp = async (email: unknown, password: unknown) => {
 
     if (!parsedUser.success) return
 
-    const { data: user, error } = await useSupabaseAuthClient().auth.signUp(
+    const { error } = await useSupabaseAuthClient().auth.signUp(parsedUser.data)
-        parsedUser.data
-    )
 
     if (error) return error
 

pages/notes/[id].vue

@@ -1,6 +1,9 @@
 <template>
     <NuxtLayout name="edit">
         <template #content>
+            <div class="mb-2 flex w-full">
+                <input type="text" v-model="note.title" placeholder="untitled" @change="submit()" />
+            </div>
             <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' }">

pages/notes/index.vue

@@ -16,8 +16,8 @@
         </div>
 
         <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-if="notes" class="flex w-full flex-col gap-4">
-                <div v-for="note in data.notes" :key="note.id">
+                <div v-for="note in notes" :key="note.id">
                     <LazyCardNote :id="note.id" :uuid="note.uuid" :title="note.title ? note.title : 'untitled'"
                         :description="note.description" />
                 </div>
@@ -34,7 +34,7 @@ definePageMeta({
 const router = useRouter()
 const isCreating = ref<boolean>(false)
 
-const { data: data, refresh } = await useFetch('/api/notes')
+const { data: notes, refresh } = await useFetch('/api/notes')
 
 const create = async () => {
     isCreating.value = true

server/api/notes.ts

@@ -1,8 +1,8 @@
-import { serverSupabaseUser, serverSupabaseClient } from '#supabase/server'
+import { serverSupabaseServiceRole, serverSupabaseUser } 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' })
@@ -13,5 +13,9 @@ export default defineEventHandler(async (event) => {
         .select('*')
         .eq('user_id', user.id)
 
-    return { notes: notes, error: error }
+    if (error) {
+        throw createError({ statusCode: 500, message: error })
+    }
+
+    return notes
 })