From a73746311558bf69e4b70b40c5590162ecc69b8d Mon Sep 17 00:00:00 2001
From: mr0x50 <24775431+mroxso@users.noreply.github.com>
Date: Sat, 15 Feb 2025 20:53:07 +0100
Subject: [PATCH] Revert "Fix: hydration errors (#45)"

This reverts commit 8c485fb47e2e9610e78f0332fb1b95be2b198a14.
---
 components/BottomBar.tsx                      | 44 ++++++++--------
 components/ProfileInfoCard.tsx                | 10 ++--
 components/ReactionButton.tsx                 |  8 ++-
 components/ViewCopyButton.tsx                 |  9 ++--
 components/ViewRawButton.tsx                  |  8 ++-
 components/ZapButton.tsx                      | 10 ++--
 components/headerComponents/TopNavigation.tsx | 51 ++++++-------------
 7 files changed, 56 insertions(+), 84 deletions(-)

diff --git a/components/BottomBar.tsx b/components/BottomBar.tsx
index c3cd2fd..2576f6a 100644
--- a/components/BottomBar.tsx
+++ b/components/BottomBar.tsx
@@ -3,41 +3,37 @@
 import { BellIcon, GlobeIcon, HomeIcon, RowsIcon, UploadIcon } from "@radix-ui/react-icons"
 import Link from "next/link"
 import { FormEvent, JSX, SVGProps, useEffect, useState } from "react"
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar"
 import { useRouter, usePathname } from 'next/navigation'
