Add desktop dock icon indicator in Electron

main.js

@@ -68,6 +68,10 @@ const mainWindow = (() => {
                 event.returnValue = browserWindow.isFocused();
             });
 
+            ipcMain.on('request-update-badge-count', (event, totalCount) => {
+                app.setBadgeCount(totalCount);
+            });
+
             return browserWindow;
         })
 

src/lib/UnreadIndicatorUpdater/index.js

@@ -0,0 +1,49 @@
+import _ from 'underscore';
+import Ion from '../Ion';
+import IONKEYS from '../../IONKEYS';
+
+/**
+ * Web browsers have a tab title and favicon which can be updated to show there are unread comments
+ */
+import CONFIG from '../../CONFIG';
+
+// 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;
+
+const reportMap = {};
+
+/**
+ * Updates the title and favicon of the current browser tab
+ * and Mac OS dock icon with an unread indicator.
+ *
+ * @param {boolean} hasUnread
+ */
+function updatePageTitleAndUnreadCount() {
+    const totalCount = _.reduce(reportMap, (total, report) => total + ((report && report.unreadActionCount) || 0), 0);
+    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;
+
+    if (ipcRenderer) {
+        // Ask the main Electron process to update our
+        // badge count in the Mac OS dock icon
+        ipcRenderer.send('request-update-badge-count', totalCount);
+    }
+}
+
+Ion.connect({
+    key: IONKEYS.COLLECTION.REPORT,
+    callback: (report) => {
+        if (!report || !report.reportID) {
+            return;
+        }
+
+        reportMap[report.reportID] = report;
+        updatePageTitleAndUnreadCount();
+    }
+});
+
+export default {
+    init: () => {},
+};

src/lib/PageTitleUpdater/index.native.js → src/lib/UnreadIndicatorUpdater/index.native.js

@@ -1,4 +1,6 @@
 /**
  * Native devices (iOS, Android) don't have page title like web does, so this module doesn't do anything
  */
-export default () => {};
+export default {
+    init: () => {},
+};

src/lib/actions/Report.js

@@ -47,6 +47,9 @@ Ion.connect({
 // Keeps track of the max sequence number for each report
 const reportMaxSequenceNumbers = {};
 
+// Keeps track of the last read for each report
+const lastReadActionIDs = {};
+
 // List of reportIDs that we define in .env
 const configReportIDs = CONFIG.REPORT_IDS.split(',').map(Number);
 
@@ -56,29 +59,30 @@ const configReportIDs = CONFIG.REPORT_IDS.split(',').map(Number);
  * @param {object} report
  * @returns {boolean}
  */
-function hasUnreadActions(report) {
+function getUnreadActionCount(report) {
     const usersLastReadActionID = lodashGet(report, [
         'reportNameValuePairs',
         `lastReadActionID_${currentUserAccountID}`,
     ]);
 
+    // Save the lastReadActionID locally so we can access this later
+    lastReadActionIDs[report.reportID] = usersLastReadActionID;
+
     if (report.reportActionList.length === 0) {
-        return false;
+        return 0;
     }
 
     if (!usersLastReadActionID) {
-        return true;
+        return report.reportActionList.length;
     }
 
     // Find the most recent sequence number from the report actions
     const maxSequenceNumber = reportMaxSequenceNumbers[report.reportID];
 
-    if (!maxSequenceNumber) {
-        return false;
-    }
-
-    // There are unread items if the last one the user has read is less than the highest sequence number we have
-    return usersLastReadActionID < maxSequenceNumber;
+    // There are unread items if the last one the user has read is less
+    // than the highest sequence number we have.
+    const unreadActionCount = (maxSequenceNumber || report.reportActionList.length) - usersLastReadActionID;
+    return unreadActionCount > 0 ? unreadActionCount : 0;
 }
 
 /**
@@ -92,11 +96,13 @@ function hasUnreadActions(report) {
  * @returns {object}
  */
 function getSimplifiedReportObject(report) {
+    const unreadActionCount = getUnreadActionCount(report);
     return {
         reportID: report.reportID,
         reportName: report.reportName,
         reportNameValuePairs: report.reportNameValuePairs,
-        isUnread: hasUnreadActions(report),
+        unreadActionCount,
+        isUnread: unreadActionCount > 0,
         pinnedReport: configReportIDs.includes(report.reportID),
     };
 }
@@ -183,6 +189,7 @@ function updateReportWithNewAction(reportID, reportAction) {
     // by handleReportChanged
     Ion.merge(`${IONKEYS.COLLECTION.REPORT}${reportID}`, {
         reportID,
+        unreadActionCount: newMaxSequenceNumber - (lastReadActionIDs[reportID] || 0),
         isUnread: hasNewSequenceNumber,
         maxSequenceNumber: reportAction.sequenceNumber,
     });
@@ -440,9 +447,12 @@ function updateLastReadActionID(reportID, sequenceNumber) {
         return;
     }
 
+    lastReadActionIDs[reportID] = sequenceNumber;
+
     // Update the lastReadActionID on the report optimistically
     Ion.merge(`${IONKEYS.COLLECTION.REPORT}${reportID}`, {
         isUnread: false,
+        unreadActionCount: 0,
         reportNameValuePairs: {
             [`lastReadActionID_${currentUserAccountID}`]: sequenceNumber,
         }

src/page/home/HomePage.js

@@ -15,6 +15,7 @@ import Main from './MainView';
 import {subscribeToReportCommentEvents, fetchAll as fetchAllReports} from '../../lib/actions/Report';
 import {fetch as fetchPersonalDetails} from '../../lib/actions/PersonalDetails';
 import * as Pusher from '../../lib/Pusher/pusher';
+import UnreadIndicatorUpdater from '../../lib/UnreadIndicatorUpdater';
 
 const windowSize = Dimensions.get('window');
 const widthBreakPoint = 1000;
@@ -43,6 +44,8 @@ export default class App extends React.Component {
         // Fetch all the reports
         fetchAllReports();
 
+        UnreadIndicatorUpdater.init();
+
         Dimensions.addEventListener('change', this.toggleHamburgerBasedOnDimensions);
 
         StatusBar.setBarStyle('dark-content', true);

src/page/home/sidebar/SidebarLinks.js

@@ -8,7 +8,6 @@ import Text from '../../../components/Text';
 import SidebarLink from './SidebarLink';
 import withIon from '../../../components/withIon';
 import IONKEYS from '../../../IONKEYS';
-import PageTitleUpdater from '../../../lib/PageTitleUpdater';
 import ChatSwitcherView from './ChatSwitcherView';
 import SafeAreaInsetPropTypes from '../../SafeAreaInsetPropTypes';
 import compose from '../../../lib/compose';
@@ -54,17 +53,14 @@ class SidebarLinks extends React.Component {
     }
 
     render() {
-        const {reports, onLinkClick} = this.props;
+        const {onLinkClick} = this.props;
         const reportIDInUrl = parseInt(this.props.match.params.reportID, 10);
         const sortedReports = lodashOrderby(this.props.reports, ['pinnedReport', 'reportName'], ['desc', 'asc']);
 
         // Filter the reports so that the only reports shown are pinned, unread, and the one matching the URL
         // eslint-disable-next-line max-len
         const reportsToDisplay = _.filter(sortedReports, report => (report.pinnedReport || report.isUnread || report.reportID === reportIDInUrl));
 
-        // Updates the page title to indicate there are unread reports
-        PageTitleUpdater(_.any(reports, report => report.isUnread));
-
         return (
             <View style={[styles.flex1, {marginTop: this.props.insets.top}]}>
                 <View style={[styles.sidebarHeader]}>