Differential D7030 Diff 23784 web/push-notif/push-notifs-handler.js

Changeset View

Standalone View

web/push-notif/push-notifs-handler.js

// @flow		// @flow

import * as React from 'react';		import * as React from 'react';
import { useDispatch } from 'react-redux';		import { useDispatch } from 'react-redux';

import {		import {
setDeviceToken,		setDeviceToken,
setDeviceTokenActionTypes,		setDeviceTokenActionTypes,
} from 'lib/actions/device-actions.js';		} from 'lib/actions/device-actions.js';
import { useModalContext } from 'lib/components/modal-provider.react.js';		import { useModalContext } from 'lib/components/modal-provider.react.js';
import { isLoggedIn } from 'lib/selectors/user-selectors.js';		import { isLoggedIn } from 'lib/selectors/user-selectors.js';
import {		import {
useDispatchActionPromise,		useDispatchActionPromise,
useServerCall,		useServerCall,
} from 'lib/utils/action-utils.js';		} from 'lib/utils/action-utils.js';
		import {
		shouldSkipPushPermissionAlert,
		recordNotifPermissionAlertActionType,
		} from 'lib/utils/push-alerts.js';

import electron from '../electron.js';		import electron from '../electron.js';
import PushNotifModal from '../modals/push-notif-modal.react.js';		import PushNotifModal from '../modals/push-notif-modal.react.js';
import { updateNavInfoActionType } from '../redux/action-types.js';		import { updateNavInfoActionType } from '../redux/action-types.js';
import { useSelector } from '../redux/redux-utils.js';		import { useSelector } from '../redux/redux-utils.js';

function useCreateDesktopPushSubscription() {		function useCreateDesktopPushSubscription() {
const dispatchActionPromise = useDispatchActionPromise();		const dispatchActionPromise = useDispatchActionPromise();
▲ Show 20 Lines • Show All 54 Lines • ▼ Show 20 Lines	return React.useCallback(async () => {
);		);
}, [callSetDeviceToken, dispatchActionPromise, publicKey]);		}, [callSetDeviceToken, dispatchActionPromise, publicKey]);
}		}

function PushNotificationsHandler(): React.Node {		function PushNotificationsHandler(): React.Node {
useCreateDesktopPushSubscription();		useCreateDesktopPushSubscription();
const createPushSubscription = useCreatePushSubscription();		const createPushSubscription = useCreatePushSubscription();

		const notifPermissionAlertInfo = useSelector(
		state => state.notifPermissionAlertInfo,
		);

const modalContext = useModalContext();		const modalContext = useModalContext();
const loggedIn = useSelector(isLoggedIn);		const loggedIn = useSelector(isLoggedIn);

const dispatch = useDispatch();		const dispatch = useDispatch();

React.useEffect(() => {		React.useEffect(() => {
(async () => {		(async () => {
if (!navigator.serviceWorker \|\| electron) {		if (!navigator.serviceWorker \|\| electron) {
return;		return;
}		}

await navigator.serviceWorker.register('/worker/notif', { scope: '/' });		await navigator.serviceWorker.register('/worker/notif', { scope: '/' });

if (Notification.permission === 'granted') {		if (Notification.permission === 'granted') {
// Make sure the subscription is current if we have the permissions		// Make sure the subscription is current if we have the permissions
await createPushSubscription();		await createPushSubscription();
} else if (Notification.permission === 'default' && loggedIn) {		} else if (
		Notification.permission === 'default' &&
		loggedIn &&
		!shouldSkipPushPermissionAlert(notifPermissionAlertInfo)
		) {
// Ask existing users that are already logged in for permission		// Ask existing users that are already logged in for permission
modalContext.pushModal(<PushNotifModal />);		modalContext.pushModal(<PushNotifModal />);
		dispatch({
		type: recordNotifPermissionAlertActionType,
		payload: { time: Date.now() },
		});
}		}
})();		})();
// eslint-disable-next-line react-hooks/exhaustive-deps		// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);		}, []);

// Ask for permission on login		// Ask for permission on login
const prevLoggedIn = React.useRef(loggedIn);		const prevLoggedIn = React.useRef(loggedIn);
React.useEffect(() => {		React.useEffect(() => {
if (!navigator.serviceWorker \|\| electron) {		if (!navigator.serviceWorker \|\| electron) {
return;		return;
}		}

if (!prevLoggedIn.current && loggedIn) {		if (!prevLoggedIn.current && loggedIn) {
if (Notification.permission === 'granted') {		if (Notification.permission === 'granted') {
createPushSubscription();		createPushSubscription();
} else if (Notification.permission === 'default') {		} else if (
		Notification.permission === 'default' &&
		!shouldSkipPushPermissionAlert(notifPermissionAlertInfo)
		) {
modalContext.pushModal(<PushNotifModal />);		modalContext.pushModal(<PushNotifModal />);
		dispatch({
		type: recordNotifPermissionAlertActionType,
		payload: { time: Date.now() },
		});
}		}
}		}
prevLoggedIn.current = loggedIn;		prevLoggedIn.current = loggedIn;
}, [createPushSubscription, loggedIn, modalContext, prevLoggedIn]);		}, [
		createPushSubscription,
		dispatch,
		loggedIn,
		modalContext,
		notifPermissionAlertInfo,
		prevLoggedIn,
		]);

// Redirect to thread on notification click		// Redirect to thread on notification click
React.useEffect(() => {		React.useEffect(() => {
if (!navigator.serviceWorker \|\| electron) {		if (!navigator.serviceWorker \|\| electron) {
return;		return;
}		}

const callback = (event: MessageEvent) => {		const callback = (event: MessageEvent) => {
Show All 24 Lines