From 2a32a1a7cb3c1002ea5a5a466f5ca47f48afe8cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Thu, 23 May 2024 13:14:45 -0500
Subject: [PATCH] fix: checks hydration issues

---
 src/app/components/Checks.tsx   | 116 +++++++++++++++++---------------
 src/app/layout.tsx              |  10 ++-
 src/components/Navbar/index.tsx |   1 +
 3 files changed, 68 insertions(+), 59 deletions(-)

diff --git a/src/app/components/Checks.tsx b/src/app/components/Checks.tsx
index 6312ccfd1..7893adef0 100644
--- a/src/app/components/Checks.tsx
+++ b/src/app/components/Checks.tsx
@@ -1,9 +1,15 @@
 'use client';
 
-import { AlertDialog, Button, Flex, Heading, Text } from '@radix-ui/themes';
+import {
+  AlertDialog,
+  Button,
+  Flex,
+  Heading,
+  Link,
+  Text,
+} from '@radix-ui/themes';
 import { usePathname } from 'next/navigation';
 import { useEffect, useState } from 'react';
-import { Link } from '../../components/Link';
 import { extendAuth } from '../../core/blitz/extendAuth';
 import { logout } from '../../core/blitz/logout';
 import isDev from '../../core/blitzkit/isDev';
@@ -20,6 +26,7 @@ export function Checks() {
   );
   const pathname = usePathname();
   const isLegal = pathname.startsWith('/legal');
+  const [showPoliciesAgreement, setShowPoliciesAgreement] = useState(false);
 
   useEffect(() => {
     setShowDevBuildAlert(
@@ -29,6 +36,11 @@ export function Checks() {
           DEV_BUILD_AGREEMENT_COOLDOWN,
     );
   }, []);
+  useEffect(() => {
+    setShowPoliciesAgreement(
+      policiesAgreementIndex !== CURRENT_POLICIES_AGREEMENT_INDEX && !isLegal,
+    );
+  }, [policiesAgreementIndex, isLegal]);
 
   useEffect(() => {
     if (!login) return;
@@ -72,70 +84,68 @@ export function Checks() {
         </AlertDialog.Content>
       </AlertDialog.Root>
 
-      {policiesAgreementIndex !== CURRENT_POLICIES_AGREEMENT_INDEX &&
-        !isLegal && (
+      {showPoliciesAgreement && (
+        <Flex
+          align="end"
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            background: 'var(--color-overlay)',
+            zIndex: 2,
+          }}
+        >
           <Flex
-            align="end"
+            p="8"
             style={{
-              position: 'fixed',
-              top: 0,
-              left: 0,
               width: '100%',
-              height: '100%',
-              background: 'var(--color-overlay)',
-              zIndex: 2,
+              background: 'var(--color-panel-solid)',
             }}
+            justify="center"
           >
             <Flex
-              p="8"
+              align="start"
+              gap="4"
               style={{
-                width: '100%',
-                background: 'var(--color-panel-solid)',
+                maxWidth: 640 * 2,
               }}
-              justify="center"
+              direction="column"
             >
-              <Flex
-                align="start"
-                gap="4"
-                style={{
-                  maxWidth: 640 * 2,
-                }}
-                direction="column"
-              >
-                <Flex direction="column" gap="2">
-                  <Heading>
-                    {policiesAgreementIndex === -1
-                      ? "BlitzKit's cookies"
-                      : "BlitzKit's policies have changed"}
-                  </Heading>
+              <Flex direction="column" gap="2">
+                <Heading>
+                  {policiesAgreementIndex === -1
+                    ? "BlitzKit's cookies"
+                    : "BlitzKit's policies have changed"}
+                </Heading>
 
-                  <Text>
-                    This website utilizes cookies to perform analytics and
-                    personalize your experience. You can learn more through{' '}
-                    <Link href="/legal/privacy-policy">our privacy policy</Link>
-                    . You may opt out of personalized advertizement by visiting{' '}
-                    <Link href="https://www.google.com/settings/ads">
-                      Google Ad Settings
-                    </Link>
-                    . By using BlitzKit, you also agree to our{' '}
-                    <Link href="/legal/terms-of-service">terms of service</Link>
-                    .
-                  </Text>
-                </Flex>
-
-                <Button
-                  onClick={() => {
-                    useApp.setState({
-                      policiesAgreementIndex: CURRENT_POLICIES_AGREEMENT_INDEX,
-                    });
-                  }}
-                >
-                  I Agree
-                </Button>
+                <Text>
+                  This website utilizes cookies to perform analytics and
+                  personalize your experience. You can learn more through{' '}
+                  <Link href="/legal/privacy-policy">our privacy policy</Link>.
+                  You may opt out of personalized advertizement by visiting{' '}
+                  <Link href="https://www.google.com/settings/ads">
+                    Google Ad Settings
+                  </Link>
+                  . By using BlitzKit, you also agree to our{' '}
+                  <Link href="/legal/terms-of-service">terms of service</Link>.
+                </Text>
               </Flex>
+
+              <Button
+                onClick={() => {
+                  useApp.setState({
+                    policiesAgreementIndex: CURRENT_POLICIES_AGREEMENT_INDEX,
+                  });
+                }}
+              >
+                I Agree
+              </Button>
             </Flex>
           </Flex>
-        )}
+        </Flex>
+      )}
     </>
   );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3de77ed76..8e233f8b7 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,9 +5,7 @@ import '@radix-ui/themes/styles.css';
 import { config } from 'dotenv';
 import { Roboto_Flex } from 'next/font/google';
 import { usePathname } from 'next/navigation';
-import { ReactNode, Suspense } from 'react';
-import { Footer } from '../components/Footer';
-import { Loader } from '../components/Loader';
+import { ReactNode } from 'react';
 import Navbar, { NAVBAR_HEIGHT } from '../components/Navbar';
 import { Party3 } from '../components/Party3';
 import { Checks } from './components/Checks';
@@ -72,7 +70,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
 
             <Checks />
 
-            <Suspense
+            {/* <Suspense
               fallback={
                 <div style={{ flex: 1 }}>
                   <Loader />
@@ -80,9 +78,9 @@ export default function RootLayout({ children }: RootLayoutProps) {
               }
             >
               {children}
-            </Suspense>
+            </Suspense> */}
 
-            {!isEmbed && <Footer />}
+            {/* {!isEmbed && <Footer />} */}
           </Flex>
         </Theme>
       </body>
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index a6e778d72..d72263cf6 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -190,6 +190,7 @@ export default function Navbar() {
         <Flex mt="6" gap="3" justify="center" wrap="wrap">
           {TOOLS.filter((tool) => !tool.href).map((tool) => (
             <Link
+              key={tool.id}
               href={tool.href ?? `/tools/${tool.id}`}
               target={tool.href ? '_blank' : undefined}
               className={styles.toolCard}