Differential D6835 Diff 22927 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 {		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 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 { 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 20 Lines
}		}

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

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

		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: '/' });

Show All 20 Lines	if (!prevLoggedIn.current && loggedIn) {
createPushSubscription();		createPushSubscription();
} else if (Notification.permission === 'default') {		} else if (Notification.permission === 'default') {
modalContext.pushModal(<PushNotifModal />);		modalContext.pushModal(<PushNotifModal />);
}		}
}		}
prevLoggedIn.current = loggedIn;		prevLoggedIn.current = loggedIn;
}, [createPushSubscription, loggedIn, modalContext, prevLoggedIn]);		}, [createPushSubscription, loggedIn, modalContext, prevLoggedIn]);

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

		const callback = (event: MessageEvent) => {
		if (typeof event.data !== 'object' \|\| !event.data) {
		return;
		}

		if (event.data.targetThreadID) {
		const payload = {
		chatMode: 'view',
		activeChatThreadID: event.data.targetThreadID,
		tab: 'chat',
		};

		dispatch({ type: updateNavInfoActionType, payload });
		}
		};

		navigator.serviceWorker?.addEventListener('message', callback);
		() => navigator.serviceWorker?.removeEventListener('message', callback);
		ashoatUnsubmitted Not Done Inline Actions Is the `?` after `serviceWorker` necessary here? It seems like you check that on line 96 ashoat: Is the `?` after `serviceWorker` necessary here? It seems like you check that on line 96
		inkaUnsubmitted Not Done Inline Actions Shouldn't there be a `return`? inka: Shouldn't there be a `return`?
		ashoatUnsubmitted Not Done Inline Actions `return;` is implied at the end of a function ashoat: `return;` is implied at the end of a function
		inkaUnsubmitted Not Done Inline Actions I meant that we have to return the cleanup lambda from the `useEffect` return () => navigator.serviceWorker?.removeEventListener('message', callback); is that not right? inka: I meant that we have to return the cleanup lambda from the `useEffect` ``` return () =>…
		}, [dispatch]);

return null;		return null;
}		}

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