diff --git a/client/src/lib/browserNotification.js b/client/src/lib/browserNotification.js index 3e3036c6..9266cbcc 100644 --- a/client/src/lib/browserNotification.js +++ b/client/src/lib/browserNotification.js @@ -1,11 +1,16 @@ import BadWordsNext from 'bad-words-next'; import en from 'bad-words-next/data/en.json'; -export const requestBrowserNotificationPermissions = () => { +export const requestBrowserNotificationPermissions = async () => { if (!('Notification' in window)) { console.log('Browser does not support desktop notification'); } else { - Notification.requestPermission(); + const res = await Notification.requestPermission(); + if (res === 'granted') { + return true; + } else { + return false; + } } }; diff --git a/client/src/pages/Start.jsx b/client/src/pages/Start.jsx index 80f85cef..396340c3 100644 --- a/client/src/pages/Start.jsx +++ b/client/src/pages/Start.jsx @@ -6,6 +6,7 @@ import { requestBrowserNotificationPermissions } from 'src/lib/browserNotificati import { useApp } from 'src/context/AppContext'; import useCloseChat from 'src/hooks/useCloseChat'; import { useEffect } from 'react'; +import { useDialog } from 'src/context/DialogContext'; const centerElement = 'flex flex-col items-center justify-center'; @@ -13,13 +14,42 @@ const Start = () => { const { app } = useApp(); const navigate = useNavigate(); const { handleClose } = useCloseChat(); + const { setDialog } = useDialog(); + const requestPermission = async () => { + try { + const isGranted = await requestBrowserNotificationPermissions(); + if (!isGranted) { + setDialog({ + isOpen: true, + text: "You've blocked Whisper notifications. Enable them to stay updated, keep track of conversations, and never miss important messages.", + handler: async (response) => { + if (response) { + await requestBrowserNotificationPermissions(); + setDialog({ isOpen: false }); + } else { + setDialog({ isOpen: false }); + } + }, + noBtnText: 'No', + yesBtnText: 'Try Again', + }); + } + + return isGranted; + } catch (error) { + console.error('Error requesting notification permission:', error); + return false; + } + }; useEffect(() => { if (app.isSearching) { navigate('/searching'); } - - requestBrowserNotificationPermissions(); + const checkPermission = async () => { + await requestPermission(); + }; + checkPermission(); }, []); return (