Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Add a badge to the threads icon if any threads are unread.
Browse files Browse the repository at this point in the history
  • Loading branch information
@clokep
clokep committed Dec 15, 2022
1 parent ad4feef commit 82fdbac
Show file tree
Hide file tree
Showing 2 changed files with 115 additions and 5 deletions.
31 changes: 29 additions & 2 deletions src/components/views/right_panel/RoomHeaderButtons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ limitations under the License.
import React from "react";
import classNames from "classnames";
import { NotificationCountType, Room, RoomEvent } from "matrix-js-sdk/src/models/room";
import { ThreadEvent } from "matrix-js-sdk/src/models/thread";
import { Feature, ServerSupport } from "matrix-js-sdk/src/feature";

import { _t } from "../../../languageHandler";
Expand All @@ -44,6 +45,7 @@ import { NotificationStateEvents } from "../../../stores/notifications/Notificat
import PosthogTrackers from "../../../PosthogTrackers";
import { ButtonEvent } from "../elements/AccessibleButton";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import { doesRoomOrThreadHaveUnreadMessages } from "../../../Unread";

const ROOM_INFO_PHASES = [
RightPanelPhases.RoomSummary,
Expand Down Expand Up @@ -154,7 +156,17 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
if (!this.supportsThreadNotifications) {
this.threadNotificationState?.on(NotificationStateEvents.Update, this.onNotificationUpdate);
} else {
// Notification badge may change if the notification counts from the
// server change, if a new thread is created or updated, or if a
// receipt is sent in the thread.
this.props.room?.on(RoomEvent.UnreadNotifications, this.onNotificationUpdate);
this.props.room?.on(RoomEvent.Receipt, this.onNotificationUpdate);
this.props.room?.on(RoomEvent.Timeline, this.onNotificationUpdate);
this.props.room?.on(RoomEvent.Redaction, this.onNotificationUpdate);
this.props.room?.on(RoomEvent.LocalEchoUpdated, this.onNotificationUpdate);
this.props.room?.on(RoomEvent.MyMembership, this.onNotificationUpdate);
this.props.room?.on(ThreadEvent.New, this.onNotificationUpdate);
this.props.room?.on(ThreadEvent.Update, this.onNotificationUpdate);
}
this.onNotificationUpdate();
RoomNotificationStateStore.instance.on(UPDATE_STATUS_INDICATOR, this.onUpdateStatus);
Expand All @@ -166,6 +178,13 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
this.threadNotificationState?.off(NotificationStateEvents.Update, this.onNotificationUpdate);
} else {
this.props.room?.off(RoomEvent.UnreadNotifications, this.onNotificationUpdate);
this.props.room?.off(RoomEvent.Receipt, this.onNotificationUpdate);
this.props.room?.off(RoomEvent.Timeline, this.onNotificationUpdate);
this.props.room?.off(RoomEvent.Redaction, this.onNotificationUpdate);
this.props.room?.off(RoomEvent.LocalEchoUpdated, this.onNotificationUpdate);
this.props.room?.off(RoomEvent.MyMembership, this.onNotificationUpdate);
this.props.room?.off(ThreadEvent.New, this.onNotificationUpdate);
this.props.room?.off(ThreadEvent.Update, this.onNotificationUpdate);
}
RoomNotificationStateStore.instance.off(UPDATE_STATUS_INDICATOR, this.onUpdateStatus);
}
Expand All @@ -191,9 +210,17 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
return NotificationColor.Red;
case NotificationCountType.Total:
return NotificationColor.Grey;
default:
return NotificationColor.None;
}
// We don't have any notified messages, but we might have unread messages. Let's
// find out.
for (const thread of this.props.room!.getThreads()) {
// If the current thread has unread messages, we're done.
if (doesRoomOrThreadHaveUnreadMessages(thread)) {
return NotificationColor.Bold;
}
}
// Otherwise, no notification color.
return NotificationColor.None;
}

