Changed lazy fetch for reactive store data

components/calendar/Calendar.vue

@@ -8,17 +8,6 @@ import CenturyLayout from "./state/centennially/Layout.vue"
 import DecadeLayout from "./state/decennially/Layout.vue"
 import YearLayout from "./state/yearly/Layout.vue"
 
-import type { Calendar } from "~/models/CalendarConfig"
-import type { Category } from "~/models/Category"
-
-const props = defineProps<{
-  calendarData: Calendar,
-  categories: Category[]
-}>()
-
-const { setActiveCalendar } = useCalendar()
-setActiveCalendar(props.calendarData, props.categories)
-
 const { currentConfig, jumpToDate, selectedDate } = useCalendar()
 const { isReadOnly } = storeToRefs(useCalendar())
 

pages/calendars/[id].vue

@@ -36,6 +36,14 @@ watch(user, () => {
   calRefresh()
   catRefresh()
 })
+
+const { setActiveCalendar } = useCalendar()
+watch(isLoading, (n) => {
+  if (!n && calendar.value?.data && categories.value?.data) {
+    setActiveCalendar(calendar.value?.data, categories.value.data)
+  }
+}, { immediate: true }
+)
 </script>
 
 <template>
@@ -57,7 +65,7 @@ watch(user, () => {
       <Title>{{ calendar.data.name }}</Title>
     </Head>
 
-    <Calendar :calendar-data="calendar.data" :categories="categories.data" />
+    <Calendar />
   </div>
 
   <div v-else class="h-full w-full grid place-items-center">

pages/my/calendars/[id].vue

@@ -34,12 +34,19 @@ const {
 
 const {
   data: categories,
-  status: categoriesStatus
+  status: categoriesStatus,
 } = await useLazyFetch<{ data: Category[] }>("/api/calendars/categories/query",
   { key: "active-categories" }
 )
-
 const isLoading = computed(() => calendarStatus.value === "pending" || categoriesStatus.value === "pending")
+
+const { setActiveCalendar } = useCalendar()
+watch(isLoading, (n) => {
+  if (!n && calendar.value?.data && categories.value?.data) {
+    setActiveCalendar(calendar.value?.data, categories.value.data)
+  }
+}, { immediate: true }
+)
 </script>
 
 <template>
@@ -72,7 +79,7 @@ const isLoading = computed(() => calendarStatus.value === "pending" || categorie
         />
       </div>
 
-      <Calendar :calendar-data="calendar.data" :categories="categories.data" />
+      <Calendar />
     </div>
   </div>