Admin/Todo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix hydration error in ListHeader

Browse Source 
- Add mounted state to prevent SSR/client mismatch
- Permission badge and share button only render after mount
- Modal only renders on client side
This commit is contained in:
Paul Bailey
2025-12-03 00:55:10 +00:00
parent 9a75965b2c
commit 45ebd228d8
1 changed files with 33 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
components/ListHeader.tsx
View File

@@ -1,6 +1,6 @@
'use client' 'use client'
import { useState } from 'react' import { useState, useEffect } from 'react'
import Link from 'next/link' import Link from 'next/link'
import { ArrowLeft, Share2 } from 'lucide-react' import { ArrowLeft, Share2 } from 'lucide-react'
import PermissionBadge from './PermissionBadge' import PermissionBadge from './PermissionBadge'
@@ -41,8 +41,13 @@ export default function ListHeader({
ownerEmail, ownerEmail,
collaborators collaborators
}: ListHeaderProps) { }: ListHeaderProps) {
const [mounted, setMounted] = useState(false)
const [isShareModalOpen, setIsShareModalOpen] = useState(false) const [isShareModalOpen, setIsShareModalOpen] = useState(false)
useEffect(() => {
setMounted(true)
}, [])
return ( return (
<> <>
<div className="mb-6 sm:mb-8"> <div className="mb-6 sm:mb-8">
@@ -63,18 +68,20 @@ export default function ListHeader({
<h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 truncate">{listTitle}</h1> <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 truncate">{listTitle}</h1>
</div> </div>
<div className="flex items-center gap-2 flex-shrink-0"> {mounted && (
<PermissionBadge permission={permission} /> <div className="flex items-center gap-2 flex-shrink-0">
{canShare && ( <PermissionBadge permission={permission} />
<button {canShare && (
onClick={() => setIsShareModalOpen(true)} <button
className="flex items-center gap-2 px-3 py-1.5 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white rounded-lg transition-colors text-sm font-medium" onClick={() => setIsShareModalOpen(true)}
> className="flex items-center gap-2 px-3 py-1.5 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white rounded-lg transition-colors text-sm font-medium"
<Share2 size={16} /> >
<span className="hidden sm:inline">Share</span> <Share2 size={16} />
</button> <span className="hidden sm:inline">Share</span>
)} </button>
</div> )}
</div>
)}
</div> </div>
<p className="text-gray-600 text-sm sm:text-base"> <p className="text-gray-600 text-sm sm:text-base">
@@ -82,17 +89,19 @@ export default function ListHeader({
</p> </p>
</div> </div>
<ShareListModal {mounted && (
isOpen={isShareModalOpen} <ShareListModal
onClose={() => setIsShareModalOpen(false)} isOpen={isShareModalOpen}
listId={listId} onClose={() => setIsShareModalOpen(false)}
listTitle={listTitle} listId={listId}
isOwner={permission === 'owner'} listTitle={listTitle}
ownerId={ownerId} isOwner={permission === 'owner'}
ownerName={ownerName} ownerId={ownerId}
ownerEmail={ownerEmail} ownerName={ownerName}
initialCollaborators={collaborators} ownerEmail={ownerEmail}
/> initialCollaborators={collaborators}
/>
)}
</> </>
) )
} }