Ensure message previews update when needed

In 9969b01c5f we stopped updating the sublist whenever we felt like it, which indirectly froze message previews for room tiles (badges, unread state, etc were unaffected because that is managed by a different store). To fix this, we simply have to listen for changes and perform an update.

src/components/views/rooms/RoomTile.tsx

@@ -35,7 +35,7 @@ import {
     MenuItem,
 } from "../../structures/ContextMenu";
 import { DefaultTagID, TagID } from "../../../stores/room-list/models";
-import { MessagePreviewStore } from "../../../stores/room-list/MessagePreviewStore";
+import { MessagePreviewStore, ROOM_PREVIEW_CHANGED } from "../../../stores/room-list/MessagePreviewStore";
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
 import {
     getRoomNotifsState,
@@ -128,6 +128,7 @@ export default class RoomTile extends React.Component<IProps, IState> {
 
         ActiveRoomObserver.addListener(this.props.room.roomId, this.onActiveRoomUpdate);
         this.dispatcherRef = defaultDispatcher.register(this.onAction);
+        MessagePreviewStore.instance.on(ROOM_PREVIEW_CHANGED, this.onRoomPreviewChanged);
     }
 
     private get showContextMenu(): boolean {
@@ -150,6 +151,7 @@ export default class RoomTile extends React.Component<IProps, IState> {
             ActiveRoomObserver.removeListener(this.props.room.roomId, this.onActiveRoomUpdate);
         }
         defaultDispatcher.unregister(this.dispatcherRef);
+        MessagePreviewStore.instance.off(ROOM_PREVIEW_CHANGED, this.onRoomPreviewChanged);
     }
 
     private onAction = (payload: ActionPayload) => {
@@ -160,6 +162,12 @@ export default class RoomTile extends React.Component<IProps, IState> {
         }
     };
 
+    private onRoomPreviewChanged = (room: Room) => {
+        if (this.props.room && room.roomId === this.props.room.roomId) {
+            this.forceUpdate(); // we don't have any state to set, so just complain that we need an update
+        }
+    };
+
     private scrollIntoView = () => {
         if (!this.roomTileRef.current) return;
         this.roomTileRef.current.scrollIntoView({

src/stores/room-list/MessagePreviewStore.ts

@@ -28,6 +28,10 @@ import { StickerEventPreview } from "./previews/StickerEventPreview";
 import { ReactionEventPreview } from "./previews/ReactionEventPreview";
 import { UPDATE_EVENT } from "../AsyncStore";
 
+// Emitted event for when a room's preview has changed. First argument will the room for which
+// the change happened.
+export const ROOM_PREVIEW_CHANGED = "room_preview_changed";
+
 const PREVIEWS = {
     'm.room.message': {
         isState: false,
@@ -146,6 +150,7 @@ export class MessagePreviewStore extends AsyncStoreWithClient<IState> {
                 // We've muted the underlying Map, so just emit that we've changed.
                 this.previews.set(room.roomId, map);
                 this.emit(UPDATE_EVENT, this);
+                this.emit(ROOM_PREVIEW_CHANGED, room);
             }
             return; // we're done
         }
@@ -153,6 +158,7 @@ export class MessagePreviewStore extends AsyncStoreWithClient<IState> {
         // At this point, we didn't generate a preview so clear it
         this.previews.set(room.roomId, new Map<TagID|TAG_ANY, string|null>());
         this.emit(UPDATE_EVENT, this);
+        this.emit(ROOM_PREVIEW_CHANGED, room);
     }
 
     protected async onAction(payload: ActionPayload) {