single place for unread state retrieval and changing

src/Rooms.ts

@@ -143,3 +143,19 @@ function guessDMRoomTargetId(room: Room, myUserId: string): string {
     if (oldestUser === undefined) return myUserId;
     return oldestUser.userId;
 }
+
+const UNSTABLE_MSC2867_KEY = 'com.famedly.marked_unread';
+
+export function isRoomMarkedAsUnread(room: Room): boolean {
+    return !!room.getAccountData(UNSTABLE_MSC2867_KEY)?.getContent()?.unread;
+}
+
+export async function setRoomMarkedAsUnread(room: Room, value: boolean = true): Promise<void> {
+    await MatrixClientPeg.get().setRoomAccountData(
+        room.roomId,
+        UNSTABLE_MSC2867_KEY,
+        {
+            unread: value,
+        },
+    );
+}

src/components/structures/TimelinePanel.tsx

@@ -47,6 +47,7 @@ import ResizeNotifier from "../../utils/ResizeNotifier";
 import { RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
 import Spinner from "../views/elements/Spinner";
 import EditorStateTransfer from '../../utils/EditorStateTransfer';
+import { isRoomMarkedAsUnread, setRoomMarkedAsUnread } from '../../Rooms';
 
 const PAGINATE_SIZE = 20;
 const INITIAL_SIZE = 20;
@@ -839,29 +840,20 @@ class TimelinePanel extends React.Component<IProps, IState> {
         this.sendReadReceipt();
     };
 
-
-    removeUnreadMarker = () => {
+    private removeUnreadMarker = () => {
         if (!this.messagePanel.current) return;
         if (!this.props.manageReadReceipts) return;
         // This happens on user_activity_end which is delayed, and it's
         // very possible have logged out within that timeframe, so check
         // we still have a client.
         const cli = MatrixClientPeg.get();
-        // if no client or client is guest don't send RR or RM
+        // if no client or client is guest don't send mark room as read
         if (!cli || cli.isGuest()) return;
 
-        const unreadAccountData = this.props.timelineSet.room.getAccountData('com.famedly.marked_unread');
-        const isMarkedUnread = unreadAccountData?.getContent()?.unread;
-        if (isMarkedUnread) {
-            cli.setRoomAccountData(
-                this.props.timelineSet.room.roomId,
-                "com.famedly.marked_unread",
-                {
-                    unread: false,
-                },
-            );
+        if (isRoomMarkedAsUnread(this.props.timelineSet.room)) {
+            setRoomMarkedAsUnread(this.props.timelineSet.room, false);
         }
-    }
+    };
 
     // advance the read marker past any events we sent ourselves.
     private advanceReadMarkerPastMyEvents(): void {

src/components/views/rooms/RoomTile.tsx

@@ -53,6 +53,7 @@ import { CommunityPrototypeStore, IRoomProfile } from "../../../stores/Community
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { getUnsentMessages } from "../../structures/RoomStatusBar";
 import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
+import { setRoomMarkedAsUnread } from "../../../Rooms";
 
 interface IProps {
     room: Room;
@@ -301,15 +302,9 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
     private onMarkUnreadClick = (ev: ButtonEvent) => {
         ev.preventDefault();
         ev.stopPropagation();
-        MatrixClientPeg.get().setRoomAccountData(
-            this.props.room.roomId,
-            "com.famedly.marked_unread",
-            {
-                unread: true,
-            },
-        )
-        this.setState({generalMenuPosition: null}); // hide the menu
-    }
+        setRoomMarkedAsUnread(this.props.room);
+        this.setState({ generalMenuPosition: null }); // hide the menu
+    };
 
     private onTagRoom = (ev: ButtonEvent, tagId: TagID) => {
         ev.preventDefault();

src/stores/notifications/RoomNotificationState.ts

@@ -24,6 +24,7 @@ import { Room } from "matrix-js-sdk/src/models/room";
 import * as RoomNotifs from '../../RoomNotifs';
 import * as Unread from '../../Unread';
 import { NotificationState } from "./NotificationState";
+import { isRoomMarkedAsUnread } from "../../Rooms";
 
 export class RoomNotificationState extends NotificationState implements IDestroyable {
     constructor(public readonly room: Room) {
@@ -32,7 +33,7 @@ export class RoomNotificationState extends NotificationState implements IDestroy
         this.room.on("Room.timeline", this.handleRoomEventUpdate);
         this.room.on("Room.redaction", this.handleRoomEventUpdate);
         this.room.on("Room.myMembership", this.handleMembershipUpdate);
-        this.room.on("Room.accountData", this.handleRoomAccountDataUpdate)
+        this.room.on("Room.accountData", this.handleRoomAccountDataUpdate);
         MatrixClientPeg.get().on("Event.decrypted", this.handleRoomEventUpdate);
         MatrixClientPeg.get().on("accountData", this.handleAccountDataUpdate);
         this.updateNotificationState();
@@ -116,10 +117,7 @@ export class RoomNotificationState extends NotificationState implements IDestroy
                 this._count = trueCount;
                 this._symbol = null; // symbol calculated by component
             } else {
-                // it is marked as unread?
-                const isMarkedUnread = this.room.getAccountData('com.famedly.marked_unread')?.getContent()?.unread
-
-                if (isMarkedUnread) {
+                if (isRoomMarkedAsUnread(this.room)) {
                     this._color = NotificationColor.Red;
                 } else {
                     // We don't have any notified messages, but we might have unread messages. Let's