Fixed loading error with calendar store

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>

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>

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>

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 ''
   }
 
   /**

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 }
 })