switched cookiebanner to react

joevaugh4n · Aug 8, 2024 · a248e1d · a248e1d
1 parent 366e690
commit a248e1d
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 115 deletions.
diff --git a/src/components/Cookies.astro b/src/components/Cookies.astro
diff --git a/src/components/Cookies.tsx b/src/components/Cookies.tsx
@@ -0,0 +1,101 @@
+import React, { useState, useEffect } from "react";
+import { type CookieBannerProps, type CookieChoice } from "../lib/cookies";
+
+const STORAGE_KEY = "cookieChoice";
+
+function CookieBanner({ GA_MEASUREMENT_ID }: CookieBannerProps) {
+  const [cookieChoice, setCookieChoice] = useState<CookieChoice | null>(null);
+
+  useEffect(() => {
+    const existingChoice = getStorageItem(STORAGE_KEY);
+    setCookieChoice(existingChoice);
+  }, []);
+
+  function getStorageItem(key: string): CookieChoice | null {
+    const item = localStorage.getItem(key);
+    if (!item) return null;
+
+    const { value, expiry } = JSON.parse(item);
+    if (Date.now() > expiry) {
+      localStorage.removeItem(key);
+      return null;
+    }
+    return value as CookieChoice;
+  }
+
+  function setStorageItem(
+    key: string,
+    value: CookieChoice,
+    expiryDays: number
+  ) {
+    const expiry = Date.now() + expiryDays * 24 * 60 * 60 * 1000;
+    localStorage.setItem(key, JSON.stringify({ value, expiry }));
+  }
+
+  function handleCookieChoice(choice: CookieChoice) {
+    console.log(`Cookie choice: ${choice}`);
+    setStorageItem(STORAGE_KEY, choice, 365); // Store for 1 year
+    setCookieChoice(choice);
+    if (choice === "accept") {
+      loadGoogleAnalytics();
+    }
+  }
+
+  function loadGoogleAnalytics() {
+    console.log("Loading Google Analytics");
+    const script1 = document.createElement("script");
+    script1.src = `https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`;
+    script1.async = true;
+    document.head.appendChild(script1);
+
+    const script2 = document.createElement("script");
+    script2.text = `
+      window.dataLayer = window.dataLayer || [];
+      function gtag() { dataLayer.push(arguments); }
+      gtag('js', new Date());
+      gtag('config', '${GA_MEASUREMENT_ID}');
+    `;
+    document.head.appendChild(script2);
+  }
+
+  if (cookieChoice === null) {
+    return (
+      <div
+        id="cookie-banner"
+        className="fixed bottom-0 left-0 right-0 bg-gray-100 shadow-md z-50 px-4 pb-4 pt-2"
+      >
+        <div className="max-w-screen-xl mx-auto flex lg:flex-row flex-col items-center justify-between">
+          <p className="py-4 px-4 sm:mb-0 text-sm text-black text-pretty">
+            We use cookies to make this service work and analyse performance.
+            <a
+              href="/privacy-policy"
+              className="text-blue-600 hover:text-blue-800 underline"
+            >
+              Privacy Policy
+            </a>
+          </p>
+          <div>
+            <button
+              id="accept-cookies"
+              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-2"
+              onClick={() => handleCookieChoice("accept")}
+            >
+              Accept
+            </button>
+            <button
+              id="decline-cookies"
+              className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded"
+              onClick={() => handleCookieChoice("decline")}
+            >
+              Decline
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+}
+
+export default CookieBanner;
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -4,7 +4,7 @@ import AdamOGImage from "../../src/images/opengraph.jpg"; // Open Graph image
 import Footer from "../components/Footer.astro"; // Page footer component
 import Nav from "../components/Nav.astro"; // Nav component
 import NavLink from "../components/atoms/NavItem.astro"; // Individual nav item
-import CookieBanner from "../components/Cookies.astro";
+import CookieBanner from "../components/Cookies";
 
 // OGType options
 export enum OGType {
@@ -122,7 +122,7 @@ function getImageUrl(image: ImageMetadata | string): string {
   </head>
 
   <body class="md:px-8 px-4 max-w-7xl mx-auto">
-    <CookieBanner GA_MEASUREMENT_ID="G-63R54V45CT" />
+    <CookieBanner client:load GA_MEASUREMENT_ID="G-63R54V45CT" />
     <Nav>
       <NavLink url="/#posts" caption="Posts" />
       <NavLink url="/#contact" caption="Contact" />

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -28,7 +28,7 @@ import TripleC from "../../src/images/triplec.webp";
 <Layout
   metaDescription="Adam Koszary is an expert in social media and digital engagement for museums, galleries, libraries, archives, and theatres."
   title="Adam Koszary"
-  ready={true /** accepts true or false */}
+  ready={false /** accepts true or false */}
 >
   <Header title="Adam Koszary">
     <!-- Social icons -->