fix: prevent hydration error in NotificationPrompt

Add mounted state to prevent SSR rendering.
Component now only renders after client-side mount.
Fixes login blocking hydration error.
This commit is contained in:
2025-12-07 01:59:55 +00:00
parent 6508e27391
commit 1838502b8b

View File

@@ -8,8 +8,15 @@ export default function NotificationPrompt() {
const { permission, isSubscribed, subscribe } = usePushNotifications(); const { permission, isSubscribed, subscribe } = usePushNotifications();
const [showPrompt, setShowPrompt] = useState(false); const [showPrompt, setShowPrompt] = useState(false);
const [dismissed, setDismissed] = useState(false); const [dismissed, setDismissed] = useState(false);
const [mounted, setMounted] = useState(false);
useEffect(() => { useEffect(() => {
setMounted(true);
}, []);
useEffect(() => {
if (!mounted) return;
// Check if we should show the prompt // Check if we should show the prompt
const shouldShow = const shouldShow =
'Notification' in window && 'Notification' in window &&
@@ -27,7 +34,7 @@ export default function NotificationPrompt() {
return () => clearTimeout(timer); return () => clearTimeout(timer);
} }
}, [permission, isSubscribed, dismissed]); }, [mounted, permission, isSubscribed, dismissed]);
const handleEnable = async () => { const handleEnable = async () => {
const success = await subscribe(); const success = await subscribe();
@@ -42,12 +49,14 @@ export default function NotificationPrompt() {
}; };
const handleDismissForever = () => { const handleDismissForever = () => {
localStorage.setItem('notification-prompt-dismissed', 'true'); if (typeof localStorage !== 'undefined') {
localStorage.setItem('notification-prompt-dismissed', 'true');
}
setShowPrompt(false); setShowPrompt(false);
setDismissed(true); setDismissed(true);
}; };
if (!showPrompt) { if (!mounted || !showPrompt) {
return null; return null;
} }