Moved data to api server route

components/calendar/Calendar.vue

@@ -10,6 +10,7 @@ import DecadeLayout from './state/decennially/Layout.vue'
 import YearLayout from './state/yearly/Layout.vue'
 
 const { currentConfig } = useCalendar()
+const { eventsLoaded, eventsAreLoading } = storeToRefs(useCalendarEvents())
 
 const currentViewComponent: ComputedRef<Component> = computed<Component>(() => {
   switch (currentConfig.viewType) {
@@ -32,8 +33,14 @@ const currentViewComponent: ComputedRef<Component> = computed<Component>(() => {
 <template>
   <div class="h-full grid grid-rows-[auto,1fr]">
     <CalendarMenu />
-    <KeepAlive>
-      <component :is="currentViewComponent" />
-    </KeepAlive>
+
+    <template v-if="eventsAreLoading">
+      <div>
+        Loading
+      </div>
+    </template>
+    <template v-else-if="eventsLoaded">
+      <component :is="currentViewComponent" v-if="eventsLoaded" />
+    </template>
   </div>
 </template>

components/calendar/CalendarMenuToday.vue

@@ -8,11 +8,9 @@ import { areDatesIdentical } from '@/models/Date'
 const { defaultDate, selectedDate } = storeToRefs(useCalendar())
 const { jumpToDefaultDate, getFormattedDateTitle } = useCalendar()
 
-const defaultDateFormatted = getFormattedDateTitle(defaultDate.value, true)
+const defaultDateFormatted: string = getFormattedDateTitle(defaultDate.value, true)
 
-const isDefaultDate = computed(() => {
-  return areDatesIdentical(selectedDate.value, defaultDate.value)
-})
+const isDefaultDate: ComputedRef<boolean> = computed<boolean>(() => areDatesIdentical(selectedDate.value, defaultDate.value))
 </script>
 
 <template>

components/calendar/search/CalendarSearch.vue

@@ -30,10 +30,10 @@ import {
 
 import SearchList from './lists/SearchList.vue'
 
-const { characters } = useCharacters()
-const { allEvents } = useCalendarEvents()
+const { characters } = storeToRefs(useCharacters())
+const { allEvents } = storeToRefs(useCalendarEvents())
 
-const modalOpen = defineModel({ default: false })
+const modalOpen = defineModel<boolean>({ default: false })
 
 const searchQuery = ref<string>('')
 // const searchEnough = computed<boolean>(() => searchQuery.value.length >= 2)
@@ -73,11 +73,11 @@ const searchResults = computed<(Character | CalendarEvent)[]>(() => {
   // Assign data to loop over and filter
   // They are assigned this way for readability
   if (selectedEntity.value === 'events') {
-    dataToFilter = allEvents
+    dataToFilter = allEvents.value
   } else if (selectedEntity.value === 'characters') {
-    dataToFilter = characters
+    dataToFilter = characters.value
   } else {
-    dataToFilter = [...allEvents, ...characters]
+    dataToFilter = [...allEvents.value, ...characters.value]
   }
 
   /**