From ee368f28c2ba8603610d0b5689080bd989f533d2 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 27 Apr 2024 16:46:43 +0200
Subject: [PATCH] Optimized unnecessary reactivity

---
 src/components/calendar/Calendar.vue          |  8 ++--
 src/components/calendar/CalendarEvent.vue     |  2 +-
 .../calendar/CalendarEventDetails.vue         |  3 +-
 src/components/calendar/CalendarMenuToday.vue |  2 +-
 .../calendar/search/CalendarSearch.vue        |  4 +-
 .../calendar/state/monthly/Layout.vue         |  6 +--
 .../calendar/state/yearly/DayTile.vue         | 23 +++++++--
 .../calendar/state/yearly/Layout.vue          | 12 ++---
 .../calendar/state/yearly/MonthTile.vue       |  9 ++--
 src/stores/CalendarStore.ts                   |  3 +-
 src/stores/CharacterStore.ts                  |  9 +---
 src/stores/EventStore.ts                      | 48 ++++++++-----------
 12 files changed, 63 insertions(+), 66 deletions(-)

diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index dd739ea..746d0c9 100644
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useCalendar } from '@/stores/CalendarStore'
-import { computed } from 'vue'
+import { computed, type Component, type ComputedRef } from 'vue'
 
 import CalendarMenu from './CalendarMenu.vue'
 
@@ -11,7 +11,7 @@ import YearLayout from './state/yearly/Layout.vue'
 
 const { currentConfig } = useCalendar()
 
