PLT-5630 Implement push notifications and unread badge on app icon (m…

…attermost#338)

* enable ios push notifications

* enable android push notifications

* NOTICE for push notification and message bar

* include message in noty

* re-wording notices

* feedback review

NOTICE.txt

@@ -735,3 +735,69 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
 ---
+
+## react-native-push-notification
+
+This product contains 'react-native-push-notification', a library to provide React Native local and remote notifications for iOS and Android.
+
+* HOMEPAGE
+    * https://github.com/zo0r/react-native-push-notification
+
+* LICENSE:
+
+The MIT License (MIT)
+
+Copyright (c) 2015 Dieam
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+---
+
+## react-native-message-bar
+
+This product contains 'react-native-message-bar', a library for displaying a message bar notification component at the top of the screen for React Native (Android and iOS) projects.
+
+* HOMEPAGE
+    * https://github.com/KBLNY/react-native-message-bar
+
+* LICENSE:
+
+The MIT License (MIT)
+
+Copyright (c) 2016 KBLNY
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+---

android/app/build.gradle

@@ -143,6 +143,10 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-push-notification')
+    compile ('com.google.android.gms:play-services-gcm:9.0.0') {
+        force = true;
+    }
     compile project(':react-native-cookies')
     compile project(':react-native-vector-icons')
     compile project(':react-native-svg')

android/app/google-services.json

@@ -0,0 +1,42 @@
+{
+  "project_info": {
+    "project_number": "184930218130",
+    "firebase_url": "https://api-7231322553409637977-752355.firebaseio.com",
+    "project_id": "api-7231322553409637977-752355",
+    "storage_bucket": "api-7231322553409637977-752355.appspot.com"
+  },
+  "client": [
+    {
+      "client_info": {
+        "mobilesdk_app_id": "1:184930218130:android:a0e553d1a1f043b5",
+        "android_client_info": {
+          "package_name": "com.mattermost.react.native"
+        }
+      },
+      "oauth_client": [
+        {
+          "client_id": "184930218130-8nahrspll1opff0uogtkh2qsv8coqngo.apps.googleusercontent.com",
+          "client_type": 3
+        }
+      ],
+      "api_key": [
+        {
+          "current_key": "AIzaSyCkZkU2ECVg-mmdCG5OoHHQXtKiENuvWPE"
+        }
+      ],
+      "services": {
+        "analytics_service": {
+          "status": 1
+        },
+        "appinvite_service": {
+          "status": 1,
+          "other_platform_oauth_client": []
+        },
+        "ads_service": {
+          "status": 2
+        }
+      }
+    }
+  ],
+  "configuration_version": "1"
+}

android/app/src/main/AndroidManifest.xml

@@ -5,6 +5,13 @@
 
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+    <uses-permission android:name="android.permission.WAKE_LOCK" />
+    <permission
+            android:name="${applicationId}.permission.C2D_MESSAGE"
+            android:protectionLevel="signature" />
+    <uses-permission android:name="${applicationId}.permission.C2D_MESSAGE" />
+    <uses-permission android:name="android.permission.VIBRATE" />
+    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
 
     <uses-sdk
         android:minSdkVersion="16"
@@ -27,6 +34,30 @@
         </intent-filter>
       </activity>
       <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+      <receiver
+              android:name="com.google.android.gms.gcm.GcmReceiver"
+              android:exported="true"
+              android:permission="com.google.android.c2dm.permission.SEND" >
+          <intent-filter>
+              <action android:name="com.google.android.c2dm.intent.RECEIVE" />
+              <category android:name="${applicationId}" />
+          </intent-filter>
+      </receiver>
+
+      <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" />
+      <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver">
+          <intent-filter>
+              <action android:name="android.intent.action.BOOT_COMPLETED" />
+          </intent-filter>
+      </receiver>
+      <service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationRegistrationService"/>
+      <service
+              android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService"
+              android:exported="false" >
+          <intent-filter>
+              <action android:name="com.google.android.c2dm.intent.RECEIVE" />
+          </intent-filter>
+      </service>
     </application>
 
 </manifest>

android/app/src/main/java/com/mattermost/MainApplication.java

@@ -5,6 +5,7 @@
 
 import com.facebook.react.ReactApplication;
 import com.psykar.cookiemanager.CookieManagerPackage;
+import com.dieam.reactnativepushnotification.ReactNativePushNotificationPackage;
 import com.oblador.vectoricons.VectorIconsPackage;
 import com.horcrux.svg.RNSvgPackage;
 import com.facebook.react.ReactInstanceManager;
@@ -29,6 +30,7 @@ protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
             new CookieManagerPackage(),
+            new ReactNativePushNotificationPackage(),
             new VectorIconsPackage(),
             new RNSvgPackage()
       );

android/build.gradle

