Push notifications (#22)

* starting push notifications. problems

* chat push notifications logic.

* add handler for different types. TODO: add more types.

* add accepted request notification type.

* remove comments

* remove credentials.

* remove app json.

.gitignore

@@ -16,4 +16,6 @@ web-report/
 .env
 
 # Because we are using yarn
-package-lock.json
+package-lock.json
+google-services.json
+app.json

package.json

@@ -13,9 +13,9 @@
     "preset": "jest-expo"
   },
   "dependencies": {
-    "@expo/vector-icons": "~10.0.6",
+    "@expo/vector-icons": "^10.0.0",
     "@react-native-community/eslint-config": "^1.1.0",
-    "@react-native-community/masked-view": "0.1.6",
+    "@react-native-community/masked-view": "0.1.10",
     "@react-navigation/bottom-tabs": "^5.2.7",
     "@react-navigation/native": "^5.1.5",
     "@react-navigation/stack": "^5.2.10",
@@ -25,34 +25,35 @@
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-prettier": "^3.1.3",
-    "expo": "~37.0.3",
-    "expo-asset": "~8.1.3",
-    "expo-av": "~8.1.0",
-    "expo-constants": "~9.0.0",
-    "expo-font": "~8.1.0",
-    "expo-image-picker": "~8.1.0",
-    "expo-permissions": "~8.1.0",
-    "expo-video-thumbnails": "~4.1.0",
-    "expo-web-browser": "~8.1.0",
+    "expo": "^38.0.0",
+    "expo-asset": "~8.1.7",
+    "expo-av": "~8.2.1",
+    "expo-constants": "~9.1.1",
+    "expo-font": "~8.2.1",
+    "expo-image-picker": "~8.3.0",
+    "expo-notifications": "~0.3.3",
+    "expo-permissions": "~9.0.1",
+    "expo-video-thumbnails": "~4.2.1",
+    "expo-web-browser": "~8.3.1",
     "firebase": "7.9.0",
     "moment": "^2.26.0",
     "prettier": "^2.0.5",
-    "react": "~16.9.0",
-    "react-dom": "~16.9.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
+    "react": "16.11.0",
+    "react-dom": "16.11.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
     "react-native-gesture-handler": "~1.6.0",
     "react-native-gifted-chat": "^0.16.3",
-    "react-native-safe-area-context": "0.7.3",
-    "react-native-screens": "~2.2.0",
+    "react-native-safe-area-context": "~3.0.7",
+    "react-native-screens": "~2.9.0",
     "react-native-web": "~0.11.7",
     "react-redux": "^7.2.0",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.8.6",
-    "babel-preset-expo": "~8.1.0",
-    "jest-expo": "~37.0.0",
+    "babel-preset-expo": "^8.2.3",
+    "jest-expo": "^38.0.0",
     "react-native-dotenv": "^0.2.0"
   },
   "private": true

src/app/index.js

@@ -1,9 +1,11 @@
 import 'react-native-gesture-handler';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Image } from 'react-native';
+import { useSelector } from 'react-redux';
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import * as Notifications from 'expo-notifications';
 
 import logo from '@assets/tutubo-03.png';
 import { ROUTES } from '@constants/routes';
@@ -21,6 +23,14 @@ import EditVideoScreen from '@screens/EditVideoScreen';
 import TabBarIcon from '@components/TabBarIcon';
 import HeaderButtons from '@components/HeaderButtons';
 
+Notifications.setNotificationHandler({
+  handleNotification: async () => ({
+    shouldShowAlert: true,
+    shouldPlaySound: false,
+    shouldSetBadge: false
+  })
+});
+
 const Stack = createStackNavigator();
 const WallStack = createStackNavigator();
 const Tab = createBottomTabNavigator();

src/app/screens/ChatListScreen/index.js