-import { SearchIcon } from "lucide-react";
+import { SearchIcon, Upload } from "lucide-react";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer"
+import { Button } from "./ui/button";
+import { Textarea } from "./ui/textarea";
+import { useNostr } from "nostr-react";
 
 export default function BottomBar() {
   const router = useRouter();
   const [pubkey, setPubkey] = useState<null | string>(null);
-  const [mounted, setMounted] = useState(false);
   const pathname = usePathname();
 
   useEffect(() => {
-    setMounted(true);
-    setPubkey(window.localStorage.getItem('pubkey'));
+    if (typeof window !== 'undefined') {
+      setPubkey(window.localStorage.getItem('pubkey') ?? null);
+    }
   }, []);
 
-  const isActive = (path: string, currentPath: string) => currentPath === path ? 'text-purple-500' : '';
+  if (typeof window === 'undefined') return null;
 
-  // Render minimal navigation during SSR and hydration
-  if (!mounted) {
-    return (
-      <nav className="fixed inset-x-0 bottom-0 h-14 flex flex-row shrink-0 items-center justify-between border-t bg-background/90 shadow-up-4 z-50 backdrop-blur">
-        <Link className={`flex flex-col items-center justify-center w-full text-xs gap-1 px-4 ${isActive('/', pathname)}`} href="/">
-          <HomeIcon className={`h-6 w-6`} />
-          <span className="sr-only">Home</span>
-        </Link>
-        <Link className={`flex flex-col items-center justify-center w-full text-xs gap-1 px-4 ${isActive('/global', pathname)}`} href="/global">
-          <GlobeIcon className={`h-6 w-6`} />
-          <span className="sr-only">Global</span>
-        </Link>
-        <Link className={`flex flex-col items-center justify-center w-full text-xs gap-1 px-4 ${isActive('/search', pathname)}`} href="/search">
-          <SearchIcon className={`h-6 w-6`} />
-          <span className="sr-only">Search</span>
-        </Link>
-      </nav>
-    );
-  }
+  const isActive = (path: string, currentPath: string) => currentPath === path ? 'text-purple-500' : '';
 
   return (
     <nav className="fixed inset-x-0 bottom-0 h-14 flex flex-row shrink-0 items-center justify-between border-t bg-background/90 shadow-up-4 z-50 backdrop-blur">
diff --git a/components/ProfileInfoCard.tsx b/components/ProfileInfoCard.tsx
index 68ae0a1..3032fa5 100644
--- a/components/ProfileInfoCard.tsx
+++ b/components/ProfileInfoCard.tsx
@@ -97,6 +97,7 @@ const ProfileInfoCard: React.FC<ProfileInfoCardProps> = React.memo(({ pubkey })
           <div>
             <NIP05 nip05={nip05?.toString() ?? ''} pubkey={pubkey} />
             <div className='py-6 grid grid-cols-5 gap-4'>
+              {/* <Button className='w-full'>Follow</Button> */}
               <div className='col-span-2'>
                 <FollowButton pubkey={pubkey} userPubkey={userPubkey}></FollowButton>
               </div>
@@ -104,7 +105,7 @@ const ProfileInfoCard: React.FC<ProfileInfoCardProps> = React.memo(({ pubkey })
                 <Button className='w-full' variant="outline">View Statistics</Button>
               </Link>
               <Drawer>
-                <DrawerTrigger asChild>
+                <DrawerTrigger>
                   <Button className='w-full' variant="outline"><Share1Icon /></Button>
                 </DrawerTrigger>
                 <DrawerContent>
@@ -113,6 +114,7 @@ const ProfileInfoCard: React.FC<ProfileInfoCardProps> = React.memo(({ pubkey })
                     <DrawerDescription>Share this Profile with others.</DrawerDescription>
                   </DrawerHeader>
                   <div className="px-2">
+                    {/* <h1>URL</h1> */}
                     <div className="flex items-center mb-4">
                       <Input value={host+"/profile/"+nip19.npubEncode(pubkey)} disabled className="mr-2" />
                       <Button variant="outline" onClick={handleCopyLink}>Copy Link</Button>
@@ -123,10 +125,8 @@ const ProfileInfoCard: React.FC<ProfileInfoCardProps> = React.memo(({ pubkey })
                     </div>
                   </div>
                   <DrawerFooter>
-                    <DrawerClose asChild>
-                      <div>
-                        <Button variant="outline">Close</Button>
-                      </div>
+                    <DrawerClose>
+                      <Button variant="outline">Close</Button>
                     </DrawerClose>
                   </DrawerFooter>
                 </DrawerContent>
diff --git a/components/ReactionButton.tsx b/components/ReactionButton.tsx
index 79d75e8..a02113d 100644
--- a/components/ReactionButton.tsx
+++ b/components/ReactionButton.tsx
@@ -82,7 +82,7 @@ export default function ReactionButton({ event }: { event: any }) {
 
   return (
     <Drawer>
-      <DrawerTrigger asChild>
+      <DrawerTrigger>
         <Button variant={liked ? "default" : "outline"}>
           {isLoading ? (
             <>
@@ -125,10 +125,8 @@ export default function ReactionButton({ event }: { event: any }) {
         <hr className="my-4" />
         <ReactionButtonReactionList filteredEvents={filteredEvents} />
         <DrawerFooter>
-          <DrawerClose asChild>
-            <div>
-              <Button variant={"secondary"}>Close</Button>
-            </div>
+          <DrawerClose>
+            <Button variant={"secondary"}>Close</Button>
           </DrawerClose>
         </DrawerFooter>
       </DrawerContent>
diff --git a/components/ViewCopyButton.tsx b/components/ViewCopyButton.tsx
index 8c38822..6a5d397 100644
--- a/components/ViewCopyButton.tsx
+++ b/components/ViewCopyButton.tsx
@@ -60,7 +60,7 @@ export default function ViewCopyButton({ event }: ViewCopyButtonProps) {
 
     return (
         <Drawer>
-            <DrawerTrigger asChild>
+            <DrawerTrigger>
                 <Button variant="outline"><Share1Icon /></Button>
             </DrawerTrigger>
             <DrawerContent>
@@ -80,13 +80,12 @@ export default function ViewCopyButton({ event }: ViewCopyButtonProps) {
                     </div>
                 </div>
                 <DrawerFooter>
-                    <DrawerClose asChild>
-                        <div>
-                            <Button variant="outline">Close</Button>
-                        </div>
+                    <DrawerClose>
+                        <Button variant="outline">Close</Button>
                     </DrawerClose>
                 </DrawerFooter>
             </DrawerContent>
         </Drawer>
+
     );
 }
\ No newline at end of file
diff --git a/components/ViewRawButton.tsx b/components/ViewRawButton.tsx
index 430dd0e..4cd2be5 100644
--- a/components/ViewRawButton.tsx
+++ b/components/ViewRawButton.tsx
@@ -20,7 +20,7 @@ interface ViewRawButtonProps {
 export default function ViewRawButton({ event }: ViewRawButtonProps) {
     return (
         <Drawer>
-            <DrawerTrigger asChild>
+            <DrawerTrigger>
                 <Button variant="outline"><CodeIcon /></Button>
             </DrawerTrigger>
             <DrawerContent>
@@ -30,10 +30,8 @@ export default function ViewRawButton({ event }: ViewRawButtonProps) {
                 </DrawerHeader>
                 <Textarea rows={20} disabled>{JSON.stringify(event, null, 2)}</Textarea>
                 <DrawerFooter>
-                    <DrawerClose asChild>
-                        <div>
-                            <Button variant="outline">Close</Button>
-                        </div>
+                    <DrawerClose>
+                        <Button variant="outline">Close</Button>
                     </DrawerClose>
                 </DrawerFooter>
             </DrawerContent>
diff --git a/components/ZapButton.tsx b/components/ZapButton.tsx
index 6410ca9..a412af9 100644
--- a/components/ZapButton.tsx
+++ b/components/ZapButton.tsx
@@ -85,10 +85,12 @@ export default function ZapButton({ event }: { event: any }) {
 
     return (
         <Drawer>
-            <DrawerTrigger asChild>
+            <DrawerTrigger>
+                {/* <Button variant="default" onClick={onPost}>{events.length} Reactions</Button> */}
                 {isLoading ? (
                     <Button variant="outline"><ReloadIcon className="mr-2 h-4 w-4 animate-spin" /> ⚡️</Button>
                 ) : (
+                    // <Button variant="outline">{events.length} ⚡️ ({sats} sats)</Button>
                     <Button variant="outline">{sats} sats ⚡️</Button>
                 )}
             </DrawerTrigger>
@@ -108,10 +110,8 @@ export default function ZapButton({ event }: { event: any }) {
                 <hr className="my-4" />
                 <ZapButtonList events={events} />
                 <DrawerFooter>
-                    <DrawerClose asChild>
-                        <div>
-                            <Button variant={"outline"}>Close</Button>
-                        </div>
+                    <DrawerClose>
+                        <Button variant={"outline"}>Close</Button>
                     </DrawerClose>
                 </DrawerFooter>
             </DrawerContent>
diff --git a/components/headerComponents/TopNavigation.tsx b/components/headerComponents/TopNavigation.tsx
index 1661f4a..00eab64 100644
--- a/components/headerComponents/TopNavigation.tsx
+++ b/components/headerComponents/TopNavigation.tsx
@@ -11,46 +11,27 @@ import RegisterButton from "./RegisterButton";
 
 export function TopNavigation() {
   const [pubkey, setPubkey] = useState<string | null>(null);
-  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
-    setMounted(true);
-    setPubkey(window.localStorage.getItem('pubkey'));
+    if (typeof window !== 'undefined') {
+      setPubkey(window.localStorage.getItem('pubkey'));
+    }
   }, []);
 
-  // Prevent hydration mismatch by not rendering auth-dependent content until mounted
-  if (!mounted) {
-    return (
-      <nav>
-        <header className="bg-background/80 sticky top-0 z-40 w-full border-b backdrop-blur">
-          <div className="container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0">
-            <TopNavigationItems items={siteConfig.mainNav} />
-            <div className="flex flex-1 items-center justify-end space-x-4">
-              <nav className="flex items-center space-x-2">
-                <DropdownThemeMode />
-              </nav>
-            </div>
-          </div>
-        </header>
-      </nav>
-    );
-  }
-
   return (
-    <nav>
-      <header className="bg-background/80 sticky top-0 z-40 w-full border-b backdrop-blur">
-        <div className="container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0">
-          <TopNavigationItems items={siteConfig.mainNav} />
-          <div className="flex flex-1 items-center justify-end space-x-4">
-            <nav className="flex items-center space-x-2">
-              <DropdownThemeMode />
-              {pubkey === null ? <RegisterButton /> : null}
-              {pubkey === null ? <LoginButton /> : null}
-              {pubkey !== null ? <AvatarDropdown /> : null}
-            </nav>
-          </div>
+    <header className="bg-background/80 sticky top-0 z-40 w-full border-b backdrop-blur">
+      <div className="container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0">
+        <TopNavigationItems items={siteConfig.mainNav} />
+        <div className="flex flex-1 items-center justify-end space-x-4">
+          <nav className="flex items-center space-x-2">
+            <DropdownThemeMode />
+            {pubkey === null ? <RegisterButton /> : null}
+            {pubkey === null ? <LoginButton /> : null}
+            {/* {pubkey !== null ? <Button variant="secondary" onClick={() => { localStorage.removeItem('pubkey'); window.location.reload(); }}>Logout</Button> : null} */}
+            {pubkey !== null ? <AvatarDropdown /> : null}
+          </nav>
         </div>
-      </header>
-    </nav>
+      </div>
+    </header>
   )
 }
\ No newline at end of file