@@ -6,6 +6,7 @@ buildscript {
     }
     dependencies {
         classpath 'com.android.tools.build:gradle:1.3.1'
+        classpath 'com.google.gms:google-services:3.0.0'
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files

android/settings.gradle

@@ -1,6 +1,8 @@
 rootProject.name = 'Mattermost'
 include ':react-native-cookies'
 project(':react-native-cookies').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-cookies/android')
+include ':react-native-push-notification'
+project(':react-native-push-notification').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-push-notification/android')
 include ':react-native-vector-icons'
 project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
 

app/actions/storage/index.js

@@ -19,11 +19,17 @@ export function loadStorage() {
 
             const actions = [
                 {type: GeneralTypes.RECEIVED_APP_CREDENTIALS, data: credentials},
-                {type: GeneralTypes.RECEIVED_SERVER_VERSION, data: serverVersion},
-                {type: TeamsTypes.SELECT_TEAM, data: (currentTeamId || '')},
-                {type: ChannelTypes.SELECT_CHANNEL, data: currentChannelId}
+                {type: GeneralTypes.RECEIVED_SERVER_VERSION, data: serverVersion}
             ];
 
+            if (currentTeamId) {
+                actions.push({type: TeamsTypes.SELECT_TEAM, data: currentTeamId});
+            }
+
+            if (currentChannelId) {
+                actions.push({type: ChannelTypes.SELECT_CHANNEL, data: currentChannelId});
+            }
+
             // Load post drafts if there are any
             if (otherStorage.postDrafts) {
                 Object.keys(otherStorage.postDrafts).forEach((d) => {

app/actions/views/root.js

@@ -1,11 +1,19 @@
 // Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import {NavigationTypes} from 'app/constants';
+import {NavigationTypes, ViewTypes} from 'app/constants';
 import Routes from 'app/navigation/routes';
+import {
+    handleSelectChannel,
+    loadChannelsIfNecessary,
+    loadProfilesAndTeamMembersForDMSidebar
+} from 'app/actions/views/channel';
+import {goToChannelView} from 'app/actions/views/load_team';
+import {handleTeamChange, selectFirstAvailableTeam} from 'app/actions/views/select_team';
 import {updateStorage} from 'app/actions/storage';
 
 import Client from 'service/client';
+import {markChannelAsRead, viewChannel} from 'service/actions/channels';
 import {getClientConfig, getLicenseConfig, setServerVersion} from 'service/actions/general';
 import {loadMe} from 'service/actions/users';
 
@@ -37,8 +45,45 @@ export function loadConfigAndLicense(serverVersion) {
     };
 }
 
+export function queueNotification(notification) {
+    return async (dispatch, getState) => {
+        dispatch({type: ViewTypes.NOTIFICATION_CHANGED, data: notification}, getState);
+    };
+}
+
+export function clearNotification() {
+    return async (dispatch, getState) => {
+        dispatch({type: ViewTypes.NOTIFICATION_CHANGED, data: null}, getState);
+    };
+}
+
+export function goToNotification(notification) {
+    return async (dispatch, getState) => {
+        const {data} = notification;
+        let teamId = data.team_id;
+        if (teamId) {
+            const {teams} = getState().entities.teams;
+            await handleTeamChange(teams[teamId])(dispatch, getState);
+            loadChannelsIfNecessary(teamId)(dispatch, getState);
+        } else {
+            await selectFirstAvailableTeam()(dispatch, getState);
+            teamId = getState().entities.teams.currentId;
+        }
+
+        const channelId = data.channel_id;
+        viewChannel(teamId, channelId)(dispatch, getState);
+        loadProfilesAndTeamMembersForDMSidebar(teamId)(dispatch, getState);
+        await handleSelectChannel(channelId)(dispatch, getState);
+        goToChannelView()(dispatch, getState);
+        markChannelAsRead(teamId, channelId)(dispatch, getState);
+    };
+}
+
 export default {
     goToSelectServer,
     loadConfigAndLicense,
-    setStoreFromLocalData
+    setStoreFromLocalData,
+    queueNotification,
+    clearNotification,
+    goToNotification
 };

app/components/push_notification/index.js

@@ -0,0 +1,35 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {bindActionCreators} from 'redux';
+import {connect} from 'react-redux';
+
+import {goToNotification, queueNotification} from 'app/actions/views/root';
+import {setDeviceToken} from 'service/actions/general';
+import {getUnreads} from 'service/selectors/entities/channels';
+
+import PushNotification from './push_notification';
+
+function mapStateToProps(state, ownProps) {
+    const {currentId: currentTeamId} = state.entities.teams;
+    const {currentId: currentChannelId} = state.entities.channels;
+
+    return {
+        ...ownProps,
+        currentTeamId,
+        currentChannelId,
+        ...getUnreads(state)
+    };
+}
+
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators({
+            goToNotification,
+            queueNotification,
+            setDeviceToken
+        }, dispatch)
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(PushNotification);