private onUpdateStatus = (notificationState: SummarizedNotificationState): void => {
Expand Down
89 changes: 86 additions & 3 deletions test/components/views/right_panel/RoomHeaderButtons-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,18 @@ limitations under the License.
*/

import { render } from "@testing-library/react";
import { MatrixEvent, MsgType, RelationType } from "matrix-js-sdk/src/matrix";
import { MatrixClient, PendingEventOrdering } from "matrix-js-sdk/src/client";
import { Feature, ServerSupport } from "matrix-js-sdk/src/feature";
import { NotificationCountType, Room } from "matrix-js-sdk/src/models/room";
import { ReceiptType } from "matrix-js-sdk/src/@types/read_receipts";
import React from "react";

import RoomHeaderButtons from "../../../../src/components/views/right_panel/RoomHeaderButtons";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
import SettingsStore from "../../../../src/settings/SettingsStore";
import { stubClient } from "../../../test-utils";
import { mkEvent, stubClient } from "../../../test-utils";
import { mkThread } from "../../../test-utils/threads";

describe("RoomHeaderButtons-test.tsx", function () {
const ROOM_ID = "!roomId:example.org";
Expand All @@ -35,6 +38,7 @@ describe("RoomHeaderButtons-test.tsx", function () {

stubClient();
client = MatrixClientPeg.get();
client.supportsExperimentalThreads = () => true;
room = new Room(ROOM_ID, client, client.getUserId() ?? "", {
pendingEventOrdering: PendingEventOrdering.Detached,
});
Expand All @@ -52,7 +56,7 @@ describe("RoomHeaderButtons-test.tsx", function () {
return container.querySelector(".mx_RightPanel_threadsButton");
}

function isIndicatorOfType(container, type: "red" | "gray") {
function isIndicatorOfType(container, type: "red" | "gray" | "bold") {
return container.querySelector(".mx_RightPanel_threadsButton .mx_Indicator").className.includes(type);
}

Expand All @@ -76,7 +80,7 @@ describe("RoomHeaderButtons-test.tsx", function () {
expect(container.querySelector(".mx_RightPanel_threadsButton .mx_Indicator")).toBeNull();
});

it("room wide notification does not change the thread button", () => {
it("thread notification does change the thread button", () => {
const { container } = getComponent(room);

room.setThreadUnreadNotificationCount("$123", NotificationCountType.Total, 1);
Expand All @@ -91,6 +95,85 @@ describe("RoomHeaderButtons-test.tsx", function () {
expect(container.querySelector(".mx_RightPanel_threadsButton .mx_Indicator")).toBeNull();
});

it("thread activity does change the thread button", async () => {
const { container } = getComponent(room);

// Thread activity should appear on the icon.
const { rootEvent, events } = mkThread({
room,
client,
authorId: client.getUserId()!,
participantUserIds: ["@alice:example.org"],
});
expect(isIndicatorOfType(container, "bold")).toBe(true);

// Sending the last event should clear the notification.
let event = mkEvent({
event: true,
type: "m.room.message",
user: client.getUserId()!,
room: room.roomId,
content: {
"msgtype": MsgType.Text,
"body": "Test",
"m.relates_to": {
event_id: rootEvent.getId(),
rel_type: RelationType.Thread,
},
},
});
room.addLiveEvents([event]);
await expect(container.querySelector(".mx_RightPanel_threadsButton .mx_Indicator")).toBeNull();

// Mark it as unread again.
event = mkEvent({
event: true,
type: "m.room.message",
user: "@alice:example.org",
room: room.roomId,
content: {
"msgtype": MsgType.Text,
"body": "Test",
"m.relates_to": {
event_id: rootEvent.getId(),
rel_type: RelationType.Thread,
},
},
});
room.addLiveEvents([event]);
expect(isIndicatorOfType(container, "bold")).toBe(true);

// Sending a read receipt on an earlier event shouldn't do anything.
let receipt = new MatrixEvent({
type: "m.receipt",
room_id: room.roomId,
content: {
[events.at(-1).getId()!]: {
[ReceiptType.Read]: {
[client.getUserId()!]: { ts: 1, thread_id: rootEvent.getId() },
},
},
},
});
room.addReceipt(receipt);
expect(isIndicatorOfType(container, "bold")).toBe(true);

// Sending a receipt on the latest event should clear the notification.
receipt = new MatrixEvent({
type: "m.receipt",
room_id: room.roomId,
content: {
[event.getId()!]: {
[ReceiptType.Read]: {
[client.getUserId()!]: { ts: 1, thread_id: rootEvent.getId() },
},
},
},
});
room.addReceipt(receipt);
expect(container.querySelector(".mx_RightPanel_threadsButton .mx_Indicator")).toBeNull();
});

it("does not explode without a room", () => {
client.canSupport.set(Feature.ThreadUnreadNotifications, ServerSupport.Unsupported);
expect(() => getComponent()).not.toThrow();
Expand Down

0 comments on commit 82fdbac

Please sign in to comment.