From e3a6ff8790ec91c0d85b66fdc2179b2a1d917ff1 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 24 Aug 2024 18:33:54 +0200
Subject: [PATCH] Added basic caching for calendar page

---
 pages/i/calendar/[id].vue                    | 20 ++------------------
 server/api/calendars/categories/query.get.ts | 12 ++++++++++++
 server/api/calendars/query.get.ts            |  2 ++
 3 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/pages/i/calendar/[id].vue b/pages/i/calendar/[id].vue
index c411df1..bbe13fa 100644
--- a/pages/i/calendar/[id].vue
+++ b/pages/i/calendar/[id].vue
@@ -21,8 +21,8 @@ watch(user, (n, _o) => {
 const route = useRoute()
 const id = route.params.id
 
-const { data: calendarData, pending: calPending } = useLazyFetch('/api/calendars/query', { query: { id, full: true } })
-const { data: catData, pending: catPending } = useLazyFetch('/api/calendars/categories/query')
+const { data: calendarData, pending: calPending } = useLazyFetch('/api/calendars/query', { key: `calendar-${id}`, query: { id, full: true } })
+const { data: catData, pending: catPending } = useLazyFetch('/api/calendars/categories/query', { key: `categories-${id}` })
 
 const cal = computed<Calendar>(() => calendarData?.value?.data as Calendar)
 const categories = computed<Category[]>(() => catData?.value?.data as Category[])
@@ -37,20 +37,4 @@ const categories = computed<Category[]>(() => catData?.value?.data as Category[]
   </div>
 
   <Calendar v-else-if="cal && categories" :calendar-data="cal" :categories />
-
-  <!-- <span v-if="calendarData && categories">
-    <Calendar :calendar-data :categories />
-  </span> -->
-  <!-- <Suspense>
-    <Calendar :calendar="calendar?.data" :categories />
-
-    <template #fallback>
-      <div class="h-full w-full grid place-items-center">
-        <div class="grid gap-2 justify-items-center opacity-50">
-          <p>Chargement du calendrier</p>
-          <PhCircleNotch size="50" class="animate-spin"/>
-        </div>
-      </div>
-    </template>
-  </Suspense> -->
 </template>
diff --git a/server/api/calendars/categories/query.get.ts b/server/api/calendars/categories/query.get.ts
index 25abe89..a77f46f 100644
--- a/server/api/calendars/categories/query.get.ts
+++ b/server/api/calendars/categories/query.get.ts
@@ -1,8 +1,16 @@
 import { serverSupabaseClient } from "#supabase/server";
+import { z } from 'zod'
 import type { Category } from "~/models/Category";
 
+const querySchema = z.object({
+  id: z.number({ coerce: true }).positive().int().optional(),
+})
+
 export default defineEventHandler(async (event) => {
   const client = await serverSupabaseClient(event)
+  const query = await getValidatedQuery(event, querySchema.parse)
+
+  setHeader(event, 'Cache-Control', 'public, max-age=3600, s-maxage=7200')
 
   const output = client
     .from('calendar_event_categories')
@@ -11,5 +19,9 @@ export default defineEventHandler(async (event) => {
       name
     `)
 
+  if (query.id) {
+    return output.eq('id', query.id).limit(1).single<Category>()
+  }
+
   return output.returns<Category[]>()
 })
diff --git a/server/api/calendars/query.get.ts b/server/api/calendars/query.get.ts
index 9a5b5e2..19a74f5 100644
--- a/server/api/calendars/query.get.ts
+++ b/server/api/calendars/query.get.ts
@@ -11,6 +11,8 @@ export default defineEventHandler(async (event) => {
   const client = await serverSupabaseClient(event)
   const query = await getValidatedQuery(event, querySchema.parse)
 
+  setHeader(event, 'Cache-Control', 'public, max-age=3600, s-maxage=7200')
+
   const partialFields = `
     id,
     name,