NotificationsButton: display "No notification to display" message

Bug: #73

client/src/javascript/components/sidebar/NotificationsButton.tsx

@@ -23,9 +23,6 @@ interface NotificationsButtonStates {
 const loadingIndicatorIcon = <LoadingIndicatorDots viewBox="0 0 32 32" />;
 
 const MESSAGES = defineMessages({
-  notifications: {
-    id: 'sidebar.button.notifications',
-  },
   'notification.torrent.finished.heading': {
     id: 'notification.torrent.finished.heading',
   },
@@ -44,6 +41,9 @@ const MESSAGES = defineMessages({
   'notification.feed.torrent.added.body': {
     id: 'notification.feed.torrent.added.body',
   },
+  noNotification: {
+    id: 'notification.no.notification',
+  },
   clearAll: {
     id: 'notification.clear.all',
   },
@@ -83,7 +83,7 @@ class NotificationsButton extends Component<WrappedComponentProps, Notifications
   getBottomToolbar = () => {
     const {notificationCount} = NotificationStore;
 
-    if (notificationCount != null && notificationCount.total > 0) {
+    if (notificationCount.total > 0) {
       const newerButtonClass = classnames(
         'toolbar__item toolbar__item--button',
         'tooltip__content--padding-surrogate',
@@ -169,7 +169,7 @@ class NotificationsButton extends Component<WrappedComponentProps, Notifications
 
     const {notificationCount} = NotificationStore;
 
-    if (notificationCount != null && notificationCount.total > NOTIFICATIONS_PER_PAGE) {
+    if (notificationCount.total > NOTIFICATIONS_PER_PAGE) {
       let countStart = paginationStart + 1;
       let countEnd = paginationStart + NOTIFICATIONS_PER_PAGE;
 
@@ -200,40 +200,6 @@ class NotificationsButton extends Component<WrappedComponentProps, Notifications
     return null;
   }
 
-  getTooltipContent = () => {
-    const {isLoading} = this.state;
-
-    const {notifications, notificationCount} = NotificationStore;
-
-    if (notificationCount == null || notificationCount.total === 0) {
-      return (
-        <div
-          className="notifications notifications--empty
-          tooltip__content--padding-surrogate">
-          {this.props.intl.formatMessage(MESSAGES.notifications)}
-        </div>
-      );
-    }
-
-    const notificationsWrapperClasses = classnames('notifications', {
-      'notifications--is-loading': isLoading,
-    });
-
-    return (
-      <div className={notificationsWrapperClasses}>
-        {this.getTopToolbar()}
-        <div className="notifications__loading-indicator">{loadingIndicatorIcon}</div>
-        <ul
-          className="notifications__list tooltip__content--padding-surrogate"
-          ref={this.notificationsListRef}
-          style={{minHeight: this.state.prevHeight}}>
-          {notifications.map(this.getNotification)}
-        </ul>
-        {this.getBottomToolbar()}
-      </div>
-    );
-  };
-
   fetchNotifications = () => {
     this.setState({isLoading: true});
 
@@ -284,7 +250,7 @@ class NotificationsButton extends Component<WrappedComponentProps, Notifications
   handleOlderNotificationsClick = () => {
     const {notificationCount} = NotificationStore;
 
-    if (notificationCount != null && notificationCount.total > this.state.paginationStart + NOTIFICATIONS_PER_PAGE) {
+    if (notificationCount.total > this.state.paginationStart + NOTIFICATIONS_PER_PAGE) {
       this.setState((state) => {
         const paginationStart = state.paginationStart + NOTIFICATIONS_PER_PAGE;
         return {
@@ -295,32 +261,49 @@ class NotificationsButton extends Component<WrappedComponentProps, Notifications
     }
   };
 
-  handleTooltipOpen = () => {
-    this.fetchNotifications();
-  };
-
   render() {
-    const {notificationCount} = NotificationStore;
+    const {intl} = this.props;
+    const {isLoading, prevHeight} = this.state;
+    const {notifications, notificationCount} = NotificationStore;
 
-    const hasNotifications = notificationCount != null && notificationCount.total !== 0;
+    const hasNotifications = notificationCount.total !== 0;
 
     return (
       <Tooltip
         contentClassName="tooltip__content tooltip__content--no-padding"
-        content={hasNotifications ? this.getTooltipContent() : null}
-        interactive={hasNotifications}
-        onOpen={this.handleTooltipOpen}
+        content={
+          hasNotifications ? (
+            <div
+              className={classnames('notifications', {
+                'notifications--is-loading': isLoading,
+              })}>
+              {this.getTopToolbar()}
+              <div className="notifications__loading-indicator">{loadingIndicatorIcon}</div>
+              <ul
+                className="notifications__list tooltip__content--padding-surrogate"
+                ref={this.notificationsListRef}
+                style={{minHeight: prevHeight}}>
+                {notifications.map(this.getNotification)}
+              </ul>
+              {this.getBottomToolbar()}
+            </div>
+          ) : (
+            <div className="notifications tooltip__content--padding-surrogate" style={{textAlign: 'center'}}>
+              {intl.formatMessage(MESSAGES.noNotification)}
+            </div>
+          )
+        }
+        interactive
+        onOpen={() => this.fetchNotifications()}
         ref={(ref) => {
           this.tooltipRef = ref;
         }}
-        width={notificationCount == null || notificationCount.total === 0 ? undefined : 340}
+        width={340}
         position="bottom"
         wrapperClassName="sidebar__action sidebar__icon-button
           tooltip__wrapper">
         <NotificationIcon />
-        {notificationCount != null && notificationCount.total > 0 ? (
-          <span className="notifications__badge">{notificationCount.total}</span>
-        ) : null}
+        {hasNotifications ? <span className="notifications__badge">{notificationCount.total}</span> : null}
       </Tooltip>
     );
   }

client/src/javascript/i18n/strings.compiled.json

@@ -1105,6 +1105,12 @@
       "value": "Feed Item Queued"
     }
   ],
+  "notification.no.notification": [
+    {
+      "type": 0,
+      "value": "No notification to display."
+    }
+  ],
   "notification.showing": [
     {
       "type": 0,
@@ -1495,12 +1501,6 @@
       "value": "Log Out"
     }
   ],
-  "sidebar.button.notifications": [
-    {
-      "type": 0,
-      "value": "Notifications"
-    }
-  ],
   "sidebar.button.settings": [
     {
       "type": 0,

client/src/javascript/i18n/strings.json

@@ -134,6 +134,7 @@
   "mediainfo.heading": "Mediainfo Output",
   "notification.feed.torrent.added.heading": "Feed Item Queued",
   "notification.feed.torrent.added.body": "{title}",
+  "notification.no.notification": "No notification to display.",
   "notification.torrent.finished.heading": "Finished Downloading",
   "notification.torrent.finished.body": "{name}",
   "notification.torrent.errored.heading": "Error Reported",
@@ -199,7 +200,6 @@
   "settings.diskusage.mount.points": "Disk Usage Mount Points",
   "settings.about.flood": "About Flood",
   "sidebar.button.feeds": "Feeds",
-  "sidebar.button.notifications": "Notifications",
   "sidebar.button.settings": "Settings",
   "sidebar.button.speedlimits": "Speed Limits",
   "sidebar.button.log.out": "Log Out",

client/src/javascript/stores/NotificationStore.ts

@@ -18,7 +18,7 @@ class NotificationStore {
   }
 
   handleNotificationCountChange(notificationCount: NotificationCount) {
-    this.notificationCount = notificationCount;
+    this.notificationCount = notificationCount == null ? INITIAL_COUNT_STATE : notificationCount;
   }
 
   handleNotificationsFetchSuccess(data: NotificationState) {