-const currentViewComponent = computed(() => {
+const currentViewComponent: ComputedRef<Component> = computed<Component>(() => {
   switch (currentConfig.viewType) {
     case 'month':
       return MonthlyLayout
@@ -32,6 +32,8 @@ const currentViewComponent = computed(() => {
 <template>
   <div class="h-full grid grid-rows-[auto,1fr]">
     <CalendarMenu />
-    <component :is="currentViewComponent" />
+    <KeepAlive>
+      <component :is="currentViewComponent" />
+    </KeepAlive>
   </div>
 </template>
diff --git a/src/components/calendar/CalendarEvent.vue b/src/components/calendar/CalendarEvent.vue
index 0feb07e..234b1f8 100644
--- a/src/components/calendar/CalendarEvent.vue
+++ b/src/components/calendar/CalendarEvent.vue
@@ -33,6 +33,6 @@ defineProps<{
       </button>
     </PopoverTrigger>
 
-    <CalendarEventDetails :event />
+    <CalendarEventDetails :event v-once />
   </Popover>
 </template>
diff --git a/src/components/calendar/CalendarEventDetails.vue b/src/components/calendar/CalendarEventDetails.vue
index ca1e9ec..2211918 100644
--- a/src/components/calendar/CalendarEventDetails.vue
+++ b/src/components/calendar/CalendarEventDetails.vue
@@ -2,7 +2,6 @@
 import { getRelativeString } from '@/models/Date'
 import type { CalendarEvent } from '@/models/Events'
 import { useCalendar } from '@/stores/CalendarStore'
-import { computed } from 'vue'
 
 import { PhHourglassMedium } from '@phosphor-icons/vue'
 import { Badge } from '@/components/ui/badge'
@@ -12,7 +11,7 @@ const { defaultDate, getFormattedDateTitle } = useCalendar()
 
 const props = defineProps<{ event: CalendarEvent }>()
 
-const dateDifference = computed(() => getRelativeString(defaultDate, props.event.date))
+const dateDifference: string = getRelativeString(defaultDate, props.event.date)
 </script>
 
 <template>
diff --git a/src/components/calendar/CalendarMenuToday.vue b/src/components/calendar/CalendarMenuToday.vue
index f660bf0..0c3e2b7 100644
--- a/src/components/calendar/CalendarMenuToday.vue
+++ b/src/components/calendar/CalendarMenuToday.vue
@@ -10,7 +10,7 @@ import { areDatesIdentical } from '@/models/Date'
 const { defaultDate, selectedDate } = storeToRefs(useCalendar())
 const { jumpToDefaultDate, getFormattedDateTitle } = useCalendar()
 
-const defaultDateFormatted = computed(() => getFormattedDateTitle(defaultDate.value, true))
+const defaultDateFormatted = getFormattedDateTitle(defaultDate.value, true)
 
 const isDefaultDate = computed(() => {
   return areDatesIdentical(selectedDate.value, defaultDate.value)
diff --git a/src/components/calendar/search/CalendarSearch.vue b/src/components/calendar/search/CalendarSearch.vue
index 91623c7..e001f6e 100644
--- a/src/components/calendar/search/CalendarSearch.vue
+++ b/src/components/calendar/search/CalendarSearch.vue
@@ -289,10 +289,10 @@ function handleCategorySelect(e: any) {
               v-model="selectedEntity"
               @update:model-value="handleEntitySwitch()"
             >
-              <ToggleGroupItem value="events" aria-label="Uniquement les évènements">
+              <ToggleGroupItem value="events" aria-label="Uniquement les évènements" v-once>
                 Évènements
               </ToggleGroupItem>
-              <ToggleGroupItem value="characters" aria-label="Uniquement les personnages">
+              <ToggleGroupItem value="characters" aria-label="Uniquement les personnages" v-once>
                 Personnages
               </ToggleGroupItem>
             </ToggleGroup>
diff --git a/src/components/calendar/state/monthly/Layout.vue b/src/components/calendar/state/monthly/Layout.vue
index 4b48dd8..ddef0e3 100644
--- a/src/components/calendar/state/monthly/Layout.vue
+++ b/src/components/calendar/state/monthly/Layout.vue
@@ -2,13 +2,12 @@
 import type { LeimDate } from '@/models/Date'
 import { useCalendar } from '@/stores/CalendarStore'
 import { useThrottleFn } from '@vueuse/core'
-import { computed } from 'vue'
 
 import DayTile from './DayTile.vue'
 
 const { staticConfig, currentDate, decrementMonth, incrementMonth } = useCalendar()
 
-const daysPerMonth = computed(() => staticConfig.daysPerMonth)
+const daysPerMonth = staticConfig.daysPerMonth
 
 function getNextMonthDate(day: number): LeimDate {
   let nextDay = day
@@ -61,8 +60,7 @@ const moveCalendarRight = useThrottleFn(() => {
       :date="{
         day: day,
         month: currentDate.currentMonth,
-        year: currentDate.currentYear,
-        period: currentDate.currentPeriod
+        year: currentDate.currentYear
       }"
     />
     <DayTile
diff --git a/src/components/calendar/state/yearly/DayTile.vue b/src/components/calendar/state/yearly/DayTile.vue
index 332ffb3..d065c1d 100644
--- a/src/components/calendar/state/yearly/DayTile.vue
+++ b/src/components/calendar/state/yearly/DayTile.vue
@@ -1,11 +1,13 @@
 <script lang="ts" setup>
 import { areDatesIdentical, type LeimDate } from '@/models/Date'
 import { useCalendar } from '@/stores/CalendarStore'
+import { useCalendarEvents } from '@/stores/EventStore'
 import { storeToRefs } from 'pinia'
 import { computed, type ComputedRef } from 'vue'
 
 const { currentDate, defaultDate, selectDate } = useCalendar()
 const { selectedDate } = storeToRefs(useCalendar())
+const { currentEvents } = storeToRefs(useCalendarEvents())
 
 const props = defineProps<{
   monthNumber: number
@@ -20,24 +22,35 @@ const tileDate: ComputedRef<LeimDate> = computed(() => {
   }
 })
 
-const isDefaultDate = computed(() => {
+const isDefaultDate = computed<boolean>(() => {
   return areDatesIdentical(tileDate.value, defaultDate)
 })
 
-const isSelectedDate = computed(() => {
+const isSelectedDate = computed<boolean>(() => {
   return areDatesIdentical(tileDate.value, selectedDate.value)
 })
+
+const hasAtLeastOneEvent = computed<boolean>(() => {
+  return Boolean(
+    currentEvents.value.find((currentEvent) => {
+      return areDatesIdentical(currentEvent.date, tileDate.value)
+    })
+  )
+})
 </script>
 
 <template>
   <button
-    class="grid place-items-center aspect-square rounded-full border-2 border-transparent transition-colors hover:bg-slate-800 hover:border-slate-800"
+    class="relative grid place-items-center aspect-square rounded-full border-2 border-transparent transition-colors after:content-[''] after:absolute after:top-1 after:right-1 after:w-[.3rem] after:h-[.3rem] after:rounded-full after:transition-colors"
     :class="{
+      'hover:bg-slate-800 hover:border-slate-800': !isDefaultDate && !isSelectedDate,
       'bg-slate-800 hover:bg-slate-600 hover:border-slate-600': isDefaultDate && !isSelectedDate,
-      'text-white bg-blue-500 hover:bg-blue-600 hover:border-blue-600': isSelectedDate
+      'text-white bg-blue-500 hover:bg-blue-600 hover:border-blue-600': isSelectedDate,
+      'after:bg-green-600': hasAtLeastOneEvent,
+      'after:bg-slate-950': hasAtLeastOneEvent && isSelectedDate
     }"
     @click="selectDate(tileDate)"
   >
-    <span class="text-slate-300 text-[.85em]">{{ dayNumber }}</span>
+    <span ref="tileRef" class="text-slate-300 text-[.85em]">{{ dayNumber }}</span>
   </button>
 </template>
diff --git a/src/components/calendar/state/yearly/Layout.vue b/src/components/calendar/state/yearly/Layout.vue
index aea2a2b..3f9c8c0 100644
--- a/src/components/calendar/state/yearly/Layout.vue
+++ b/src/components/calendar/state/yearly/Layout.vue
@@ -1,18 +1,18 @@
 <script lang="ts" setup>
 import { useCalendar } from '@/stores/CalendarStore'
-import { computed } from 'vue'
-
 import MonthTile from './MonthTile.vue'
 
 const { staticConfig } = useCalendar()
-
-const monthsPerYear = computed(() => staticConfig.monthsPerYear)
 </script>
 
 <template>
   <div class="container mt-[10vh] mb-auto">
-    <div class="grid grid-cols-5 gap-x-8 gap-y-16">
-      <MonthTile v-for="month in monthsPerYear" :key="month" :month-number="month - 1" />
+    <div ref="test" class="grid grid-cols-5 gap-x-8 gap-y-16">
+      <MonthTile
+        v-for="month in staticConfig.monthsPerYear"
+        :key="month"
+        :month-number="month - 1"
+      />
     </div>
   </div>
 </template>
diff --git a/src/components/calendar/state/yearly/MonthTile.vue b/src/components/calendar/state/yearly/MonthTile.vue
index e6600ac..269324f 100644
--- a/src/components/calendar/state/yearly/MonthTile.vue
+++ b/src/components/calendar/state/yearly/MonthTile.vue
@@ -1,18 +1,15 @@
 <script lang="ts" setup>
-import type { LeimDate } from '@/models/Date'
 import { useCalendar } from '@/stores/CalendarStore'
-import { computed, type ComputedRef } from 'vue'
 
 import DayTile from './DayTile.vue'
 
-const { staticConfig, currentDate, getMonthName } = useCalendar()
+const { staticConfig, getMonthName } = useCalendar()
 
 const props = defineProps<{
   monthNumber: number
 }>()
 
-const daysPerMonth = computed(() => staticConfig.daysPerMonth)
-const tileMonthName = computed(() => getMonthName(props.monthNumber))
+const tileMonthName: string = getMonthName(props.monthNumber)
 </script>
 
 <template>
@@ -22,7 +19,7 @@ const tileMonthName = computed(() => getMonthName(props.monthNumber))
     </div>
     <div class="grid grid-cols-7">
       <DayTile
-        v-for="day in daysPerMonth"
+        v-for="day in staticConfig.daysPerMonth"
         :key="day"
         :month-number="monthNumber"
         :day-number="day"
diff --git a/src/stores/CalendarStore.ts b/src/stores/CalendarStore.ts
index 087f38b..b8bad6a 100644
--- a/src/stores/CalendarStore.ts
+++ b/src/stores/CalendarStore.ts
@@ -89,8 +89,7 @@ export const useCalendar = defineStore('calendar', () => {
     return {
       day: defaultDay,
       month: defaultMonth,
-      year: defaultYear,
-      period: 'nante'
+      year: defaultYear
     }
   })
 
diff --git a/src/stores/CharacterStore.ts b/src/stores/CharacterStore.ts
index 1779ea1..500ed03 100644
--- a/src/stores/CharacterStore.ts
+++ b/src/stores/CharacterStore.ts
@@ -1,20 +1,15 @@
 import { charactersList } from '@/data/Characters'
 import type { Character } from '@/models/Characters'
 import { defineStore } from 'pinia'
-import { computed, type ComputedRef } from 'vue'
 
 export const useCharacters = defineStore('characters', () => {
   const characters: Character[] = charactersList
 
   // Get all birth events
-  const charactersWithBirthData: ComputedRef<Character[]> = computed(() =>
-    characters.filter((character) => character.birth)
-  )
+  const charactersWithBirthData: Character[] = characters.filter((character) => character.birth)
 
   // Get all death events
-  const charactersWithDeathData: ComputedRef<Character[]> = computed(() =>
-    characters.filter((character) => character.death)
-  )
+  const charactersWithDeathData: Character[] = characters.filter((character) => character.death)
 
   return { characters, charactersWithBirthData, charactersWithDeathData }
 })
diff --git a/src/stores/EventStore.ts b/src/stores/EventStore.ts
index 0f94cd1..1e24890 100644
--- a/src/stores/EventStore.ts
+++ b/src/stores/EventStore.ts
@@ -1,40 +1,34 @@
-import type { CalendarEvent } from '@/models/Events'
-import { defineStore } from 'pinia'
-import { computed, ref, watch, type Ref } from 'vue'
-import { useCalendar } from './CalendarStore'
-import { useCharacters } from './CharacterStore'
 import { regularEvents } from '@/data/Events'
 import { convertDateToDays, daysPerMonth } from '@/models/Date'
+import type { CalendarEvent } from '@/models/Events'
+import { defineStore } from 'pinia'
+import { ref, watch, type Ref } from 'vue'
+import { useCalendar } from './CalendarStore'
+import { useCharacters } from './CharacterStore'
 
 export const useCalendarEvents = defineStore('calendar-events', () => {
-  const { currentDate, currentConfig, currentLeimDate } = useCalendar()
+  const { currentDate, currentConfig } = useCalendar()
   const { charactersWithBirthData, charactersWithDeathData } = useCharacters()
 
-  const baseEvents = ref<CalendarEvent[]>(regularEvents)
+  const baseEvents: CalendarEvent[] = regularEvents
 
-  const characterBirthEvents = computed(() => {
-    return charactersWithBirthData.map((character) => {
-      return {
-        title: `Naissance de ${character.name}`,
-        date: character.birth,
-        category: 'naissance'
-      } as CalendarEvent
-    })
+  const characterBirthEvents = charactersWithBirthData.map((character) => {
+    return {
+      title: `Naissance de ${character.name}`,
+      date: character.birth,
+      category: 'naissance'
+    } as CalendarEvent
   })
 
-  const characterDeathEvents = computed(() => {
-    return charactersWithDeathData.map((character) => {
-      return {
-        title: `Décès de ${character.name}`,
-        date: character.death,
-        category: 'mort'
-      } as CalendarEvent
-    })
+  const characterDeathEvents = charactersWithDeathData.map((character) => {
+    return {
+      title: `Décès de ${character.name}`,
+      date: character.death,
+      category: 'mort'
+    } as CalendarEvent
   })
 
-  const allEvents = computed(() => {
-    return [...characterBirthEvents.value, ...characterDeathEvents.value, ...baseEvents.value]
-  })
+  const allEvents = [...characterBirthEvents, ...characterDeathEvents, ...baseEvents]
 
   // Gets all current event in its default state
   const currentEvents: Ref<CalendarEvent[]> = ref(computeCurrentEvents())
@@ -100,7 +94,7 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
    * @returns A list of events that can appear in the current view
    */
   function computeCurrentEvents(): CalendarEvent[] {
-    return allEvents.value.filter((event) => shouldEventBeDisplayed(event))
+    return allEvents.filter((event) => shouldEventBeDisplayed(event))
   }
 
   return { baseEvents, allEvents, currentEvents }