From e612bcedd5c14c4160fd41a9c29a3f96987315b9 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 21 Dec 2021 15:10:04 +0000
Subject: [PATCH 1/2] Space panel should watch spaces for space name changes

and not rely on merely being re-rendered by coincidence
---
 src/components/views/spaces/SpaceTreeLevel.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx
index 7a0db1171d7..90242fbb750 100644
--- a/src/components/views/spaces/SpaceTreeLevel.tsx
+++ b/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}

From 1d913c8bc5b7c381c88043f8ee22e7cf2276a297 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 21 Dec 2021 15:25:41 +0000
Subject: [PATCH 2/2] Fix space name in room list header too

---
 src/components/views/rooms/RoomListHeader.tsx | 6 ++++--
 src/hooks/useEventEmitter.ts                  | 2 ++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/RoomListHeader.tsx b/src/components/views/rooms/RoomListHeader.tsx
index 345307f54e7..56d81e0e8d0 100644
--- a/src/components/views/rooms/RoomListHeader.tsx
+++ b/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 }
diff --git a/src/hooks/useEventEmitter.ts b/src/hooks/useEventEmitter.ts
index 92de5ae3f46..c73e4ba53d7 100644
--- a/src/hooks/useEventEmitter.ts
+++ b/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;
 };