Fix : CookieBanner useEffect

src/components/CookieBanner.tsx

@@ -1,33 +1,33 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
-
 import styles from "../styles/CookieBanner.module.css";
 
-const COOKIE_CONSENT_KEY = "cookieConsentAccepted";
+const KEY = "cookieConsentAccepted";
 
 export default function CookieBanner() {
-  const [accepted, setAccepted] = useState<boolean>(() => {
+  const [visible, setVisible] = useState(false);
-    return typeof window !== "undefined" && window.localStorage.getItem(COOKIE_CONSENT_KEY) === "true";
+
-  });
+  useEffect(() => {
+    const consent = localStorage.getItem(KEY);
+    if (!consent) {
+      setVisible(true);
+    }
+  }, [setVisible]);
 
   const handleAccept = () => {
-    if (typeof window !== "undefined") {
+    localStorage.setItem(KEY, "true");
-      window.localStorage.setItem(COOKIE_CONSENT_KEY, "true");
+    setVisible(false);
-    }
-    setAccepted(true);
   };
 
-  if (accepted) {
+  if (!visible) return null;
-    return null;
-  }
 
   return (
     <div className={styles.banner} role="dialog" aria-live="polite">
       <div className={styles.bannerText}>
-        Ce site utilise des cookies pour améliorer votre expérience utilisateur et analyser le trafic.
+        Ce site utilise des cookies pour améliorer votre expérience utilisateur
-        En poursuivant votre navigation, vous acceptez l'utilisation des cookies.
+        et analyser le trafic. En poursuivant votre navigation, vous acceptez
+        l'utilisation des cookies.
       </div>
-
       <div className={styles.actions}>
         <Link to="/mentions-legales" className={styles.link}>
           En savoir plus
@@ -38,4 +38,4 @@ export default function CookieBanner() {
       </div>
     </div>
   );
-}
+}