@@ -11,7 +11,7 @@ import {
 import { useSelector } from 'react-redux';
 
 import { ROUTES } from '@constants/routes';
-import { onNewChat, readMessage } from '@services/ChatService';
+import { onNewChat, readMessage } from '@services/FirestoreService';
 import { formatFirebaseTimestampInWords } from '@utils/date';
 
 import NewChatButton from './components/NewChatButton';

src/app/screens/ChatScreen/index.js

@@ -2,7 +2,7 @@ import React, { useState, useCallback, useEffect } from 'react';
 import { GiftedChat } from 'react-native-gifted-chat';
 import { useSelector } from 'react-redux';
 
-import { on, sendMessages } from '@services/ChatService';
+import { on, sendMessages } from '@services/FirestoreService';
 
 import { renderBubble } from './components/CustomBubble';
 import { renderSend, renderComposer } from './components/CustomInput';

src/app/screens/HomeScreen/index.js

@@ -1,17 +1,38 @@
 import React, { useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { SafeAreaView } from 'react-native';
+import * as Notifications from 'expo-notifications';
 
+import { ROUTES } from '@constants/routes';
+import { registerForPushNotifications } from '@services/NotificationService';
 import VideosList from '@components/VideosList';
 import actionCreators from '@redux/videos/actions';
 
+import { notificationHanlder } from './utils';
+
 import styles from './styles';
 
 function HomeScreen({ navigation }) {
   const dispatch = useDispatch();
 
   const videos = useSelector((state) => state.videos.videos);
   const videosLoading = useSelector((state) => state.videos.loading);
+  const me = useSelector((state) => state.auth.currentUser);
+
+  useEffect(() => {
+    registerForPushNotifications(me.username);
+    Notifications.addNotificationReceivedListener((notification) => {
+      console.warn(notification);
+    });
+    Notifications.addNotificationResponseReceivedListener((response) => {
+      const {type, ...data} = response.notification.request.content.data;
+      const { redirect, payload } = notificationHanlder(
+        response.notification.request.content.data
+      )[type];
+      navigation.navigate(redirect, payload);
+    });
+    return () => Notifications.removeAllNotificationListeners();
+  }, [me, navigation]);
 
   useEffect(() => {
     dispatch(actionCreators.getVideos());

src/app/screens/HomeScreen/utils.js

@@ -0,0 +1,20 @@
+import { ROUTES } from '@constants/routes';
+
+export const notificationHanlder = (data) => ({
+  CHAT_NOTIFICATION: {
+    redirect: ROUTES.Chat,
+    payload: {
+      user: { ...data }
+    }
+  },
+  FRIEND_REQUEST_NOTIFICATION: {
+    redirect: ROUTES.Profile,
+    payload: {
+      tabSelected: 1
+    }
+  },
+  ACCEPTED_REQUEST_NOTIFICATION: {
+    redirect: ROUTES.Profile,
+    payload: { ...data }
+  }
+});

src/app/screens/ProfileScreen/index.js

@@ -35,7 +35,7 @@ import styles from './styles';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 
 function ProfileScreen({ navigation, route }) {
-  const [selection, setSelection] = useState(0);
+  const [selection, setSelection] = useState(route?.params?.tabSelected || 0);
   const [loading, setLoading] = useState(true);
   const [loadingImage, setLoadingImage] = useState(false);
   const [loadingRequests, setLoadingRequests] = useState(false);

src/services/ChatService.js → src/services/FirestoreService.js

@@ -94,3 +94,9 @@ export const onNewChat = (callback, user, me) => {
       });
     });
 };
+
+export const saveNotificationToken = (token, expoToken, username) => {
+  const userRef = db.collection('tokens').doc(username);
+
+  userRef.set({ token, expoToken }, { merge: true });
+};

src/services/NotificationService.js

@@ -0,0 +1,22 @@
+import { Platform } from 'react-native';
+import * as Notifications from 'expo-notifications';
+import * as Permissions from 'expo-permissions';
+import { saveNotificationToken } from './FirestoreService';
+
+export const registerForPushNotifications = async (username) => {
+  const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
+  if (status !== 'granted') {
+    alert('No notification permissions!');
+    return;
+  }
+
+  // Get the token that identifies this device
+  let token = await Notifications.getDevicePushTokenAsync();
+
+  const expoToken = await Notifications.getExpoPushTokenAsync();
+
+  console.warn(token);
+  console.warn(expoToken);
+
+  saveNotificationToken(token, expoToken, username);
+};