Add desktop dock icon indicator in Electron

desktop/ELECTRON_EVENTS.js

@@ -0,0 +1,6 @@
+const ELECTRON_EVENTS = {
+    REQUEST_UPDATE_BADGE_COUNT: 'request-update-badge-count',
+    REQUEST_VISIBILITY: 'request_visibility',
+};
+
+module.exports = ELECTRON_EVENTS;

ios/Podfile.lock

@@ -310,6 +310,8 @@ PODS:
     - React-jsi (= 0.63.2)
   - RNCAsyncStorage (1.11.0):
     - React
+  - RNCPushNotificationIOS (1.5.0):
+    - React
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
     - Yoga (~> 1.14)
@@ -367,6 +369,7 @@ DEPENDENCIES:
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
+  - "RNCPushNotificationIOS (from `../node_modules/@react-native-community/push-notification-ios`)"
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -447,6 +450,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   RNCAsyncStorage:
     :path: "../node_modules/@react-native-community/async-storage"
+  RNCPushNotificationIOS:
+    :path: "../node_modules/@react-native-community/push-notification-ios"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -493,6 +498,7 @@ SPEC CHECKSUMS:
   React-RCTVibration: 4d2e726957f4087449739b595f107c0d4b6c2d2d
   ReactCommon: a0a1edbebcac5e91338371b72ffc66aa822792ce
   RNCAsyncStorage: db711e29e5e0500d9bd21aa0c2e397efa45302b1
+  RNCPushNotificationIOS: 8025ff0b610d7b28d29ddc1b619cd55814362e4c
   Yoga: 7740b94929bbacbddda59bf115b5317e9a161598
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 

ios/ReactNativeChat/AppDelegate.h

@@ -1,7 +1,8 @@
+#import <UserNotifications/UNUserNotificationCenter.h>
 #import <React/RCTBridgeDelegate.h>
 #import <UIKit/UIKit.h>
 
-@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate>
+@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate, UNUserNotificationCenterDelegate>
 
 @property (nonatomic, strong) UIWindow *window;
 

ios/ReactNativeChat/AppDelegate.m

@@ -4,6 +4,9 @@
 #import <React/RCTBundleURLProvider.h>
 #import <React/RCTRootView.h>
 
+#import <UserNotifications/UserNotifications.h>
+#import <RNCPushNotificationIOS.h>
+
 #ifdef FB_SONARKIT_ENABLED
 #import <FlipperKit/FlipperClient.h>
 #import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
@@ -43,9 +46,55 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
   rootViewController.view = rootView;
   self.window.rootViewController = rootViewController;
   [self.window makeKeyAndVisible];
+
+  // Define UNUserNotificationCenter
+  UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter];
+  center.delegate = self;
+
   return YES;
 }
 
