diff --git a/client/src/javascript/components/sidebar/NotificationsButton.tsx b/client/src/javascript/components/sidebar/NotificationsButton.tsx index 8835bcae..a5e866cf 100644 --- a/client/src/javascript/components/sidebar/NotificationsButton.tsx +++ b/client/src/javascript/components/sidebar/NotificationsButton.tsx @@ -23,9 +23,6 @@ interface NotificationsButtonStates { const loadingIndicatorIcon = ; 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 { 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 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 { - const {isLoading} = this.state; - - const {notifications, notificationCount} = NotificationStore; - - if (notificationCount == null || notificationCount.total === 0) { - return ( -
- {this.props.intl.formatMessage(MESSAGES.notifications)} -
- ); - } - - const notificationsWrapperClasses = classnames('notifications', { - 'notifications--is-loading': isLoading, - }); - - return ( -
- {this.getTopToolbar()} -
{loadingIndicatorIcon}
-
    - {notifications.map(this.getNotification)} -
- {this.getBottomToolbar()} -
- ); - }; - fetchNotifications = () => { this.setState({isLoading: true}); @@ -284,7 +250,7 @@ class NotificationsButton extends Component { 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 { - 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 ( + {this.getTopToolbar()} +
{loadingIndicatorIcon}
+
    + {notifications.map(this.getNotification)} +
+ {this.getBottomToolbar()} + + ) : ( +
+ {intl.formatMessage(MESSAGES.noNotification)} +
+ ) + } + 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"> - {notificationCount != null && notificationCount.total > 0 ? ( - {notificationCount.total} - ) : null} + {hasNotifications ? {notificationCount.total} : null}
); } diff --git a/client/src/javascript/i18n/strings.compiled.json b/client/src/javascript/i18n/strings.compiled.json index 5d32cfac..4dc91ab8 100644 --- a/client/src/javascript/i18n/strings.compiled.json +++ b/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, diff --git a/client/src/javascript/i18n/strings.json b/client/src/javascript/i18n/strings.json index db1ac637..736d7965 100644 --- a/client/src/javascript/i18n/strings.json +++ b/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", diff --git a/client/src/javascript/stores/NotificationStore.ts b/client/src/javascript/stores/NotificationStore.ts index fcb1fe34..140f9dc5 100644 --- a/client/src/javascript/stores/NotificationStore.ts +++ b/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) {