refactor: Update cookie handling logic and definitions

app/fastify-entry.ts

@@ -23,8 +23,10 @@ declare global {
           analytics: boolean;
           customization: boolean;
         };
+        settings: {
           theme: Theme;
         };
+      };
     }
   }
 }

app/layouts/LayoutDefault.telefunc.ts

@@ -1,7 +1,11 @@
+import type { PageContext } from "vike/types";
+
 import { getTelefuncContext } from "@/lib/getTelefuncContext";
 import { CookieParser } from "@/services/CookieParser";
 
-export async function onUpdateConsentCookie(cookieName: string, cookieValue: boolean) {
+type ConsentCookies = keyof PageContext["cookies"]["consent"];
+
+export async function onUpdateConsentCookie(cookieName: ConsentCookies, cookieValue: boolean) {
   const context = getTelefuncContext();
   console.log(`Updating cookie ${cookieName} to ${cookieValue}`);
 

app/layouts/LayoutDefault.tsx

@@ -1,12 +1,13 @@
+import { onUpdateConsentCookie } from "./LayoutDefault.telefunc";
 import { MobileNavigation } from "@syntax/MobileNavigation";
 import { usePageContext } from "vike-react/usePageContext";
 import { ThemeProvider } from "@/providers/ThemeProvider";
+import { ToastContainer, toast } from "react-toastify";
 import { ThemeSelector } from "@syntax/ThemeSelector";
 import { Button } from "@/components/syntax/Button";
 import { Toggle } from "@/components/common/Toggle";
 import { clientOnly } from "vike-react/clientOnly";
 import React, { useEffect, useState } from "react";
-import { ToastContainer } from "react-toastify";
 import { Navigation } from "@syntax/Navigation";
 import { Link } from "@/components/common/Link";
 import { reload } from "vike/client/router";
@@ -108,7 +109,14 @@ function CookieModal() {
               checked={consentCookies.analytics}
               onChange={(checked) => {
                 setConsentCookies({ ...consentCookies, analytics: checked });
-                reload();
+
+                toast
+                  .promise(onUpdateConsentCookie("analytics", checked), {
+                    pending: "Mise à jour des cookies...",
+                    success: "Cookies mis à jour !",
+                    error: "Erreur lors de la mise à jour des cookies.",
+                  })
+                  .finally(reload);
               }}
             />
 
@@ -117,8 +125,15 @@ function CookieModal() {
               label="Cookie de personnalisation (thème)"
               checked={consentCookies.customization}
               onChange={(checked) => {
-                setConsentCookies((prev) => ({ ...prev, customization: checked }));
+                setConsentCookies({ ...consentCookies, analytics: checked });
-                reload();
+
+                toast
+                  .promise(onUpdateConsentCookie("customization", checked), {
+                    pending: "Mise à jour des cookies...",
+                    success: "Cookies mis à jour !",
+                    error: "Erreur lors de la mise à jour des cookies.",
+                  })
+                  .finally(reload);
               }}
             />
           </div>
@@ -186,7 +201,7 @@ export default function DefaultLayout({ children }: { children: React.ReactNode
   const isHomePage = urlPathname === "/";
 
   return (
-    <ThemeProvider defaultTheme={cookies.theme}>
+    <ThemeProvider defaultTheme={cookies.settings.theme}>
       <CookieModal />
 
       <div className="flex w-full flex-col font-sans">

app/server/vike-handler.ts

@@ -16,11 +16,13 @@ export const vikeHandler: Get<[], UniversalHandler> = () => async (request, cont
     headersOriginal: request.headers,
     cookies: {
       consent: {
-        analytics: cookies.get("consent-analytics", Boolean) || false,
+        analytics: cookies.get("analytics", Boolean) || false,
-        customization: cookies.get("consent-customization", Boolean) || false,
+        customization: cookies.get("customization", Boolean) || false,
       },
+      settings: {
         theme: cookies.get("theme") || "light",
       },
+    },
   };
   const pageContext = await renderPage(pageContextInit);
   const response = pageContext.httpResponse;

app/services/CookieParser.ts

@@ -1,5 +1,12 @@
+import type { PageContext } from "vike/types";
+
 import { FastifyReply } from "fastify";
 
+type ConsentCookies = keyof PageContext["cookies"]["consent"];
+type SettingsCookie = keyof PageContext["cookies"]["settings"];
+
+type CookieKeys = ConsentCookies | SettingsCookie;
+
 export class CookieParser {
   private rawCookies: string;
   private cookies: Record<string, string>;
@@ -21,14 +28,16 @@ export class CookieParser {
     );
   }
 
-  get(key: string, formatter?: Function): string | undefined {
+  get(key: CookieKeys, formatter?: Function): string | undefined {
     const value = this.cookies[key];
 
+    console.log({ key, value });
+
     if (formatter) return formatter(value);
     return value;
   }
 
-  set(reply: FastifyReply, key: string, value: string, daysDuration = 30): FastifyReply {
+  static set(reply: FastifyReply, key: CookieKeys, value: string, daysDuration = 30): FastifyReply {
     const options = {
       path: "/",
       httpOnly: true,
@@ -37,7 +46,6 @@ export class CookieParser {
     };
 
     reply.setCookie(key, value, options);
-    this.cookies[key] = value;
 
     return reply;
   }