From e48d7264dec72c5daad3365e2127519fee0c8cd1 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Mon, 13 Jun 2022 16:58:11 -0700 Subject: Handle push notification tokens --- modern/src/common/components/NativeInterface.js | 64 +++++++++++++++++++++++++ modern/src/index.js | 2 + modern/src/login/LoginPage.js | 2 + 3 files changed, 68 insertions(+) create mode 100644 modern/src/common/components/NativeInterface.js diff --git a/modern/src/common/components/NativeInterface.js b/modern/src/common/components/NativeInterface.js new file mode 100644 index 00000000..75b954a8 --- /dev/null +++ b/modern/src/common/components/NativeInterface.js @@ -0,0 +1,64 @@ +import { useEffect, useState } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { useEffectAsync } from '../../reactHelper'; +import { sessionActions } from '../../store'; + +export const nativePostMessage = (message) => { + if (window.webkit && window.webkit.messageHandlers.appInterface) { + window.webkit.messageHandlers.appInterface.postMessage(message); + } + if (window.appInterface) { + window.appInterface.postMessage(message); + } +}; + +const listeners = new Set(); +window.updateNotificationToken = (token) => { + listeners.forEach((listener) => listener(token)); +}; + +const NativeInterface = () => { + const dispatch = useDispatch(); + + const user = useSelector((state) => state.session.user); + const [token, setToken] = useState(null); + + useEffect(() => { + const listener = (token) => setToken(token); + listeners.add(listener); + return () => { + listeners.delete(listener); + }; + }, [setToken]); + + useEffectAsync(async () => { + if (user && token) { + setToken(null); + + const tokens = user.attributes.notificationTokens?.split(',') || []; + const updatedUser = { + ...user, + attributes: { + ...user.attributes, + notificationTokens: [...tokens, token].join(','), + }, + }; + + const response = await fetch(`/api/users/${user.id}`, { + method: 'PUT', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(updatedUser), + }); + + if (response.ok) { + dispatch(sessionActions.updateUser(await response.json())); + } else { + throw Error(await response.text()); + } + } + }, [user, token, setToken]); + + return null; +}; + +export default NativeInterface; diff --git a/modern/src/index.js b/modern/src/index.js index dbbf2da4..bfbb5efe 100644 --- a/modern/src/index.js +++ b/modern/src/index.js @@ -13,6 +13,7 @@ import theme from './common/theme'; import Navigation from './Navigation'; import preloadImages from './map/core/preloadImages'; import * as serviceWorkerRegistration from './serviceWorkerRegistration'; +import NativeInterface from './common/components/NativeInterface'; preloadImages(); @@ -31,6 +32,7 @@ ReactDOM.render( + diff --git a/modern/src/login/LoginPage.js b/modern/src/login/LoginPage.js index 0077f6bd..34d0e7d8 100644 --- a/modern/src/login/LoginPage.js +++ b/modern/src/login/LoginPage.js @@ -13,6 +13,7 @@ import { useLocalization, useTranslation } from '../common/components/Localizati import LoginLayout from './LoginLayout'; import usePersistedState from '../common/util/usePersistedState'; import logoSvg from '../resources/images/logo.svg'; +import { nativePostMessage } from '../common/components/NativeInterface'; const useStyles = makeStyles((theme) => ({ legacy: { @@ -73,6 +74,7 @@ const LoginPage = () => { if (response.ok) { const user = await response.json(); dispatch(sessionActions.updateUser(user)); + nativePostMessage('login'); navigate('/'); } else { throw Error(await response.text()); -- cgit v1.2.3