Implement push notifications

Note this also stores the device token in the backend. This ports
#1.

Author: sauloperez

App.js

@@ -1,9 +1,19 @@
 import React, { useState, useEffect, useRef } from 'react';
+import * as Notifications from "expo-notifications";
 import { StatusBar } from 'expo-status-bar';
 import { WebView } from 'react-native-webview';
+import registerForPushNotificationsAsync from './lib/pushNotifications';
 import { StyleSheet, Text, View, BackHandler } from 'react-native';
 import * as Updates from 'expo-updates';
 
+Notifications.setNotificationHandler({
+  handleNotification: async () => ({
+    shouldShowAlert: true,
+    shouldPlaySound: false,
+    shouldSetBadge: false,
+  }),
+});
+
 const baseUrl = () => {
   const { releaseChannel } = Updates;
   console.log('releaseChannel =', releaseChannel);
@@ -15,6 +25,8 @@ const baseUrl = () => {
 
 export default function App() {
   const [currentUrl, setCurrentUrl] = useState(baseUrl());
+  const [expoPushToken, setExpoPushToken] = useState("");
+  const responseListener = useRef();
 
   const webViewRef = useRef(null);
 
@@ -36,14 +48,50 @@ export default function App() {
     return () => backHandler.remove();
   }, []);
 
+  useEffect(() => {
+    registerForPushNotificationsAsync().then((token) =>
+      setExpoPushToken(token)
+    );
+
+    responseListener.current =
+      Notifications.addNotificationResponseReceivedListener((response) => {
+        console.log('content =', response.notification.request.content);
+        const { url } = response.notification.request.content.data;
+        setCurrentUrl(`${baseUrl()}${url}`);
+      });
+
+    return () => {
+      Notifications.removeNotificationSubscription(responseListener.current);
+    };
+  }, []);
+
+  const handleLoggedInPage = (webview, token) => {
+    webview?.injectJavaScript(
+      `window.TimeOverflowRegisterExpoDeviceToken(\'${token}\');`
+    );
+  };
+
+  const injectCustomJavaScript = (url) => {
+    if (/members/.test(url)) {
+      handleLoggedInPage(webViewRef.current, expoPushToken);
+    }
+  };
+
+  const handleStateChange = (navState) => {
+    console.log('state change =', navState);
+    const { url } = navState;
+    setCurrentUrl(url);
+    injectCustomJavaScript(url);
+  };
+
   return (
     <>
       <WebView
         ref={(ref) => (webViewRef.current = ref)}
         style={styles.container}
         source={{ uri: currentUrl }}
         scalesPageToFit={false}
-        // onNavigationStateChange={handleStateChange}
+        onNavigationStateChange={handleStateChange}
       />
     </>
   );

lib/pushNotifications.js

@@ -1,22 +1,38 @@
-import { Permissions, Notifications } from 'expo';
+import * as Device from 'expo-device';
+import * as Notifications from 'expo-notifications';
 
-export async function registerForPushNotificationsAsync() {
-  const { status: existingStatus } = await Permissions.getAsync(Permissions.NOTIFICATIONS);
+export default async function registerForPushNotificationsAsync() {
+  let token;
 
-  let finalStatus = existingStatus;
+  if (Device.isDevice) {
+    const { status: existingStatus } = await Notifications.getPermissionsAsync();
 
-  // only ask if permissions have not already been determined, because
-  // iOS won't necessarily prompt the user a second time.
-  if (existingStatus !== 'granted') {
-    // Android remote notification permissions are granted during the app
-    // install, so this will only ask on iOS
-    const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
-    finalStatus = status;
+    let finalStatus = existingStatus;
+
+    if (existingStatus !== 'granted') {
+      const { status } = await Notifications.requestPermissionsAsync();
+      finalStatus = status;
+    }
+
+    if (finalStatus !== 'granted') {
+      alert('Failed to get push token for push notification!');
+      return;
+    }
+
+    token = (await Notifications.getExpoPushTokenAsync()).data;
+    console.log('token =', token);
+  } else {
+    console.log('Must use physical device for Push Notifications');
   }
 
-  // Stop here if the user did not grant permissions
-  if (finalStatus !== 'granted') return;
+  if (Platform.OS === 'android') {
+    Notifications.setNotificationChannelAsync('default', {
+      name: 'default',
+      importance: Notifications.AndroidImportance.MAX,
+      vibrationPattern: [0, 250, 250, 250],
+      lightColor: '#FF231F7C',
+    });
+  }
 
-  // Get the token that uniquely identifies this device
-  return await Notifications.getExpoPushTokenAsync();
+  return token;
 }