+//Called when a notification is delivered to a foreground app.
+-(void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions options))completionHandler
+{
+  completionHandler(UNAuthorizationOptionSound | UNAuthorizationOptionAlert | UNAuthorizationOptionBadge);
+}
+
+// Required to register for notifications
+- (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings
+{
+ [RNCPushNotificationIOS didRegisterUserNotificationSettings:notificationSettings];
+}
+// Required for the register event.
+- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
+{
+ [RNCPushNotificationIOS didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
+}
+// Required for the notification event. You must call the completion handler after handling the remote notification.
+- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
+fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
+{
+  [RNCPushNotificationIOS didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
+}
+// Required for the registrationError event.
+- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
+{
+ [RNCPushNotificationIOS didFailToRegisterForRemoteNotificationsWithError:error];
+}
+// IOS 10+ Required for localNotification event
+- (void)userNotificationCenter:(UNUserNotificationCenter *)center
+didReceiveNotificationResponse:(UNNotificationResponse *)response
+         withCompletionHandler:(void (^)(void))completionHandler
+{
+  [RNCPushNotificationIOS didReceiveNotificationResponse:response];
+  completionHandler();
+}
+// IOS 4-10 Required for the localNotification event.
+- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification
+{
+ [RNCPushNotificationIOS didReceiveLocalNotification:notification];
+}
+
 - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
 {
 #if DEBUG

ios/ReactNativeChat/Chat.entitlements

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>aps-environment</key>
+	<string>development</string>
+</dict>
+</plist>

ios/ReactNativeChat/Info.plist

@@ -64,6 +64,10 @@
 		<string>GTAmericaExp-Regular.otf</string>
 		<string>GTAmericaExp-Thin.otf</string>
 	</array>
+	<key>UIBackgroundModes</key>
+	<array>
+		<string>remote-notification</string>
+	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>

main.js

@@ -8,6 +8,7 @@ const serve = require('electron-serve');
 const contextMenu = require('electron-context-menu');
 const {autoUpdater} = require('electron-updater');
 const log = require('electron-log');
+const ELECTRON_EVENTS = require('./desktop/ELECTRON_EVENTS');
 
 /**
  * Electron main process that handles wrapping the web application.
@@ -76,12 +77,18 @@ const mainWindow = (() => {
             app.on('before-quit', () => quitting = true);
             app.on('activate', () => browserWindow.show());
 
-            ipcMain.on('request-visibility', (event) => {
+            ipcMain.on(ELECTRON_EVENTS.REQUEST_VISIBILITY, (event) => {
                 // This is how synchronous messages work in Electron
                 // eslint-disable-next-line no-param-reassign
                 event.returnValue = browserWindow.isFocused();
             });
 
+            // Listen to badge updater event emitted by the render process
+            // and update the app badge count (MacOS only)
+            ipcMain.on(ELECTRON_EVENTS.REQUEST_UPDATE_BADGE_COUNT, (event, totalCount) => {
+                app.setBadgeCount(totalCount);
+            });
+
             return browserWindow;
         })
 

metro.config.js

@@ -5,6 +5,7 @@
  * @format
  */
 
+
 module.exports = {
     transformer: {
         getTransformOptions: async () => ({

package.json

@@ -25,6 +25,7 @@
   "dependencies": {
     "@react-native-community/async-storage": "^1.11.0",
     "@react-native-community/netinfo": "^5.9.6",
+    "@react-native-community/push-notification-ios": "^1.5.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "dotenv": "^8.2.0",
     "electron-context-menu": "^2.3.0",

src/lib/UnreadIndicatorUpdater/index.js

@@ -0,0 +1,48 @@
+import _ from 'underscore';
+import Ion from '../Ion';
+import IONKEYS from '../../IONKEYS';
+import updateUnread from './updateUnread';
+
+// Stash the unread action counts for each report
+const unreadActionCounts = {};
+
+/**
+ * Updates the title and favicon of the current browser tab
+ * and Mac OS or iOS dock icon with an unread indicator.
+ */
+const throttledUpdatePageTitleAndUnreadCount = _.throttle(() => {
+    const totalCount = _.reduce(unreadActionCounts, (total, reportCount) => total + reportCount, 0);
+    updateUnread(totalCount);
+}, 1000, {leading: false});
+
+let connectionID;
+
+/**
+ * Bind to the report collection key and update
+ * the title and unread count indicators
+ */
+function init() {
+    connectionID = Ion.connect({
+        key: IONKEYS.COLLECTION.REPORT,
+        callback: (report) => {
+            if (!report || !report.reportID) {
+                return;
+            }
+
+            unreadActionCounts[report.reportID] = report.unreadActionCount || 0;
+            throttledUpdatePageTitleAndUnreadCount();
+        }
+    });
+}
+
+/**
+ * Remove the subscription callback when we no longer need it.
+ */
+function destroy() {
+    Ion.disconnect(connectionID);
+}
+
+export default {
+    init,
+    destroy,
+};

src/lib/UnreadIndicatorUpdater/updateUnread/index.android.js

@@ -0,0 +1,2 @@
+// Android does not yet implement this
+export default () => {};

src/lib/UnreadIndicatorUpdater/updateUnread/index.desktop.js

@@ -0,0 +1,16 @@
+import ELECTRON_EVENTS from '../../../../desktop/ELECTRON_EVENTS';
+
+const ipcRenderer = window.require('electron').ipcRenderer;
+
+/**
+ * Set the badge on desktop
+ *
+ * @param {Number} totalCount
+ */
+function updateUnread(totalCount) {
+    // Ask the main Electron process to update our
+    // badge count in the Mac OS dock icon
+    ipcRenderer.send(ELECTRON_EVENTS.REQUEST_UPDATE_BADGE_COUNT, totalCount);
+}
+
+export default updateUnread;

src/lib/UnreadIndicatorUpdater/updateUnread/index.ios.js

@@ -0,0 +1,13 @@
+import PushNotificationIOS from '@react-native-community/push-notification-ios';
+
+/**
+ * Set the App Icon badge with the number of
+ * unread messages on iOS
+ *
+ * @param {Number} totalCount
+ */
+function updateUnread(totalCount) {
+    PushNotificationIOS.setApplicationIconBadgeNumber(totalCount);
+}
+
+export default updateUnread;

src/lib/PageTitleUpdater/index.js → src/lib/UnreadIndicatorUpdater/updateUnread/index.website.js

@@ -1,16 +1,17 @@
 /**
  * Web browsers have a tab title and favicon which can be updated to show there are unread comments
  */
-import CONFIG from '../../CONFIG';
+import CONFIG from '../../../CONFIG';
 
 /**
- * Updates the title and favicon of the current browser tab with an unread indicator
+ * Set the page title on web
  *
- * @param {boolean} hasUnread
+ * @param {Number} totalCount
  */
-const PageTitleUpdater = (hasUnread) => {
+function updateUnread(totalCount) {
+    const hasUnread = totalCount > 0;
     document.title = hasUnread ? `(NEW!) ${CONFIG.SITE_TITLE}` : CONFIG.SITE_TITLE;
     document.getElementById('favicon').href = hasUnread ? CONFIG.FAVICON.UNREAD : CONFIG.FAVICON.DEFAULT;
-};
+}
 
-export default PageTitleUpdater;
+export default updateUnread;

src/lib/Visibility/index.js

@@ -1,3 +1,5 @@
+import ELECTRON_EVENTS from '../../../desktop/ELECTRON_EVENTS';
+
 // We conditionally import the ipcRenderer here so that we can
 // communicate with the main Electron process in main.js
 const ipcRenderer = window.require ? window.require('electron').ipcRenderer : null;
@@ -13,7 +15,7 @@ const ipcRenderer = window.require ? window.require('electron').ipcRenderer : nu
  */
 function isVisible() {
     return ipcRenderer
-        ? ipcRenderer.sendSync('request-visibility')
+        ? ipcRenderer.sendSync(ELECTRON_EVENTS.REQUEST_VISIBILITY)
         : document.visibilityState === 'visible';
 }