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>