From c21af9ab373683ea31d8b16b45fdcf4f6ba4a9fb Mon Sep 17 00:00:00 2001
From: Jesse Chan <jc@linux.com>
Date: Tue, 10 Nov 2020 19:28:56 +0800
Subject: [PATCH] NotificationStore: make hasNotification a computed property

---
 .../javascript/components/sidebar/NotificationsButton.tsx | 8 +++-----
 client/src/javascript/stores/NotificationStore.ts         | 6 +++++-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/client/src/javascript/components/sidebar/NotificationsButton.tsx b/client/src/javascript/components/sidebar/NotificationsButton.tsx
index 4cc17ab9..0abe26c5 100644
--- a/client/src/javascript/components/sidebar/NotificationsButton.tsx
+++ b/client/src/javascript/components/sidebar/NotificationsButton.tsx
@@ -264,15 +264,13 @@ class NotificationsButton extends Component<WrappedComponentProps, Notifications
   render() {
     const {intl} = this.props;
     const {isLoading, prevHeight} = this.state;
-    const {notifications, notificationCount} = NotificationStore;
-
-    const hasNotifications = notificationCount.total !== 0;
+    const {hasNotification, notifications, notificationCount} = NotificationStore;
 
     return (
       <Tooltip
         contentClassName="tooltip__content tooltip__content--no-padding"
         content={
-          hasNotifications ? (
+          hasNotification ? (
             <div
               className={classnames('notifications', {
                 'notifications--is-loading': isLoading,
@@ -303,7 +301,7 @@ class NotificationsButton extends Component<WrappedComponentProps, Notifications
         wrapperClassName="sidebar__action sidebar__icon-button
           tooltip__wrapper">
         <NotificationIcon />
-        {hasNotifications ? <span className="notifications__badge">{notificationCount.total}</span> : null}
+        {hasNotification ? <span className="notifications__badge">{notificationCount.total}</span> : null}
       </Tooltip>
     );
   }
diff --git a/client/src/javascript/stores/NotificationStore.ts b/client/src/javascript/stores/NotificationStore.ts
index dde67247..a480e046 100644
--- a/client/src/javascript/stores/NotificationStore.ts
+++ b/client/src/javascript/stores/NotificationStore.ts
@@ -1,4 +1,4 @@
-import {makeAutoObservable} from 'mobx';
+import {computed, makeAutoObservable} from 'mobx';
 
 import type {Notification, NotificationCount, NotificationState} from '@shared/types/Notification';
 
@@ -8,6 +8,10 @@ class NotificationStore {
   notifications: Array<Notification> = [];
   notificationCount: NotificationCount = INITIAL_COUNT_STATE;
 
+  @computed get hasNotification() {
+    return this.notificationCount.total !== 0;
+  }
+
   constructor() {
     makeAutoObservable(this);
   }