Fixed issue with calendar today loading

components/calendar/Calendar.vue

@@ -8,7 +8,7 @@ import CenturyLayout from './state/centennially/Layout.vue'
 import DecadeLayout from './state/decennially/Layout.vue'
 import YearLayout from './state/yearly/Layout.vue'
 
-const { currentConfig, selectedDate, jumpToDate } = useCalendar()
+const { currentConfig, jumpToDate, selectedDate } = useCalendar()
 
 // const { setCharacters } = useCharacters()
 

pages/i/calendar/[id].vue

@@ -18,7 +18,7 @@ const route = useRoute()
 const id = route.params.id
 const calendarStore = useCalendar()
 
-const { pending: calendarPending } = await useAsyncData('calendar', () => calendarStore.fetchCalendar(Number(id)).then(() => true))
+const { pending: calendarPending } = await useAsyncData('calendar', async () => await calendarStore.fetchCalendar(Number(id)))
 </script>
 
 <template>

stores/CalendarStore.ts

@@ -2,8 +2,8 @@ import {
   type RPGDate,
   type RPGDateOrder,
 } from '@/models/Date'
-import { useLocalStorage, useUrlSearchParams } from '@vueuse/core'
+import { useUrlSearchParams } from '@vueuse/core'
-import { defineStore, skipHydrate } from 'pinia'
+import { defineStore } from 'pinia'
 import { computed, ref, type ComputedRef, type Ref } from 'vue'
 import type { Calendar } from '~/models/CalendarConfig'
 import type { CalendarEvent } from '~/models/CalendarEvent'
@@ -25,8 +25,9 @@ type CalendarCurrentDate = {
 }
 
 export const useCalendar = defineStore('calendar', () => {
-  const route = useRoute()
+  const params = useUrlSearchParams('history', {
-  const isCalendarView: boolean = route.name === 'i-calendar-id'
+    write: false
+  })
 
   /**
    * Static calendar config
@@ -62,6 +63,19 @@ export const useCalendar = defineStore('calendar', () => {
         today: calendarData.today
       }
 
+      setDefaultDate(activeCalendar.value.today)
+      selectDate(activeCalendar.value.today)
+
+      if (!params.day) {
+        params.day = defaultDate.value.day.toString()
+      }
+      if (!params.month) {
+        params.month = defaultDate.value.month.toString()
+      }
+      if (!params.year) {
+        params.year = defaultDate.value.year.toString()
+      }
+
       months.value = calendarData.months
 
       baseEvents.value = calendarData.events
@@ -80,43 +94,24 @@ export const useCalendar = defineStore('calendar', () => {
 
   // Default date settings (current day in the world)
   // The base setting is the first day / month of year 0
-  // const defaultDay: Ref<number> = ref<number>(1)
+  const defaultDay: Ref<number> = ref<number>(1)
-  // const defaultMonth: Ref<number> = ref<number>(0)
+  const defaultMonth: Ref<number> = ref<number>(0)
-  // const defaultYear: Ref<number> = ref<number>(0)
+  const defaultYear: Ref<number> = ref<number>(0)
 
   // Object representation
-  const defaultDate: ComputedRef<RPGDate> = computed(() => {
+  const defaultDate = computed<RPGDate>(() => {
     return {
-      day: activeCalendar.value?.today.day || 1,
+      day: defaultDay.value,
-      month: activeCalendar.value?.today.month || 0,
+      month: defaultMonth.value,
-      year: activeCalendar.value?.today.year || 0
+      year: defaultYear.value
     }
   })
 
-  // Set initial value for url search params
+  function setDefaultDate(date: RPGDate): void {
-  // The route needs to be check because it should proc the params on anything BUT the calendar route
+    defaultDay.value = date.day
-  let initialParams: { day?: string, month?: string, year?: string } = {}
+    defaultMonth.value = date.month
-
+    defaultYear.value = date.year
-  if (isCalendarView) {
-    initialParams = {
-      day: defaultDate.value.day.toString(),
-      month: defaultDate.value.month.toString(),
-      year: defaultDate.value.year.toString()
   }
-  }
-
-  // Get date from URL params
-  const params = useUrlSearchParams('history', {
-    write: false,
-    initialValue: initialParams,
-  })
-
-  // Everytime the defaultDate changes / is set, we should update the params in the URL
-  watch(defaultDate, () => {
-    params.day = String(defaultDate.value.day)
-    params.month = String(defaultDate.value.month)
-    params.year = String(defaultDate.value.year)
-  })
 
   const currentDay = computed<number>(() => {
     return Number(params.day)
@@ -175,14 +170,7 @@ export const useCalendar = defineStore('calendar', () => {
     }
   })
 
-  const selectedDate = useLocalStorage<RPGDate>('selected-date', currentRPGDate.value, { deep: true })
+  const selectedDate = ref<RPGDate>({...defaultDate.value})
-
-  // Same check as above, for selectedDate history
-  if (isCalendarView) {
-    params.day = selectedDate.value.day.toString()
-    params.month = selectedDate.value.month.toString()
-    params.year = selectedDate.value.year.toString()
-  }
 
   /**
    * Check whether the current viewType is active
@@ -896,8 +884,8 @@ export const useCalendar = defineStore('calendar', () => {
     currentDate,
     currentRPGDate,
     currentMonthData,
-    defaultDate,
+    defaultDate: defaultDate,
-    selectedDate: skipHydrate(selectedDate),
+    selectedDate: selectedDate,
     selectDate,
     params,
     incrementViewMonth,