Differential D6833 Diff 23294 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 {		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 { 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 electron from '../electron.js';		import electron from '../electron.js';
		import PushNotifModal from '../modals/push-notif-modal.react.js';
import { useSelector } from '../redux/redux-utils.js';		import { useSelector } from '../redux/redux-utils.js';

function useCreatePushSubscription(): () => Promise<void> {		function useCreatePushSubscription(): () => Promise<void> {
const publicKey = useSelector(state => state.pushApiPublicKey);		const publicKey = useSelector(state => state.pushApiPublicKey);

const dispatchActionPromise = useDispatchActionPromise();		const dispatchActionPromise = useDispatchActionPromise();
const callSetDeviceToken = useServerCall(setDeviceToken);		const callSetDeviceToken = useServerCall(setDeviceToken);

Show All 15 Lines	return React.useCallback(async () => {
dispatchActionPromise(		dispatchActionPromise(
setDeviceTokenActionTypes,		setDeviceTokenActionTypes,
callSetDeviceToken(JSON.stringify(subscription)),		callSetDeviceToken(JSON.stringify(subscription)),
);		);
}, [callSetDeviceToken, dispatchActionPromise, publicKey]);		}, [callSetDeviceToken, dispatchActionPromise, publicKey]);
}		}

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

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

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') {
		// 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(<PushNotifModal />);
		}
})();		})();
		// 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(<PushNotifModal />);
		}
		}
		prevLoggedIn.current = loggedIn;
		}, [createPushSubscription, loggedIn, modalContext, prevLoggedIn]);

return null;		return null;
}		}

export { PushNotificationsHandler, useCreatePushSubscription };		export { PushNotificationsHandler, useCreatePushSubscription };