From 4cec3ee9b396b748977d9bfc03ba75cff2934d28 Mon Sep 17 00:00:00 2001
From: Rafael <rafael.saes@odysee.com>
Date: Tue, 22 Mar 2022 15:03:39 -0300
Subject: [PATCH] Update browser window title when notifications are received

---
 ui/component/notificationBubble/view.jsx |  3 ++-
 ui/component/router/index.js             |  2 ++
 ui/component/router/view.jsx             | 11 +++++++----
 ui/util/notifications.js                 |  3 +++
 4 files changed, 14 insertions(+), 5 deletions(-)
 create mode 100644 ui/util/notifications.js

diff --git a/ui/component/notificationBubble/view.jsx b/ui/component/notificationBubble/view.jsx
index 9da6b1659..52217c37e 100644
--- a/ui/component/notificationBubble/view.jsx
+++ b/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>
   );
diff --git a/ui/component/router/index.js b/ui/component/router/index.js
index d768e61fa..ef8738a47 100644
--- a/ui/component/router/index.js
+++ b/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),
   };
 };
 
diff --git a/ui/component/router/view.jsx b/ui/component/router/view.jsx
index 82ddfb865..df8771089 100644
--- a/ui/component/router/view.jsx
+++ b/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'
-    entries[entryIndex].title = document.title;
-    // @endif
-  }, [pathname, entries, entryIndex, title, uri]);
+    if (unseenCount > 0) {
+      document.title = `(${buildUnseenCountStr(unseenCount)}) ${document.title}`;
+    }
+  }, [pathname, entries, entryIndex, title, uri, unseenCount]);
 
   useEffect(() => {
     if (!hasLinkedCommentInUrl) {
diff --git a/ui/util/notifications.js b/ui/util/notifications.js
new file mode 100644
index 000000000..930c31998
--- /dev/null
+++ b/ui/util/notifications.js
@@ -0,0 +1,3 @@
+// @flow
+
+export const buildUnseenCountStr = (unseenCount: number) => (unseenCount > 20 ? '20+' : `${unseenCount}`);