Fetch

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,16 +9,26 @@ 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()
+})
+
+const authStore = useAuthStore()
+useLazyAsyncData(() => authStore.init().then(() => true))
 </script>
 
 <template>
+  <NuxtLoadingIndicator />
   <NuxtLayout>
     <NuxtPage />
   </NuxtLayout>

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>

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>

error.vue

@@ -5,16 +5,16 @@
 
 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 ?? "",
+    ]),
   },
 })
 
 defineProps({
   error: Object as () => NuxtError,
 })
 
 const handleError = () => clearError({ redirect: "/" })

layouts/admin.vue

@@ -1,25 +1,13 @@
 <script lang="ts" setup>
-import type { Pengguna } from "@/types"
-import { ref } from "vue"
-
-const authStore = useAuthStore()
-
-const profile = ref<Pengguna | null>(null)
-
-onMounted(async () => {
-  await authStore.init()
-  authStore.$subscribe((_, state) => {
-    if (!state.profile) return
-
-    profile.value = state.profile
-  })
+const { data: profile } = await useAsyncData(async () => {
+  const authStore = useAuthStore()
+  return authStore.profile
 })
 </script>
 
 <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 />

layouts/default.vue

@@ -1,14 +1,5 @@
-<script setup lang="ts">
-const authStore = useAuthStore()
-
-onMounted(async () => {
-  await authStore.init()
-})
-</script>
-
 <template>
   <TheNavbar />
-  <NuxtLoadingIndicator />
   <main class="p-2 md:p-8">
     <slot />
   </main>

layouts/profile-edit.vue

@@ -1,11 +1,3 @@
-<script setup lang="ts">
-const authStore = useAuthStore()
-
-onMounted(async () => {
-  await authStore.init()
-})
-</script>
-
 <template>
   <NuxtLayout name="default">
     <div class="max-w-[100ch] mx-auto flex flex-col gap-4">

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"

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

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>
 

pages/index.vue

@@ -3,8 +3,10 @@ definePageMeta({
   layout: "default",
 })
 
-const authStore = useAuthStore()
-const { profile } = authStore
+const { data: profile } = await useLazyAsyncData(async () => {
+  const authStore = useAuthStore()
+  return authStore.profile
+})
 </script>
 
 <template>

pages/profil/edit.vue

@@ -13,16 +13,13 @@ useHead({
 
 definePageMeta({
   layout: "profile-edit",
+  middleware: "profil",
 })
 
 const authStore = useAuthStore()
-const supabaseUser = useSupabaseUser()
-const user = ref<Pengguna | null>(null)
 
-onMounted(async () => {
-  if (supabaseUser.value) {
-    user.value = await authStore.getProfile(supabaseUser.value.id)
-  }
+const { data: user } = await useAsyncData(async () => {
+  return authStore.profile
 })
 
 const toast = useToast()

pages/profil/index.vue

@@ -9,6 +9,7 @@ useHead({
 
 definePageMeta({
   layout: "default",
+  middleware: "profil",
 })
 
 const supabase = useSupabaseClient<Database>()

pages/profil/keamanan.vue

@@ -13,15 +13,17 @@ useHead({
 
 definePageMeta({
   layout: "profile-edit",
+  middleware: "profil",
 })
 
 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 +74,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>

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"