Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/room-list/desync

 Conflicts:

	src/components/views/rooms/RoomTile.tsx

src/components/views/rooms/NotificationBadge.tsx

@@ -72,6 +72,7 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
 
     public componentWillUnmount() {
         SettingsStore.unwatchSetting(this.countWatcherRef);
+        this.props.notification.off(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate);
     }
 
     public componentDidUpdate(prevProps: Readonly<IProps>) {

src/components/views/rooms/RoomTile.tsx

@@ -61,17 +61,15 @@ interface IProps {
     showMessagePreview: boolean;
     isMinimized: boolean;
     tag: TagID;
-
-    // TODO: Incoming call boxes: https://github.com/vector-im/riot-web/issues/14177
 }
 
 type PartialDOMRect = Pick<DOMRect, "left" | "bottom">;
 
 interface IState {
-    hover: boolean;
     selected: boolean;
     notificationsMenuPosition: PartialDOMRect;
     generalMenuPosition: PartialDOMRect;
+    messagePreview?: string;
 }
 
 const messagePreviewId = (roomId: string) => `mx_RoomTile_messagePreview_${roomId}`;
@@ -110,7 +108,7 @@ const NotifOption: React.FC<INotifOptionProps> = ({active, onClick, iconClassNam
     );
 };
 
-export default class RoomTile extends React.Component<IProps, IState> {
+export default class RoomTile extends React.PureComponent<IProps, IState> {
     private dispatcherRef: string;
     private roomTileRef = createRef<HTMLDivElement>();
     private notificationState: NotificationState;
@@ -119,10 +117,12 @@ export default class RoomTile extends React.Component<IProps, IState> {
         super(props);
 
         this.state = {
-            hover: false,
             selected: ActiveRoomObserver.activeRoomId === this.props.room.roomId,
             notificationsMenuPosition: null,
             generalMenuPosition: null,
+
+            // generatePreview() will return nothing if the user has previews disabled
+            messagePreview: this.generatePreview(),
         };
 
         ActiveRoomObserver.addListener(this.props.room.roomId, this.onActiveRoomUpdate);
@@ -170,10 +170,19 @@ 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
+            // generatePreview() will return nothing if the user has previews disabled
+            this.setState({messagePreview: this.generatePreview()});
         }
     };
 
+    private generatePreview(): string | null {
+        if (!this.showMessagePreview) {
+            return null;
+        }
+
+        return MessagePreviewStore.instance.getPreviewForRoom(this.props.room, this.props.tag);
+    }
+
     private scrollIntoView = () => {
         if (!this.roomTileRef.current) return;
         this.roomTileRef.current.scrollIntoView({
@@ -182,14 +191,6 @@ export default class RoomTile extends React.Component<IProps, IState> {
         });
     };
 
-    private onTileMouseEnter = () => {
-        this.setState({hover: true});
-    };
-
-    private onTileMouseLeave = () => {
-        this.setState({hover: false});
-    };
-
     private onTileClick = (ev: React.KeyboardEvent) => {
         ev.preventDefault();
         ev.stopPropagation();
@@ -509,19 +510,13 @@ export default class RoomTile extends React.Component<IProps, IState> {
         name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
 
         let messagePreview = null;
-        if (this.showMessagePreview) {
+        if (this.showMessagePreview && this.state.messagePreview) {
-            // The preview store heavily caches this info, so should be safe to hammer.
-            const text = MessagePreviewStore.instance.getPreviewForRoom(this.props.room, this.props.tag);
-
-            // Only show the preview if there is one to show.
-            if (text) {
             messagePreview = (
                 <div className="mx_RoomTile_messagePreview" id={messagePreviewId(this.props.room.roomId)}>
-                        {text}
+                    {this.state.messagePreview}
                 </div>
             );
         }
-        }
 
         const nameClasses = classNames({
             "mx_RoomTile_name": true,
@@ -574,8 +569,6 @@ export default class RoomTile extends React.Component<IProps, IState> {
                             tabIndex={isActive ? 0 : -1}
                             inputRef={ref}
                             className={classes}
-                            onMouseEnter={this.onTileMouseEnter}
-                            onMouseLeave={this.onTileMouseLeave}
                             onClick={this.onTileClick}
                             onContextMenu={this.onContextMenu}
                             role="treeitem"