From ea55b0d45f713751066831c451a40ef57819ed9e Mon Sep 17 00:00:00 2001
From: Paulo Pinto <paulo.pinto@automattic.com>
Date: Thu, 7 Oct 2021 17:01:39 +0100
Subject: [PATCH 1/3] Add room name to component state

Signed-off-by: Paulo Pinto <paulo.pinto@automattic.com>
---
 .../views/dialogs/RoomSettingsDialog.tsx      | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/views/dialogs/RoomSettingsDialog.tsx b/src/components/views/dialogs/RoomSettingsDialog.tsx
index a73f0a595b..b1c21d5044 100644
--- a/src/components/views/dialogs/RoomSettingsDialog.tsx
+++ b/src/components/views/dialogs/RoomSettingsDialog.tsx
@@ -44,12 +44,22 @@ interface IProps {
     initialTabId?: string;
 }
 
+interface IState {
+    roomName: string;
+}
+
 @replaceableComponent("views.dialogs.RoomSettingsDialog")
-export default class RoomSettingsDialog extends React.Component<IProps> {
+export default class RoomSettingsDialog extends React.Component<IProps, IState> {
     private dispatcherRef: string;
 
+    constructor(props: IProps) {
+        super(props);
+        this.state = { roomName: '' };
+    }
+
     public componentDidMount() {
         this.dispatcherRef = dis.register(this.onAction);
+        this.setRoomName();
     }
 
     public componentWillUnmount() {
@@ -66,6 +76,12 @@ export default class RoomSettingsDialog extends React.Component<IProps> {
         }
     };
 
+    private setRoomName = (): void => {
+        this.setState({
+            roomName: MatrixClientPeg.get().getRoom(this.props.roomId).name,
+        });
+    };
+
     private getTabs(): Tab[] {
         const tabs: Tab[] = [];
 
@@ -122,7 +138,7 @@ export default class RoomSettingsDialog extends React.Component<IProps> {
     }
 
     render() {
-        const roomName = MatrixClientPeg.get().getRoom(this.props.roomId).name;
+        const roomName = this.state.roomName;
         return (
             <BaseDialog
                 className='mx_RoomSettingsDialog'

From 53f26d2744ad9b607e01ad13299c8e200190445f Mon Sep 17 00:00:00 2001
From: Paulo Pinto <paulo.pinto@automattic.com>
Date: Thu, 7 Oct 2021 17:04:30 +0100
Subject: [PATCH 2/3] Keep room name up-to-date in settings dialog

Signed-off-by: Paulo Pinto <paulo.pinto@automattic.com>
---
 src/components/views/dialogs/RoomSettingsDialog.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/views/dialogs/RoomSettingsDialog.tsx b/src/components/views/dialogs/RoomSettingsDialog.tsx
index b1c21d5044..a0f1c10884 100644
--- a/src/components/views/dialogs/RoomSettingsDialog.tsx
+++ b/src/components/views/dialogs/RoomSettingsDialog.tsx
@@ -59,6 +59,7 @@ export default class RoomSettingsDialog extends React.Component<IProps, IState>
 
     public componentDidMount() {
         this.dispatcherRef = dis.register(this.onAction);
+        MatrixClientPeg.get().on("Room.name", this.setRoomName);
         this.setRoomName();
     }
 
@@ -66,6 +67,8 @@ export default class RoomSettingsDialog extends React.Component<IProps, IState>
         if (this.dispatcherRef) {
             dis.unregister(this.dispatcherRef);
         }
+
+        MatrixClientPeg.get().removeListener("Room.name", this.setRoomName);
     }
 
     private onAction = (payload): void => {

From 6aa325ed543a2af9efeea032774a8ff3df0d2d7b Mon Sep 17 00:00:00 2001
From: Paulo Pinto <paulo.pinto@automattic.com>
Date: Thu, 7 Oct 2021 17:13:57 +0100
Subject: [PATCH 3/3] Rename method to onRoomName

Signed-off-by: Paulo Pinto <paulo.pinto@automattic.com>
---
 src/components/views/dialogs/RoomSettingsDialog.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/views/dialogs/RoomSettingsDialog.tsx b/src/components/views/dialogs/RoomSettingsDialog.tsx
index a0f1c10884..b0c6fc4050 100644
--- a/src/components/views/dialogs/RoomSettingsDialog.tsx
+++ b/src/components/views/dialogs/RoomSettingsDialog.tsx
@@ -59,8 +59,8 @@ export default class RoomSettingsDialog extends React.Component<IProps, IState>
 
     public componentDidMount() {
         this.dispatcherRef = dis.register(this.onAction);
-        MatrixClientPeg.get().on("Room.name", this.setRoomName);
-        this.setRoomName();
+        MatrixClientPeg.get().on("Room.name", this.onRoomName);
+        this.onRoomName();
     }
 
     public componentWillUnmount() {
@@ -68,7 +68,7 @@ export default class RoomSettingsDialog extends React.Component<IProps, IState>
             dis.unregister(this.dispatcherRef);
         }
 
-        MatrixClientPeg.get().removeListener("Room.name", this.setRoomName);
+        MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
     }
 
     private onAction = (payload): void => {
@@ -79,7 +79,7 @@ export default class RoomSettingsDialog extends React.Component<IProps, IState>
         }
     };
 
-    private setRoomName = (): void => {
+    private onRoomName = (): void => {
         this.setState({
             roomName: MatrixClientPeg.get().getRoom(this.props.roomId).name,
         });