diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx
index db923fcc0e..85b85c2e8f 100644
--- a/src/components/views/right_panel/HeaderButtons.tsx
+++ b/src/components/views/right_panel/HeaderButtons.tsx
@@ -35,6 +35,7 @@ interface IState {
headerKind: HeaderKind;
phase: RightPanelPhases;
threadNotificationColor: NotificationColor;
+ globalNotificationColor: NotificationColor;
}
interface IProps {}
@@ -51,6 +52,7 @@ export default abstract class HeaderButtons
extends React.Component {
RightPanelPhases.ThreadView,
];
private threadNotificationState: ThreadsRoomNotificationState;
+ private globalNotificationState: SummarizedNotificationState;
constructor(props: IProps) {
super(props, HeaderKind.Room);
this.threadNotificationState = RoomNotificationStateStore.instance.getThreadsRoomState(this.props.room);
+ this.globalNotificationState = RoomNotificationStateStore.instance.globalState;
}
public componentDidMount(): void {
super.componentDidMount();
this.threadNotificationState.on(NotificationStateEvents.Update, this.onThreadNotification);
+ RoomNotificationStateStore.instance.on(UPDATE_STATUS_INDICATOR, this.onUpdateStatus);
}
public componentWillUnmount(): void {
super.componentWillUnmount();
this.threadNotificationState.off(NotificationStateEvents.Update, this.onThreadNotification);
+ RoomNotificationStateStore.instance.off(UPDATE_STATUS_INDICATOR, this.onUpdateStatus);
}
private onThreadNotification = (): void => {
+ // XXX: why don't we read from this.state.threadNotificationColor in the render methods?
this.setState({
threadNotificationColor: this.threadNotificationState.color,
});
};
+ private onUpdateStatus = (notificationState: SummarizedNotificationState): void => {
+ // XXX: why don't we read from this.state.globalNotificationCount in the render methods?
+ this.globalNotificationState = notificationState;
+ this.setState({
+ globalNotificationColor: notificationState.color,
+ });
+ };
+
protected onAction(payload: ActionPayload) {
if (payload.action === Action.ViewUser) {
if (payload.member) {
@@ -254,7 +271,12 @@ export default class RoomHeaderButtons extends HeaderButtons {
title={_t('Notifications')}
isHighlighted={this.isPhase(RightPanelPhases.NotificationPanel)}
onClick={this.onNotificationsClicked}
- />,
+ isUnread={this.globalNotificationState.color === NotificationColor.Red}
+ >
+ { this.globalNotificationState.color === NotificationColor.Red ?
+ :
+ null }
+ ,
);
rightPanelPhaseButtons.set(RightPanelPhases.RoomSummary,
{
return <>
{
Array.from(rightPanelPhaseButtons.keys()).map((phase) =>
- (this.props.excludedRightPanelPhaseButtons.includes(phase)
+ (this.props.excludedRightPanelPhaseButtons?.includes(phase)
? null
: rightPanelPhaseButtons.get(phase)))
}