From 471df5e559549ad1869587e8adabafb47f1f0cd9 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 18 May 2024 15:45:17 +0200
Subject: [PATCH] Fixed loading error with calendar store

---
 components/calendar/Calendar.vue     | 51 +++++++++++++++++++++++-----
 components/calendar/CalendarMenu.vue |  5 ---
 pages/calendar/[id].vue              | 23 +------------
 stores/CalendarStore.ts              |  6 +++-
 stores/EventStore.ts                 | 24 +++----------
 5 files changed, 53 insertions(+), 56 deletions(-)

diff --git a/components/calendar/Calendar.vue b/components/calendar/Calendar.vue
index 6c39ec0..7bdc17f 100644
--- a/components/calendar/Calendar.vue
+++ b/components/calendar/Calendar.vue
@@ -7,11 +7,35 @@ import CenturyLayout from './state/centennially/Layout.vue'
 import DecadeLayout from './state/decennially/Layout.vue'
 import YearLayout from './state/yearly/Layout.vue'
 
-const { currentConfig } = useCalendar()
-const { selectedDate, jumpToDate } = useCalendar()
+const route = useRoute()
+const worldId = route.params.id
 
-const { fetchEvents } = useCalendarEvents()
-fetchEvents()
+const { setMonths, currentConfig, selectedDate, jumpToDate } = useCalendar()
+const { setEvents } = useCalendarEvents()
+
+const { data: calendar, pending, refresh } = await useLazyFetch(`/api/calendars/query?world_id=${worldId}`)
+
+if (!calendar.value) {
+  await refresh()
+} else {
+  if (calendar.value?.data?.months) {
+    setMonths(calendar.value?.data?.months)
+  }
+  if (calendar.value?.data?.events) {
+    setEvents(calendar.value?.data?.events)
+  }
+}
+
+watch(pending, (newStatus) => {
+  if (!newStatus) {
+    if (calendar.value?.data?.months) {
+      setMonths(calendar.value?.data?.months)
+    }
+    if (calendar.value?.data?.events) {
+      setEvents(calendar.value?.data?.events)
+    }
+  }
+})
 
 const currentViewComponent: ComputedRef<Component> = computed<Component>(() => {
   switch (currentConfig.viewType) {
@@ -36,11 +60,20 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="h-full grid grid-rows-[auto,1fr]">
-    <CalendarMenu />
+  <div class="h-full">
+    <template v-if="pending">
+      <div class="h-full grid place-items-center">
+        Loading notamment
+      </div>
+    </template>
+    <template v-else>
+      <div class="h-full grid grid-rows-[auto,1fr]">
+        <CalendarMenu />
 
-    <KeepAlive>
-      <component :is="currentViewComponent" />
-    </KeepAlive>
+        <KeepAlive>
+          <component :is="currentViewComponent"/>
+        </KeepAlive>
+      </div>
+    </template>
   </div>
 </template>
diff --git a/components/calendar/CalendarMenu.vue b/components/calendar/CalendarMenu.vue
index f9822cc..4c84849 100644
--- a/components/calendar/CalendarMenu.vue
+++ b/components/calendar/CalendarMenu.vue
@@ -2,11 +2,6 @@
 import { useCalendar } from '@/stores/CalendarStore'
 
 import { PhMagnifyingGlass } from '@phosphor-icons/vue'
-import CalendarMenuNav from './CalendarMenuNav.vue'
-import CalendarMenuSubnav from './CalendarMenuSubnav.vue'
-import CalendarMenuToday from './CalendarMenuToday.vue'
-import CalendarSwitch from './CalendarSwitch.vue'
-import CalendarCurrentDate from './CalendarCurrentDate.vue'
 
 const { revealAdvancedSearch } = useCalendar()
 </script>
diff --git a/pages/calendar/[id].vue b/pages/calendar/[id].vue
index 476d157..e96f4d1 100644
--- a/pages/calendar/[id].vue
+++ b/pages/calendar/[id].vue
@@ -17,33 +17,12 @@ 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" />
 
-    <template v-if="pending">
-      Loading là
-    </template>
-    <template v-else>
-      <Calendar />
-    </template>
+    <Calendar />
   </div>
 </template>
diff --git a/stores/CalendarStore.ts b/stores/CalendarStore.ts
index b3bb020..46c2698 100644
--- a/stores/CalendarStore.ts
+++ b/stores/CalendarStore.ts
@@ -256,7 +256,11 @@ export const useCalendar = defineStore('calendar', () => {
    */
   function getMonthName(monthNumber: number): string {
     const index = Number(monthNumber)
-    return sortedMonths.value[index].name
+    if (sortedMonths.value[index]) {
+      return sortedMonths.value[index].name
+    }
+
+    return ''
   }
 
   /**
diff --git a/stores/EventStore.ts b/stores/EventStore.ts
index dcd1056..125691f 100644
--- a/stores/EventStore.ts
+++ b/stores/EventStore.ts
@@ -8,8 +8,10 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
   const { currentDate, currentConfig } = useCalendar()
 
   const baseEvents = ref<CalendarEvent[]>([])
-  const eventsAreLoading = ref<boolean>(false)
-  const eventsLoaded = ref<boolean>(false)
+
+  function setEvents(data: CalendarEvent[]) {
+    baseEvents.value = data
+  }
 
   const allEvents = computed(() => baseEvents.value.sort((a, b) => {
     return compareDates(a.startDate, b.startDate, 'desc')
@@ -23,22 +25,6 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
     currentEvents.value = computeCurrentEvents()
   })
 
-  async function fetchEvents() {
-    try {
-      eventsAreLoading.value = true
-      const fetched = await useFetch<CalendarEvent[]>('/api/events')
-
-      if (fetched.data.value) {
-        eventsLoaded.value = true
-        baseEvents.value = fetched.data.value
-      }
-    } catch (err) {
-      console.log(err)
-    } finally {
-      eventsAreLoading.value = false
-    }
-  }
-
   /**
    * Determines if the event can appear in the front end
    *
@@ -210,5 +196,5 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
     }
   }
 
-  return { allEvents, eventsAreLoading, eventsLoaded, currentEvents, fetchEvents, getRelativeEventFromDate, getRelativeEventFromEvent }
+  return { allEvents, setEvents, currentEvents, getRelativeEventFromDate, getRelativeEventFromEvent }
 })