From ba65d09a00a37bdf6b88d80c9bfb2db85f77c3e9 Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Sun, 10 Nov 2024 21:17:56 +0700
Subject: [PATCH 01/15] fix: theme error

---
 app.vue                    | 18 ++++++++++--------
 components/ThemeToggle.vue |  2 +-
 error.vue                  |  8 ++++----
 stores/theme.ts            |  6 +++---
 4 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/app.vue b/app.vue
index 38029b43..a87d0049 100644
--- a/app.vue
+++ b/app.vue
@@ -1,10 +1,6 @@
 <script setup lang="ts">
 const themeStore = useThemeStore()
 
-onMounted(() => {
-  themeStore.theme = themeStore.getTheme()
-})
-
 useHead({
   titleTemplate: (title) => (title ? `${title} - Metschoo Library` : "Metschoo Library"),
   meta: [
@@ -13,13 +9,19 @@ useHead({
       content: "Aplikasi Perpustakan Metschoo.",
     },
   ],
-  htmlAttrs: {
-    class: computed(() => themeStore.theme),
-  },
   bodyAttrs: {
-    class: "bg-surface-100/80 dark:bg-surface-900 dark:text-gray-300",
+    class: computed(() => [
+      "bg-surface-100/80 dark:bg-surface-900 dark:text-gray-300",
+      // on the server themeStore.theme is always undefined
+      // so we pass an empty string like so
+      themeStore.theme ?? "",
+    ]),
   },
 })
+
+onMounted(() => {
+  themeStore.theme = themeStore.getTheme()
+})
 </script>
 
 <template>
diff --git a/components/ThemeToggle.vue b/components/ThemeToggle.vue
index 9caf9aa4..6a224c8b 100644
--- a/components/ThemeToggle.vue
+++ b/components/ThemeToggle.vue
@@ -11,7 +11,7 @@ function toggleTheme(theme: Theme) {
 </script>
 
 <template>
-  <button :title="`mode ${themeStore.theme}`" @click="toggleTheme(themeStore.theme)">
+  <button :title="`mode ${themeStore.theme}`" @click="toggleTheme(themeStore.theme ?? 'light')">
     <IconMoonCrescent v-if="themeStore.theme === 'dark'" />
     <IconSun v-else />
   </button>
diff --git a/error.vue b/error.vue
index 5026164f..ce62378b 100644
--- a/error.vue
+++ b/error.vue
@@ -5,11 +5,11 @@ const themeStore = useThemeStore()
 
 useHead({
   title: "404 Gak Ketemu",
-  htmlAttrs: {
-    class: computed(() => themeStore.theme),
-  },
   bodyAttrs: {
-    class: "bg-surface-100/80 dark:bg-surface-900 dark:text-gray-300",
+    class: computed(() => [
+      "bg-surface-100/80 dark:bg-surface-900 dark:text-gray-300",
+      themeStore.theme ?? "",
+    ]),
   },
 })
 
diff --git a/stores/theme.ts b/stores/theme.ts
index 4154fe88..c794728f 100644
--- a/stores/theme.ts
+++ b/stores/theme.ts
@@ -3,11 +3,11 @@ import type { Theme } from "@/types"
 
 export const useThemeStore = defineStore("theme", () => {
   const THEME_KEY = "ml-app-theme"
-  const theme: Ref<Theme> = ref("dark")
+  const theme = ref<Theme>()
 
   function getTheme(): Theme {
-    const storedTheme = ref(localStorage.getItem(THEME_KEY) || "dark")
-    return storedTheme.value as Theme
+    const storedTheme = localStorage.getItem(THEME_KEY) || "dark"
+    return storedTheme as Theme
   }
 
   function setTheme(targetTheme: Theme) {

From 2d494fb7dcd223d513e70e3bd3053124c926e79b Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Sun, 10 Nov 2024 21:23:13 +0700
Subject: [PATCH 02/15] fix: fetch data using useAsyncData

---
 layouts/default.vue         |  4 +---
 layouts/profile-edit.vue    |  4 +---
 pages/admin/buku/[isbn].vue | 44 ++++++++++++++-----------------------
 3 files changed, 19 insertions(+), 33 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 35d6015f..d0c726d1 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 const authStore = useAuthStore()
 
-onMounted(async () => {
-  await authStore.init()
-})
+useAsyncData(async () => await authStore.init())
 </script>
 
 <template>
diff --git a/layouts/profile-edit.vue b/layouts/profile-edit.vue
index a30b0904..0dfe57f0 100644
--- a/layouts/profile-edit.vue
+++ b/layouts/profile-edit.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 const authStore = useAuthStore()
 
-onMounted(async () => {
-  await authStore.init()
-})
+useAsyncData(async () => await authStore.init())
 </script>
 
 <template>
diff --git a/pages/admin/buku/[isbn].vue b/pages/admin/buku/[isbn].vue
index 962690ed..038b354d 100644
--- a/pages/admin/buku/[isbn].vue
+++ b/pages/admin/buku/[isbn].vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { StorageError } from "@supabase/storage-js"
 import { useDialog } from "@/composables"
-import type { Kategori } from "@/types"
-import type { PostgrestError, QueryData } from "@supabase/supabase-js"
+import type { PostgrestError } from "@supabase/supabase-js"
 
 import type { Database } from "~/types/database.types.ts"
 import IconArrowLeft from "~icons/mdi/arrow-left"
+import type { Buku } from "~/types"
 
 definePageMeta({
   layout: "admin",
@@ -14,43 +14,33 @@ definePageMeta({
 const supabase = useSupabaseClient<Database>()
 const isLoading = ref(false)
 
-const availableCategories = ref<Kategori[]>([])
 const router = useRouter()
 const currentRoute = useRoute()
 
 const isbn = currentRoute.params.isbn
-const bukuQuery = supabase
-  .from("buku")
-  .select("*, kategori_buku(kategori)")
-  .eq("no_isbn", isbn)
-  .single()
 
 const { dialog } = useDialog()
 const { dialog: errDialog } = useDialog()
 
-type Buku = QueryData<typeof bukuQuery>
-const buku = ref<Buku | null>(null)
+const { data: buku } = await useAsyncData(async () => {
+  const { data, error } = await supabase
+    .from("buku")
+    .select("*, kategori_buku(kategori)")
+    .eq("no_isbn", isbn)
+    .single()
 
-async function ambilBuku(): Promise<Buku | null> {
-  try {
-    isLoading.value = true
-    const { data, error } = await bukuQuery
-    if (error) throw error
-    return data
-  } catch (err) {
-    console.trace((err as PostgrestError).message)
-    errDialog.value.open(`Buku dengan ISBN ${isbn} tidak ditemukan.`)
-    return null
-  } finally {
-    isLoading.value = false
+  if (error) {
+    console.error(error.message)
+    throw error
   }
-}
 
-onMounted(async () => {
-  buku.value = await ambilBuku()
-  availableCategories.value = await getAllAvailableCategories()
+  return data
 })
 
+const { data: availableCategories } = await useAsyncData(
+  async () => await getAllAvailableCategories()
+)
+
 async function editBook(buku: Buku) {
   try {
     const { error } = await supabase
@@ -185,7 +175,7 @@ function toggleFormVisibility() {
         <Select
           v-model="buku.kategori_id"
           placeholder="Pilih kategori"
-          :options="availableCategories"
+          :options="availableCategories ?? []"
           checkmark
           option-label="kategori"
           option-value="id"

From 09df81a225ff20c1be7bf2581e9c4976299a3e8d Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Sun, 10 Nov 2024 21:47:36 +0700
Subject: [PATCH 03/15] fix: simplify data fetching on profil pages

---
 pages/profil/edit.vue     |  5 ++---
 pages/profil/keamanan.vue | 10 ++--------
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/pages/profil/edit.vue b/pages/profil/edit.vue
index 63933864..8e8e99fd 100644
--- a/pages/profil/edit.vue
+++ b/pages/profil/edit.vue
@@ -17,11 +17,10 @@ definePageMeta({
 
 const authStore = useAuthStore()
 const supabaseUser = useSupabaseUser()
-const user = ref<Pengguna | null>(null)
 
-onMounted(async () => {
+const { data: user } = await useAsyncData(async () => {
   if (supabaseUser.value) {
-    user.value = await authStore.getProfile(supabaseUser.value.id)
+    return await authStore.getProfile(supabaseUser.value.id)
   }
 })
 
diff --git a/pages/profil/keamanan.vue b/pages/profil/keamanan.vue
index 11bf91cc..0069a99d 100644
--- a/pages/profil/keamanan.vue
+++ b/pages/profil/keamanan.vue
@@ -16,12 +16,13 @@ definePageMeta({
 })
 
 const supabase = useSupabaseClient<Database>()
+const user = useSupabaseUser()
 
 const { dialog } = useDialog()
 const kredensialPengguna = ref({
   password: "",
   passwordKonfirmasi: "",
-  email: "",
+  email: user.value.email,
 })
 
 async function ubahKredensial() {
@@ -72,13 +73,6 @@ async function signOut() {
   await authStore.handleSignOut()
   router.push("/")
 }
-
-onMounted(async () => {
-  authStore.$subscribe((_, state) => {
-    if (!state.profile) return
-    kredensialPengguna.value.email = state.profile.email
-  })
-})
 </script>
 
 <template>

From efd11de9f1366fad5fb5b15e9b5c34f56ba72241 Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Sun, 10 Nov 2024 21:49:26 +0700
Subject: [PATCH 04/15] fix: simplify wishlist fetching

---
 pages/wishlist.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/pages/wishlist.vue b/pages/wishlist.vue
index cbed81f1..5753261d 100644
--- a/pages/wishlist.vue
+++ b/pages/wishlist.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Buku } from "@/types/"
-import type { PostgrestError, QueryData } from "@supabase/supabase-js"
+import type { PostgrestError } from "@supabase/supabase-js"
 
 import Toast from "primevue/toast"
 import { useToast } from "primevue/usetoast"
@@ -17,8 +17,6 @@ definePageMeta({
 const supabase = useSupabaseClient<Database>()
 
 const wishlistQuery = supabase.from("wishlist").select("*, buku(*)")
-type Wishlist = QueryData<typeof wishlistQuery>
-const wishlist = ref<Wishlist>([])
 
 async function ambilWishlist() {
   try {
@@ -31,8 +29,7 @@ async function ambilWishlist() {
   }
 }
 
-const { data } = useAsyncData(async () => await ambilWishlist())
-wishlist.value = data.value ?? []
+const { data: wishlist } = useAsyncData(async () => await ambilWishlist())
 
 const toast = useToast()
 
@@ -81,7 +78,7 @@ const user = useSupabaseUser()
     </section>
 
     <section v-else class="main-section">
-      <p v-if="!wishlist.length">Kamu belum punya apa-apa dalam wishlist kamu.</p>
+      <p v-if="!wishlist">Kamu belum punya apa-apa dalam wishlist kamu.</p>
       <ul v-else class="book-list">
         <WishlistBook
           v-for="wishlistItem in wishlist"

From 884b3825c13942cd24e9ca57573c8d5df7ca3683 Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Sun, 10 Nov 2024 21:54:56 +0700
Subject: [PATCH 05/15] fix: simplify data fetching in admin

---
 layouts/admin.vue | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/layouts/admin.vue b/layouts/admin.vue
index 7e01b310..1d3eb858 100644
--- a/layouts/admin.vue
+++ b/layouts/admin.vue
@@ -1,18 +1,11 @@
 <script lang="ts" setup>
-import type { Pengguna } from "@/types"
-import { ref } from "vue"
-
 const authStore = useAuthStore()
+const user = useSupabaseUser()
 
-const profile = ref<Pengguna | null>(null)
-
-onMounted(async () => {
-  await authStore.init()
-  authStore.$subscribe((_, state) => {
-    if (!state.profile) return
+await authStore.init()
 
-    profile.value = state.profile
-  })
+const { data: profile } = await useAsyncData(async () => {
+  return await authStore.getProfile(user.value.id)
 })
 </script>
 

From ad11e74d7e6c40caefa0c59b8e3f04a339d94b0e Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Tue, 12 Nov 2024 21:10:30 +0700
Subject: [PATCH 06/15] fix: prevent hydration mismatch errors

rebase hydration mismatch
---
 layouts/admin.vue | 11 +++++------
 pages/index.vue   |  6 ++++--
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/layouts/admin.vue b/layouts/admin.vue
index 1d3eb858..4348626e 100644
--- a/layouts/admin.vue
+++ b/layouts/admin.vue
@@ -1,11 +1,10 @@
 <script lang="ts" setup>
-const authStore = useAuthStore()
-const user = useSupabaseUser()
-
-await authStore.init()
-
 const { data: profile } = await useAsyncData(async () => {
-  return await authStore.getProfile(user.value.id)
+  const authStore = useAuthStore()
+  const user = useSupabaseUser()
+
+  await authStore.init()
+  return authStore.profile
 })
 </script>
 
diff --git a/pages/index.vue b/pages/index.vue
index 15a526cd..f22b668f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,8 +3,10 @@ definePageMeta({
   layout: "default",
 })
 
-const authStore = useAuthStore()
-const { profile } = authStore
+const { data: profile } = await useAsyncData(async () => {
+  const authStore = useAuthStore()
+  return authStore.profile
+})
 </script>
 
 <template>

From 4f433536d3c39cfe266269380dfdb0cc3ddcf744 Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Tue, 12 Nov 2024 21:29:56 +0700
Subject: [PATCH 07/15] fix: change middleware to only run on route, fix
 netlify deploy

---
 middleware/{profil.global.ts => profil.ts} | 0
 pages/profil/keamanan.vue                  | 3 ++-
 2 files changed, 2 insertions(+), 1 deletion(-)
 rename middleware/{profil.global.ts => profil.ts} (100%)

diff --git a/middleware/profil.global.ts b/middleware/profil.ts
similarity index 100%
rename from middleware/profil.global.ts
rename to middleware/profil.ts
diff --git a/pages/profil/keamanan.vue b/pages/profil/keamanan.vue
index 0069a99d..d744b702 100644
--- a/pages/profil/keamanan.vue
+++ b/pages/profil/keamanan.vue
@@ -13,6 +13,7 @@ useHead({
 
 definePageMeta({
   layout: "profile-edit",
+  middleware: "profil",
 })
 
 const supabase = useSupabaseClient<Database>()
@@ -22,7 +23,7 @@ const { dialog } = useDialog()
 const kredensialPengguna = ref({
   password: "",
   passwordKonfirmasi: "",
-  email: user.value.email,
+  email: user.value!.email,
 })
 
 async function ubahKredensial() {

From 26dff0650bc181608531eceb7e3d475d87c5a280 Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Tue, 12 Nov 2024 21:47:03 +0700
Subject: [PATCH 08/15] move loading indicator to app.vue

---
 app.vue             | 1 +
 layouts/admin.vue   | 1 -
 layouts/default.vue | 1 -
 3 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/app.vue b/app.vue
index a87d0049..f8413c08 100644
--- a/app.vue
+++ b/app.vue
@@ -25,6 +25,7 @@ onMounted(() => {
 </script>
 
 <template>
+  <NuxtLoadingIndicator />
   <NuxtLayout>
     <NuxtPage />
   </NuxtLayout>
diff --git a/layouts/admin.vue b/layouts/admin.vue
index 4348626e..ef4bffbe 100644
--- a/layouts/admin.vue
+++ b/layouts/admin.vue
@@ -11,7 +11,6 @@ const { data: profile } = await useAsyncData(async () => {
 <template>
   <div class="grid flex-1 wrapper">
     <TheNavbar />
-    <NuxtLoadingIndicator />
     <AdminSidebar :profile="profile" />
     <main class="p-4 flex flex-col align-stretch gap-4 mx-auto">
       <slot />
diff --git a/layouts/default.vue b/layouts/default.vue
index d0c726d1..5dc4e764 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -6,7 +6,6 @@ useAsyncData(async () => await authStore.init())
 
 <template>
   <TheNavbar />
-  <NuxtLoadingIndicator />
   <main class="p-2 md:p-8">
     <slot />
   </main>

From f04cd472e4fcb7374732e00f18fdf91aaca4486a Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Tue, 12 Nov 2024 22:16:09 +0700
Subject: [PATCH 09/15] fix: simplify data fetching in admin/pengguna

---
 pages/admin/pengguna/index.vue | 25 ++++++++++---------------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/pages/admin/pengguna/index.vue b/pages/admin/pengguna/index.vue
index 4da9b38c..73863cd3 100644
--- a/pages/admin/pengguna/index.vue
+++ b/pages/admin/pengguna/index.vue
@@ -14,23 +14,18 @@ const supabase = useSupabaseClient<Database>()
 const toast = useToast()
 
 const { data: penggunas } = await useAsyncData(async () => {
-  try {
-    const { data, error } = await supabase.from("pengguna").select("*, pengguna_roles(name)")
-    if (error) {
-      toast.add({
-        severity: "error",
-        summary: "Gagal mengambil data",
-        detail: "Gagal mengambil data pengguna, silahkan coba lagi.",
-      })
-    }
+  const { data, error } = await supabase.from("pengguna").select("*, pengguna_roles(name)")
+  if (error) {
+    toast.add({
+      severity: "error",
+      summary: "Gagal mengambil data",
+      detail: "Gagal mengambil data pengguna, silahkan coba lagi.",
+    })
+  }
 
-    if (error) throw error
+  if (error) throw error
 
-    return data
-  } catch (err) {
-    console.error(err)
-    return null
-  }
+  return data
 })
 </script>
 

From 32bb8d7ec962e46e9ae3ff15f58bec4cf5f4c983 Mon Sep 17 00:00:00 2001
From: Efraim <efrayanglain@gmail.com>
Date: Tue, 12 Nov 2024 11:47:55 +0700
Subject: [PATCH 10/15] fix: add id to useasyncdata to fix fetch bug

---
 components/home/BookList.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/components/home/BookList.vue b/components/home/BookList.vue
index c40cd5d8..179f6b39 100644
--- a/components/home/BookList.vue
+++ b/components/home/BookList.vue
@@ -8,9 +8,7 @@ interface Props {
 
 const { typeId } = defineProps<Props>()
 
-const isLoading = ref(false)
-
-const { data: bukus } = await useAsyncData(async () => {
+const { data: bukus } = await useAsyncData(String(typeId), async () => {
   try {
     return await getBukus(typeId)
   } catch (err) {
@@ -21,8 +19,7 @@ const { data: bukus } = await useAsyncData(async () => {
 
 <template>
   <ul class="book-list">
-    <LoadingSpinner v-if="isLoading" />
-    <li v-if="!isLoading && !bukus">Bukunya ga ada gaes</li>
+    <li v-if="!bukus">Bukunya ga ada gaes</li>
     <BookItem v-for="buku in bukus" v-else :key="buku.no_isbn" :buku="buku as Buku" />
   </ul>
 </template>

From aa56a8c91b5a98edb8a9d454eec41dd80d18b5b4 Mon Sep 17 00:00:00 2001
From: Efraim <efrayanglain@gmail.com>
Date: Wed, 13 Nov 2024 09:31:32 +0700
Subject: [PATCH 11/15] fix: return value in useAsyncData

---
 layouts/default.vue      | 2 +-
 layouts/profile-edit.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 5dc4e764..a85fefd5 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const authStore = useAuthStore()
 
-useAsyncData(async () => await authStore.init())
+await useAsyncData(() => authStore.init().then(() => true))
 </script>
 
 <template>
diff --git a/layouts/profile-edit.vue b/layouts/profile-edit.vue
index 0dfe57f0..dce60e25 100644
--- a/layouts/profile-edit.vue
+++ b/layouts/profile-edit.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const authStore = useAuthStore()
 
-useAsyncData(async () => await authStore.init())
+await useAsyncData(() => authStore.init().then(() => true))
 </script>
 
 <template>

From 17adb5c9957a19f5fea31862efa6c611cbf43eee Mon Sep 17 00:00:00 2001
From: Efraim <efrayanglain@gmail.com>
Date: Wed, 13 Nov 2024 09:31:54 +0700
Subject: [PATCH 12/15] forgot middleware

---
 pages/profil/edit.vue  | 6 ++----
 pages/profil/index.vue | 1 +
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/pages/profil/edit.vue b/pages/profil/edit.vue
index 8e8e99fd..53a03a07 100644
--- a/pages/profil/edit.vue
+++ b/pages/profil/edit.vue
@@ -13,15 +13,13 @@ useHead({
 
 definePageMeta({
   layout: "profile-edit",
+  middleware: "profil",
 })
 
 const authStore = useAuthStore()
-const supabaseUser = useSupabaseUser()
 
 const { data: user } = await useAsyncData(async () => {
-  if (supabaseUser.value) {
-    return await authStore.getProfile(supabaseUser.value.id)
-  }
+  return authStore.profile
 })
 
 const toast = useToast()
diff --git a/pages/profil/index.vue b/pages/profil/index.vue
index 70c4c239..79a6b83e 100644
--- a/pages/profil/index.vue
+++ b/pages/profil/index.vue
@@ -9,6 +9,7 @@ useHead({
 
 definePageMeta({
   layout: "default",
+  middleware: "profil",
 })
 
 const supabase = useSupabaseClient<Database>()

From b3b78cae3c8719ce9cf979d2922c106b4622be75 Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Tue, 12 Nov 2024 21:10:30 +0700
Subject: [PATCH 13/15] fix: prevent hydration mismatch errors

---
 layouts/admin.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/layouts/admin.vue b/layouts/admin.vue
index ef4bffbe..01682297 100644
--- a/layouts/admin.vue
+++ b/layouts/admin.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 const { data: profile } = await useAsyncData(async () => {
   const authStore = useAuthStore()
-  const user = useSupabaseUser()
 
   await authStore.init()
   return authStore.profile

From f87d03092cdace35136f9bdf1c2e4e2fac4fcedf Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Sat, 16 Nov 2024 21:17:18 +0700
Subject: [PATCH 14/15] fix: move auth initialization to app.vue

---
 app.vue                  | 3 +++
 layouts/admin.vue        | 2 --
 layouts/default.vue      | 6 ------
 layouts/profile-edit.vue | 6 ------
 4 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/app.vue b/app.vue
index f8413c08..e8ef1ffa 100644
--- a/app.vue
+++ b/app.vue
@@ -22,6 +22,9 @@ useHead({
 onMounted(() => {
   themeStore.theme = themeStore.getTheme()
 })
+
+const authStore = useAuthStore()
+useLazyAsyncData(() => authStore.init().then(() => true))
 </script>
 
 <template>
diff --git a/layouts/admin.vue b/layouts/admin.vue
index 01682297..89f8b7b4 100644
--- a/layouts/admin.vue
+++ b/layouts/admin.vue
@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 const { data: profile } = await useAsyncData(async () => {
   const authStore = useAuthStore()
-
-  await authStore.init()
   return authStore.profile
 })
 </script>
diff --git a/layouts/default.vue b/layouts/default.vue
index a85fefd5..f4385a50 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,9 +1,3 @@
-<script setup lang="ts">
-const authStore = useAuthStore()
-
-await useAsyncData(() => authStore.init().then(() => true))
-</script>
-
 <template>
   <TheNavbar />
   <main class="p-2 md:p-8">
diff --git a/layouts/profile-edit.vue b/layouts/profile-edit.vue
index dce60e25..aca280b4 100644
--- a/layouts/profile-edit.vue
+++ b/layouts/profile-edit.vue
@@ -1,9 +1,3 @@
-<script setup lang="ts">
-const authStore = useAuthStore()
-
-await useAsyncData(() => authStore.init().then(() => true))
-</script>
-
 <template>
   <NuxtLayout name="default">
     <div class="max-w-[100ch] mx-auto flex flex-col gap-4">

From 19aace12d4fe902d31231f5d3958c8ce97fbdce6 Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Sat, 16 Nov 2024 21:46:12 +0700
Subject: [PATCH 15/15] fix: change useAsyncData to lazyAsyncData

---
 pages/admin/index.vue | 6 +++---
 pages/index.vue       | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/pages/admin/index.vue b/pages/admin/index.vue
index 2920423d..08fa6fbd 100644
--- a/pages/admin/index.vue
+++ b/pages/admin/index.vue
@@ -26,7 +26,7 @@ const _peminjamanQuery = supabase
   .from("peminjaman")
   .select("*, peminjaman_state(name), pengguna(nama, kelas, jurusan), buku(*)")
 export type PeminjamanData = QueryData<typeof _peminjamanQuery>
-const { data: allPeminjamanData } = useAsyncData(async () => await getPeminjamanData())
+const { data: allPeminjamanData } = useLazyAsyncData(async () => await getPeminjamanData())
 
 const peminjamanData = computed(() => {
   if (!allPeminjamanData.value) return null
@@ -38,9 +38,9 @@ const peminjamanData = computed(() => {
   return { bukusBorrowConfirmed, bukusBorrowPending, bukusReturnPending }
 })
 
-const { data: counts } = await useAsyncData(async () => {
+const { data: counts } = await useLazyAsyncData(async () => {
   const [bukuCount, penggunaCount] = await Promise.all([countBukus(), countPenggunas()])
-  return { bukuCount, penggunaCount }
+  return { bukuCount: bukuCount ?? 0, penggunaCount: penggunaCount ?? 0 }
 })
 
 onMounted(async () => {
diff --git a/pages/index.vue b/pages/index.vue
index f22b668f..57b516e3 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,7 +3,7 @@ definePageMeta({
   layout: "default",
 })
 
-const { data: profile } = await useAsyncData(async () => {
+const { data: profile } = await useLazyAsyncData(async () => {
   const authStore = useAuthStore()
   return authStore.profile
 })