Add notifications

API.js

@@ -135,6 +135,9 @@ const API = {
     getVideo(videoId) {
         return getCall("/post/video/" + videoId);
     },
+    registerToken(token) {
+        return postCall("/token/", {token});
+    },
     deletePost(postid){
         return deleteCall("/post/" + postid);
     },

App.js

@@ -1,5 +1,5 @@
 import { StatusBar } from 'expo-status-bar';
-import React from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
@@ -8,8 +8,11 @@ import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import Login from "./Views/Login.js"
 import Feed from "./Views/Feed.js"
 import Profile from "./Views/Profile.js"
-import Notifications from './Views/Notifications.js';
+import NotificationsView from './Views/NotificationsView.js';
 import SinglePost from './Views/SinglePost.js'
+import * as Device from 'expo-device';
+import * as Notifications from 'expo-notifications';
+import API from './API.js';
 
 
 const Tab = createMaterialBottomTabNavigator();
@@ -25,7 +28,77 @@ const theme = {
     },
 };
 
+Notifications.setNotificationHandler({
+    handleNotification: async () => ({
+        shouldShowAlert: true,
+        shouldPlaySound: false,
+        shouldSetBadge: false,
+    }),
+});
+
+async function registerForPushNotificationsAsync() {
+    let token;
+    if (Device.isDevice) {
+        const { status: existingStatus } = await Notifications.getPermissionsAsync();
+        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);
+    } else {
+        alert('Must use physical device for Push Notifications');
+    }
+
+    if (Platform.OS === 'android') {
+        Notifications.setNotificationChannelAsync('default', {
+            name: 'default',
+            importance: Notifications.AndroidImportance.MAX,
+            vibrationPattern: [0, 250, 250, 250],
+            lightColor: '#FF231F7C',
+        });
+    }
+    console.log(token);
+    return token;
+}
+
+
+
 const MainNavigation = () => {
+    const [expoPushToken, setExpoPushToken] = useState('');
+    const [notification, setNotification] = useState(false);
+    const notificationListener = useRef();
+    const responseListener = useRef();
+
+    useEffect(() => {
+        registerForPushNotificationsAsync().then(async (token) => {
+            let isLoggedIn = await API.isLoggedIn();
+            if (isLoggedIn) API.registerToken(token);
+            return setExpoPushToken(token);
+        });
+
+        // This listener is fired whenever a notification is received while the app is foregrounded
+        notificationListener.current = Notifications.addNotificationReceivedListener(notification => {
+            setNotification(notification);
+        });
+
+        // This listener is fired whenever a user taps on or interacts with a notification (works when app is foregrounded, backgrounded, or killed)
+        responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {
+            console.log(response);
+        });
+
+        return () => {
+            Notifications.removeNotificationSubscription(notificationListener.current);
+            Notifications.removeNotificationSubscription(responseListener.current);
+        };
+    }, []);
+
+
     return (
         <Tab.Navigator initialRouteName="Home"
             activeColor="#0d6efd"
@@ -49,7 +122,7 @@ const MainNavigation = () => {
             />
             <Tab.Screen
                 name="Notifications"
-                component={Notifications} 
+                component={NotificationsView}
                 options={{
                     tabBarLabel: 'Notifications',
                     tabBarIcon: ({ color }) => (

Views/NotificationsView.js

@@ -2,20 +2,11 @@ import { StatusBar } from 'expo-status-bar';
 import React, { useState, useEffect } from 'react';
 import { View, Text, StyleSheet, SafeAreaView, FlatList } from 'react-native';
 import { Card } from 'react-native-paper';
-import API from './../API.js';
-import Post from './../components/Post.js';
+import API from '../API.js';
+import Post from '../components/Post.js';
 import Moment from 'moment';
 
-
-let LoadPost = ({ postid, viewer }) => {
-    let [post, setPost] = useState({});
-    useEffect(async () => {
-        setPost(await API.getPost(postid));
-    }, [postid]);
-    return (post._id ? <Post post={post} viewer={viewer} /> : null);
-};
-
-let Notifications = ({ navigation, route }) => {
+let NotificationsView = ({ navigation, route }) => {
     let [Me, setMeProfile] = useState({});
     let [notifications, setNotifications] = useState([]);
     useEffect(async () => {
@@ -24,7 +15,6 @@ let Notifications = ({ navigation, route }) => {
         setNotifications(r.notifications)
     }, [route.params]);
     const renderNotification = (({ item }) => {
-        //return (<LoadPost postid={item.postid} viewer={Me} />);
         const gotToPost = () => {
             navigation.navigate('SinglePost', { postid: item.postid, viewer: Me });
         };
@@ -55,7 +45,7 @@ let Notifications = ({ navigation, route }) => {
     );
 }
 
-export default Notifications;
+export default NotificationsView;
 
 const styles = StyleSheet.create({
     container: {

Views/Video.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { View, StyleSheet, Button } from 'react-native';
+import { Video, AVPlaybackStatus } from 'expo-av';
+
+export default function App({videoUrl}) {
+  const video = React.useRef(null);
+  const [status, setStatus] = React.useState({});
+  return (
+    <View>
+      <Video
+        ref={video}
+        style={styles.video}
+        source={{
+          uri: videoUrl,
+        }}
+        useNativeControls
+        resizeMode="contain"
+        isLooping
+        onPlaybackStatusUpdate={status => setStatus(() => status)}
+      />
+      <View style={styles.buttons}>
+        <Button
+          title={status.isPlaying ? 'Pause' : 'Play'}
+          onPress={() =>
+            status.isPlaying ? video.current.pauseAsync() : video.current.playAsync()
+          }
+        />
+      </View>
+    </View>
+  );
+}

app.json

@@ -17,13 +17,15 @@
       "**/*"
     ],
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": false,
+      "bundleIdentifier": "com.emi.social"
     },
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#FFFFFF"
-      }
+      },
+      "package": "com.emi.social"
     },
     "web": {
       "favicon": "./assets/favicon.png"

package.json

@@ -28,7 +28,10 @@
     "react-native-web": "0.17.1",
     "react-native-webview": "^11.17.2",
     "@react-native-async-storage/async-storage": "~1.15.0",
-    "expo-av": "~10.1.3"
+    "expo-av": "~10.1.3",
+    "expo-notifications": "~0.13.3",
+    "expo-device": "~4.0.3",
+    "expo-updates": "~0.10.15"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9"