diff --git a/src/components/views/rooms/RoomTile.tsx b/src/components/views/rooms/RoomTile.tsx index 2c4d1d0163..ee4d9f0239 100644 --- a/src/components/views/rooms/RoomTile.tsx +++ b/src/components/views/rooms/RoomTile.tsx @@ -53,7 +53,7 @@ import RoomListActions from "../../../actions/RoomListActions"; import defaultDispatcher from "../../../dispatcher/dispatcher"; import {ActionPayload} from "../../../dispatcher/payloads"; import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore"; -import { NotificationState } from "../../../stores/notifications/NotificationState"; +import {NOTIFICATION_STATE_UPDATE, NotificationState} from "../../../stores/notifications/NotificationState"; import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; interface IProps { @@ -69,7 +69,6 @@ type PartialDOMRect = Pick; interface IState { hover: boolean; - notificationState: NotificationState; selected: boolean; notificationsMenuPosition: PartialDOMRect; generalMenuPosition: PartialDOMRect; @@ -114,13 +113,13 @@ const NotifOption: React.FC = ({active, onClick, iconClassNam export default class RoomTile extends React.Component { private dispatcherRef: string; private roomTileRef = createRef(); + private notificationState: NotificationState; constructor(props: IProps) { super(props); this.state = { hover: false, - notificationState: RoomNotificationStateStore.instance.getRoomState(this.props.room), selected: ActiveRoomObserver.activeRoomId === this.props.room.roomId, notificationsMenuPosition: null, generalMenuPosition: null, @@ -129,8 +128,14 @@ export default class RoomTile extends React.Component { ActiveRoomObserver.addListener(this.props.room.roomId, this.onActiveRoomUpdate); this.dispatcherRef = defaultDispatcher.register(this.onAction); MessagePreviewStore.instance.on(ROOM_PREVIEW_CHANGED, this.onRoomPreviewChanged); + this.notificationState = RoomNotificationStateStore.instance.getRoomState(this.props.room); + this.notificationState.on(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate); } + private onNotificationUpdate = () => { + this.forceUpdate(); // notification state changed - update + }; + private get showContextMenu(): boolean { return !this.props.isMinimized && this.props.tag !== DefaultTagID.Invite; } @@ -152,6 +157,7 @@ export default class RoomTile extends React.Component { } defaultDispatcher.unregister(this.dispatcherRef); MessagePreviewStore.instance.off(ROOM_PREVIEW_CHANGED, this.onRoomPreviewChanged); + this.notificationState.off(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate); } private onAction = (payload: ActionPayload) => { @@ -490,7 +496,7 @@ export default class RoomTile extends React.Component { badge = (