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:
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user