Merge pull request #6108 from matrix-org/gsouquet/fix/17473

src/components/structures/UserMenu.tsx

@@ -69,7 +69,7 @@ interface IState {
     contextMenuPosition: PartialDOMRect;
     isDarkTheme: boolean;
     selectedSpace?: Room;
-    pendingRoomJoin: string[]
+    pendingRoomJoin: Set<string>;
 }
 
 @replaceableComponent("structures.UserMenu")
@@ -86,7 +86,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
         this.state = {
             contextMenuPosition: null,
             isDarkTheme: this.isUserOnDarkTheme(),
-            pendingRoomJoin: [],
+            pendingRoomJoin: new Set<string>(),
         };
 
         OwnProfileStore.instance.on(UPDATE_EVENT, this.onProfileUpdate);
@@ -106,6 +106,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
         this.dispatcherRef = defaultDispatcher.register(this.onAction);
         this.themeWatcherRef = SettingsStore.watchSetting("theme", null, this.onThemeChanged);
         this.tagStoreRef = GroupFilterOrderStore.addListener(this.onTagStoreUpdate);
+        MatrixClientPeg.get().on("Room", this.onRoom);
     }
 
     public componentWillUnmount() {
@@ -117,6 +118,11 @@ export default class UserMenu extends React.Component<IProps, IState> {
         if (SettingsStore.getValue("feature_spaces")) {
             SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.onSelectedSpaceUpdate);
         }
+        MatrixClientPeg.get().removeListener("Room", this.onRoom);
+    }
+
+    private onRoom = (room: Room): void => {
+        this.removePendingJoinRoom(room.roomId);
     }
 
     private onTagStoreUpdate = () => {
@@ -168,30 +174,21 @@ export default class UserMenu extends React.Component<IProps, IState> {
         }
     };
 
-    private addPendingJoinRoom(roomId) {
+    private addPendingJoinRoom(roomId: string): void {
         this.setState({
-            pendingRoomJoin: [
-                ...this.state.pendingRoomJoin,
-                roomId,
-            ],
+            pendingRoomJoin: new Set<string>(this.state.pendingRoomJoin)
+                .add(roomId),
         });
     }
 
-    private removePendingJoinRoom(roomId) {
-        const newPendingRoomJoin = this.state.pendingRoomJoin.filter(pendingJoinRoomId => {
-            return pendingJoinRoomId !== roomId;
-        });
-        if (newPendingRoomJoin.length !== this.state.pendingRoomJoin.length) {
+    private removePendingJoinRoom(roomId: string): void {
+        if (this.state.pendingRoomJoin.delete(roomId)) {
             this.setState({
-                pendingRoomJoin: newPendingRoomJoin,
+                pendingRoomJoin: new Set<string>(this.state.pendingRoomJoin),
             })
         }
     }
 
-    get hasPendingActions(): boolean {
-        return this.state.pendingRoomJoin.length > 0;
-    }
-
     private onOpenMenuClick = (ev: React.MouseEvent) => {
         ev.preventDefault();
         ev.stopPropagation();
@@ -653,11 +650,11 @@ export default class UserMenu extends React.Component<IProps, IState> {
                             />
                         </span>
                         {name}
-                        {this.hasPendingActions && (
+                        {this.state.pendingRoomJoin.size > 0 && (
                             <InlineSpinner>
                                 <TooltipButton helpText={_t(
                                     "Currently joining %(count)s rooms",
-                                    { count: this.state.pendingRoomJoin.length },
+                                    { count: this.state.pendingRoomJoin.size },
                                 )} />
                             </InlineSpinner>
                         )}

src/dispatcher/actions.ts

@@ -152,5 +152,5 @@ export enum Action {
     /**
      * Fired when joining a room failed
      */
-    JoinRoomError = "join_room",
+    JoinRoomError = "join_room_error",
 }