Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

RoomList listen to notificationState updates for bolding #5051

Merged
merged 3 commits into from Jul 27, 2020
Merged

RoomList listen to notificationState updates for bolding #5051

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1085d89
RoomList listen to notificationState updates for bolding
t3chguy Jul 27, 2020
368d1bf
delint
t3chguy Jul 27, 2020
a74470a
Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into…
t3chguy Jul 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
26 changes: 16 additions & 10 deletions src/components/views/rooms/RoomTile.tsx
View file
Open in desktop
Expand Up @@ -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 {
Expand All @@ -66,7 +66,6 @@ interface IProps {
type PartialDOMRect = Pick<DOMRect, "left" | "bottom">;

interface IState {
notificationState: NotificationState;
selected: boolean;
notificationsMenuPosition: PartialDOMRect;
generalMenuPosition: PartialDOMRect;
Expand Down Expand Up @@ -112,12 +111,12 @@ const NotifOption: React.FC<INotifOptionProps> = ({active, onClick, iconClassNam
export default class RoomTile extends React.PureComponent<IProps, IState> {
private dispatcherRef: string;
private roomTileRef = createRef<HTMLDivElement>();
private notificationState: NotificationState;

constructor(props: IProps) {
super(props);

this.state = {
notificationState: RoomNotificationStateStore.instance.getRoomState(this.props.room),
selected: ActiveRoomObserver.activeRoomId === this.props.room.roomId,
notificationsMenuPosition: null,
generalMenuPosition: null,
Expand All @@ -129,8 +128,14 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
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;
}
Expand All @@ -152,6 +157,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
}
defaultDispatcher.unregister(this.dispatcherRef);
MessagePreviewStore.instance.off(ROOM_PREVIEW_CHANGED, this.onRoomPreviewChanged);
this.notificationState.off(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate);
}

private onAction = (payload: ActionPayload) => {
Expand Down Expand Up @@ -491,7 +497,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
badge = (
<div className="mx_RoomTile_badgeContainer" aria-hidden="true">
<NotificationBadge
notification={this.state.notificationState}
notification={this.notificationState}
forceCount={false}
roomId={this.props.room.roomId}
/>
Expand All @@ -515,7 +521,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
const nameClasses = classNames({
"mx_RoomTile_name": true,
"mx_RoomTile_nameWithPreview": !!messagePreview,
"mx_RoomTile_nameHasUnreadEvents": this.state.notificationState.isUnread,
"mx_RoomTile_nameHasUnreadEvents": this.notificationState.isUnread,
});

let nameContainer = (
Expand All @@ -532,15 +538,15 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
// The following labels are written in such a fashion to increase screen reader efficiency (speed).
if (this.props.tag === DefaultTagID.Invite) {
// append nothing
} else if (this.state.notificationState.hasMentions) {
} else if (this.notificationState.hasMentions) {
ariaLabel += " " + _t("%(count)s unread messages including mentions.", {
count: this.state.notificationState.count,
count: this.notificationState.count,
});
} else if (this.state.notificationState.hasUnreadCount) {
} else if (this.notificationState.hasUnreadCount) {
ariaLabel += " " + _t("%(count)s unread messages.", {
count: this.state.notificationState.count,
count: this.notificationState.count,
});
} else if (this.state.notificationState.isUnread) {
} else if (this.notificationState.isUnread) {
ariaLabel += " " + _t("Unread messages.");
}

Expand Down