Space panel should watch spaces for space name changes (#7432)

src/components/views/rooms/RoomListHeader.tsx

@@ -174,6 +174,8 @@ const RoomListHeader = ({ spacePanelDisabled, onVisibilityChange }: IProps) => {
         }
     });
 
+    const spaceName = useEventEmitterState(activeSpace, "Room.name", () => activeSpace?.name);
+
     useEffect(() => {
         if (onVisibilityChange) {
             onVisibilityChange();
@@ -320,7 +322,7 @@ const RoomListHeader = ({ spacePanelDisabled, onVisibilityChange }: IProps) => {
 
     let title: string;
     if (activeSpace) {
-        title = activeSpace.name;
+        title = spaceName;
     } else if (communityId) {
         title = CommunityPrototypeStore.instance.getSelectedCommunityName();
     } else {
@@ -344,7 +346,7 @@ const RoomListHeader = ({ spacePanelDisabled, onVisibilityChange }: IProps) => {
             isExpanded={mainMenuDisplayed}
             className="mx_RoomListHeader_contextMenuButton"
             title={activeSpace
-                ? _t("%(spaceName)s menu", { spaceName: activeSpace.name })
+                ? _t("%(spaceName)s menu", { spaceName })
                 : _t("Home options")}
         >
             { title }

src/components/views/spaces/SpaceTreeLevel.tsx

@@ -146,7 +146,7 @@ export const SpaceButton: React.FC<IButtonProps> = ({
 };
 
 interface IItemProps extends InputHTMLAttributes<HTMLLIElement> {
-    space?: Room;
+    space: Room;
     activeSpaces: SpaceKey[];
     isNested?: boolean;
     isPanelCollapsed?: boolean;
@@ -157,6 +157,7 @@ interface IItemProps extends InputHTMLAttributes<HTMLLIElement> {
 }
 
 interface IItemState {
+    name: string;
     collapsed: boolean;
     childSpaces: Room[];
 }
@@ -176,15 +177,18 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         );
 
         this.state = {
+            name: this.props.space.name,
             collapsed,
             childSpaces: this.childSpaces,
         };
 
         SpaceStore.instance.on(this.props.space.roomId, this.onSpaceUpdate);
+        this.props.space.on("Room.name", this.onRoomNameChange);
     }
 
     componentWillUnmount() {
         SpaceStore.instance.off(this.props.space.roomId, this.onSpaceUpdate);
+        this.props.space.off("Room.name", this.onRoomNameChange);
     }
 
     private onSpaceUpdate = () => {
@@ -193,6 +197,12 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         });
     };
 
+    private onRoomNameChange = () => {
+        this.setState({
+            name: this.props.space.name,
+        });
+    };
+
     private get childSpaces() {
         return SpaceStore.instance.getChildSpaces(this.props.space.roomId)
             .filter(s => !this.props.parents?.has(s.roomId));
@@ -318,7 +328,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
                     space={space}
                     className={isInvite ? "mx_SpaceButton_invite" : undefined}
                     selected={activeSpaces.includes(space.roomId)}
-                    label={space.name}
+                    label={this.state.name}
                     contextMenuTooltip={_t("Space options")}
                     notificationState={notificationState}
                     isNarrow={isPanelCollapsed}

src/hooks/useEventEmitter.ts

@@ -65,6 +65,8 @@ export const useEventEmitterState = <T>(
     const handler = useCallback((...args: any[]) => {
         setValue(fn(...args));
     }, [fn]);
+    // re-run when the emitter changes
+    useEffect(handler, [emitter]); // eslint-disable-line react-hooks/exhaustive-deps
     useEventEmitter(emitter, eventName, handler);
     return value;
 };