From 059edd6fc1a45e201cd4ada7dd430d1806cb448c Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 17 May 2024 20:50:45 +0200
Subject: [PATCH] Added loading logic to calendar page

---
 components/calendar/Dashboard.vue | 16 ----------------
 pages/calendar/[id].vue           | 27 +++++++++++++++++++++++----
 stores/CalendarStore.ts           |  9 +++++++++
 3 files changed, 32 insertions(+), 20 deletions(-)
 delete mode 100644 components/calendar/Dashboard.vue

diff --git a/components/calendar/Dashboard.vue b/components/calendar/Dashboard.vue
deleted file mode 100644
index 1f7d678..0000000
--- a/components/calendar/Dashboard.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts" setup>
-const route = useRoute()
-const worldId = route.params.id
-
-const { months } = storeToRefs(useCalendar())
-
-const { data: res } = await useLazyFetch(`/api/calendars/query?world_id=${worldId}`)
-
-if (res.value?.data?.months) {
-  months.value = res.value?.data?.months
-}
-</script>
-
-<template>
-  <Calendar />
-</template>
diff --git a/pages/calendar/[id].vue b/pages/calendar/[id].vue
index 8e8abe7..476d157 100644
--- a/pages/calendar/[id].vue
+++ b/pages/calendar/[id].vue
@@ -1,16 +1,14 @@
 <script lang="ts" setup>
 import type { MenuItem } from '~/components/global/SidebarProps';
 
-const user = useSupabaseUser()
-
 useHead({
   title: 'Calendrier'
 })
-
 definePageMeta({
   middleware: ['auth-guard']
 })
 
+const user = useSupabaseUser()
 // Redirect user back home when they log out on the page
 watch(user, (n, _o) => {
   if (!n) {
@@ -19,12 +17,33 @@ watch(user, (n, _o) => {
 })
 
 const sidebarMenu: MenuItem[] = []
+
+const route = useRoute()
+const worldId = route.params.id
+
+const { setMonths } = useCalendar()
+const { months } = storeToRefs(useCalendar())
+
+const { data: calendar, pending, refresh } = await useLazyFetch(`/api/calendars/query?world_id=${worldId}`)
+
+if (calendar.value?.data?.months) {
+  if (!calendar.value) {
+    await refresh()
+  } else {
+    setMonths(calendar.value?.data?.months)
+  }
+}
 </script>
 
 <template>
   <div class="h-full grid grid-cols-[auto_1fr]">
     <Sidebar :menu-items="sidebarMenu" />
 
-    <CalendarDashboard />
+    <template v-if="pending">
+      Loading là
+    </template>
+    <template v-else>
+      <Calendar />
+    </template>
   </div>
 </template>
diff --git a/stores/CalendarStore.ts b/stores/CalendarStore.ts
index 651cce2..b3bb020 100644
--- a/stores/CalendarStore.ts
+++ b/stores/CalendarStore.ts
@@ -29,6 +29,14 @@ export const useCalendar = defineStore('calendar', () => {
    * Month list
    */
   const months: Ref<CalendarMonth[]> = ref<CalendarMonth[]>([])
+
+  function setMonths(data: CalendarMonth[]) {
+    months.value = data
+  }
+
+  /**
+   * Sorted month data
+   */
   const sortedMonths = computed<CalendarMonth[]>(() => months.value.sort((a, b) => a.position - b.position))
   const monthsPerYear = computed(() => months.value.length)
   const daysPerYear = computed(() => months.value.reduce((acc, o) => acc + o.days, 0))
@@ -332,6 +340,7 @@ export const useCalendar = defineStore('calendar', () => {
 
   return {
     months,
+    setMonths,
     sortedMonths,
     daysPerYear,
     monthsPerYear,