From 78f03216a5de77506057abe88aa0808738944cca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Pedro=20Sousa?= <outgoing@zpedro.dev>
Date: Tue, 30 Apr 2024 11:44:01 +0100
Subject: [PATCH] wip

---
 docs/src/components/Matomo/matomo.jsx | 10 +++----
 docs/src/theme/Root.js                | 42 +++++++++++++++++----------
 2 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/docs/src/components/Matomo/matomo.jsx b/docs/src/components/Matomo/matomo.jsx
index 5475f79c9b5..65a0971f8e9 100644
--- a/docs/src/components/Matomo/matomo.jsx
+++ b/docs/src/components/Matomo/matomo.jsx
@@ -1,7 +1,5 @@
 import { useEffect, useState } from 'react';
-
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import useIsBrowser from '@docusaurus/useIsBrowser';
 
 function getSiteId(siteConfig) {
   const env = siteConfig.customFields.MATOMO_ENV;
@@ -16,12 +14,10 @@ function getSiteId(siteConfig) {
 
 export default function useMatomo() {
   const { siteConfig } = useDocusaurusContext();
-  const useIsBrowserValue = useIsBrowser();
-
   const [isOptedOut, setIsOptedOut] = useState(false);
-  window._paq = window._paq || [];
 
   useEffect(() => {
+    window._paq = window._paq || [];
     console.log('effect');
     console.log(window);
 
@@ -42,10 +38,12 @@ export default function useMatomo() {
   }, []);
 
   useEffect(() => {
+    window._paq = window._paq || [];
     window._paq.push(['trackPageView']);
   }, [window.location.href]);
 
   useEffect(() => {
+    window._paq = window._paq || [];
     function setOptOutText(element) {
       console.log(element.checked);
       window._paq.push([
@@ -70,5 +68,5 @@ export default function useMatomo() {
     setOptOutText(optOut);
   }, [isOptedOut]);
 
-  return null;
+  return <></>;
 }
diff --git a/docs/src/theme/Root.js b/docs/src/theme/Root.js
index b8f953faec8..22c6aeffbc2 100644
--- a/docs/src/theme/Root.js
+++ b/docs/src/theme/Root.js
@@ -1,25 +1,37 @@
 import React from 'react';
 import useMatomo from '@site/src/components/Matomo/matomo';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
-export default function Root({ children }) {
+function OptOutForm() {
   useMatomo();
 
   return (
-    <>
-      <div id="optout-form">
-        <p>
-          You may choose not to have a unique web analytics cookie identification number assigned to your computer to
-          avoid the aggregation and analysis of data collected on this website.
-        </p>
-        <p>To make that choice, please click below to receive an opt-out cookie.</p>
+    <div id="optout-form">
+      <p>
+        You may choose not to have a unique web analytics cookie identification number assigned to your computer to
+        avoid the aggregation and analysis of data collected on this website.
+      </p>
+      <p>To make that choice, please click below to receive an opt-out cookie.</p>
+
+      <p>
+        <input type="checkbox" id="optout" />
+        <label htmlFor="optout">
+          <strong></strong>
+        </label>
+      </p>
+    </div>
+  );
+}
 
-        <p>
-          <input type="checkbox" id="optout" />
-          <label htmlFor="optout">
-            <strong></strong>
-          </label>
-        </p>
-      </div>
+export default function Root({ children }) {
+  const useIsBrowserValue = useIsBrowser();
+  if (!useIsBrowserValue) return <>{children}</>;
+
+  return (
+    <>
+      <BrowserOnly>{() => <OptOutForm />}</BrowserOnly>
       {children}
     </>
   );