Update browser window title when notifications are received

ui/component/notificationBubble/view.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import classnames from 'classnames';
 import { ENABLE_UI_NOTIFICATIONS } from 'config';
+import { buildUnseenCountStr } from 'util/notifications';
 
 type Props = {
   unseenCount: number,
@@ -28,7 +29,7 @@ export default function NotificationHeaderButton(props: Props) {
           'notification__bubble--small': unseenCount > 9,
         })}
       >
-        {unseenCount > 20 ? '20+' : unseenCount}
+        {buildUnseenCountStr(unseenCount)}
       </span>
     </span>
   );

ui/component/router/index.js

@@ -8,6 +8,7 @@ import { selectTitleForUri } from 'redux/selectors/claims';
 import { doSetHasNavigated } from 'redux/actions/app';
 import { doUserSetReferrer } from 'redux/actions/user';
 import { selectHasUnclaimedRefereeReward } from 'redux/selectors/rewards';
+import { selectUnseenNotificationCount } from 'redux/selectors/notifications';
 
 const select = (state) => {
   const { pathname, hash } = state.router.location;
@@ -36,6 +37,7 @@ const select = (state) => {
     hasUnclaimedRefereeReward: selectHasUnclaimedRefereeReward(state),
     homepageData: selectHomepageData(state),
     wildWestDisabled: selectWildWestDisabled(state),
+    unseenCount: selectUnseenNotificationCount(state),
   };
 };
 

ui/component/router/view.jsx

@@ -12,6 +12,7 @@ import { SITE_TITLE, WELCOME_VERSION } from 'config';
 import LoadingBarOneOff from 'component/loadingBarOneOff';
 import { GetLinksData } from 'util/buildHomepage';
 import * as CS from 'constants/claim_search';
+import { buildUnseenCountStr } from 'util/notifications';
 
 import HomePage from 'page/home';
 
@@ -138,6 +139,7 @@ type Props = {
   hasUnclaimedRefereeReward: boolean,
   homepageData: any,
   wildWestDisabled: boolean,
+  unseenCount: number,
 };
 
 type PrivateRouteProps = Props & {
@@ -178,6 +180,7 @@ function AppRouter(props: Props) {
     setReferrer,
     homepageData,
     wildWestDisabled,
+    unseenCount,
   } = props;
 
   const { entries, listen, action: historyAction } = history;
@@ -246,10 +249,10 @@ function AppRouter(props: Props) {
       document.title = getDefaultTitle(pathname);
     }
 
-    // @if TARGET='app'
+    if (unseenCount > 0) {
-    entries[entryIndex].title = document.title;
+      document.title = `(${buildUnseenCountStr(unseenCount)}) ${document.title}`;
-    // @endif
+    }
-  }, [pathname, entries, entryIndex, title, uri]);
+  }, [pathname, entries, entryIndex, title, uri, unseenCount]);
 
   useEffect(() => {
     if (!hasLinkedCommentInUrl) {

ui/util/notifications.js

@@ -0,0 +1,3 @@
+// @flow
+
+export const buildUnseenCountStr = (unseenCount: number) => (unseenCount > 20 ? '20+' : `${unseenCount}`);