diff --git a/web/push-notif/push-notifs-handler.js b/web/push-notif/push-notifs-handler.js --- a/web/push-notif/push-notifs-handler.js +++ b/web/push-notif/push-notifs-handler.js @@ -6,12 +6,15 @@ setDeviceToken, setDeviceTokenActionTypes, } from 'lib/actions/device-actions.js'; +import { useModalContext } from 'lib/components/modal-provider.react.js'; +import { isLoggedIn } from 'lib/selectors/user-selectors.js'; import { useDispatchActionPromise, useServerCall, } from 'lib/utils/action-utils.js'; import electron from '../electron.js'; +import PushNotifModal from '../modals/push-notif-modal.react.js'; import { useSelector } from '../redux/redux-utils.js'; function useCreatePushSubscription(): () => Promise { @@ -43,6 +46,11 @@ } function PushNotificationsHandler(): React.Node { + const createPushSubscription = useCreatePushSubscription(); + + const modalContext = useModalContext(); + const loggedIn = useSelector(isLoggedIn); + React.useEffect(() => { (async () => { if (!navigator.serviceWorker || electron) { @@ -50,9 +58,35 @@ } await navigator.serviceWorker.register('/worker/notif', { scope: '/' }); + + if (Notification.permission === 'granted') { + // Make sure the subscription is current if we have the permissions + await createPushSubscription(); + } else if (Notification.permission === 'default' && loggedIn) { + // Ask existing users that are already logged in for permission + modalContext.pushModal(); + } })(); + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + // Ask for permission on login + const prevLoggedIn = React.useRef(loggedIn); + React.useEffect(() => { + if (!navigator.serviceWorker || electron) { + return; + } + + if (!prevLoggedIn.current && loggedIn) { + if (Notification.permission === 'granted') { + createPushSubscription(); + } else if (Notification.permission === 'default') { + modalContext.pushModal(); + } + } + prevLoggedIn.current = loggedIn; + }, [createPushSubscription, loggedIn, modalContext, prevLoggedIn]); + return null; }