From 53c708d0ca9b4e52a4ab711ff38ce2419da12437 Mon Sep 17 00:00:00 2001 From: GauthierWebDev Date: Fri, 18 Apr 2025 14:46:27 +0200 Subject: [PATCH] refactor: Update cookie handling logic and definitions --- app/fastify-entry.ts | 4 +++- app/layouts/LayoutDefault.telefunc.ts | 6 +++++- app/layouts/LayoutDefault.tsx | 25 ++++++++++++++++++++----- app/server/vike-handler.ts | 8 +++++--- app/services/CookieParser.ts | 14 +++++++++++--- 5 files changed, 44 insertions(+), 13 deletions(-) diff --git a/app/fastify-entry.ts b/app/fastify-entry.ts index e15cfd5..2127835 100644 --- a/app/fastify-entry.ts +++ b/app/fastify-entry.ts @@ -23,7 +23,9 @@ declare global { analytics: boolean; customization: boolean; }; - theme: Theme; + settings: { + theme: Theme; + }; }; } } diff --git a/app/layouts/LayoutDefault.telefunc.ts b/app/layouts/LayoutDefault.telefunc.ts index 1ed0fb8..ba55b90 100644 --- a/app/layouts/LayoutDefault.telefunc.ts +++ b/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}`); diff --git a/app/layouts/LayoutDefault.tsx b/app/layouts/LayoutDefault.tsx index 39f1dd0..d556a1e 100644 --- a/app/layouts/LayoutDefault.tsx +++ b/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 })); - reload(); + setConsentCookies({ ...consentCookies, analytics: checked }); + + 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); }} /> @@ -186,7 +201,7 @@ export default function DefaultLayout({ children }: { children: React.ReactNode const isHomePage = urlPathname === "/"; return ( - +
diff --git a/app/server/vike-handler.ts b/app/server/vike-handler.ts index 3dcfe9b..52c76fc 100644 --- a/app/server/vike-handler.ts +++ b/app/server/vike-handler.ts @@ -16,10 +16,12 @@ export const vikeHandler: Get<[], UniversalHandler> = () => async (request, cont headersOriginal: request.headers, cookies: { consent: { - analytics: cookies.get("consent-analytics", Boolean) || false, - customization: cookies.get("consent-customization", Boolean) || false, + analytics: cookies.get("analytics", Boolean) || false, + customization: cookies.get("customization", Boolean) || false, + }, + settings: { + theme: cookies.get("theme") || "light", }, - theme: cookies.get("theme") || "light", }, }; const pageContext = await renderPage(pageContextInit); diff --git a/app/services/CookieParser.ts b/app/services/CookieParser.ts index 12bed49..7f67010 100644 --- a/app/services/CookieParser.ts +++ b/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; @@ -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; }