From 61cc6c8293bc34276f1060339fdccaaa9ce3b6bf Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Fri, 11 Oct 2019 12:56:48 +0100
Subject: [PATCH] Correctly update the banned users list when a user is
 unbanned

Fixes https://github.com/vector-im/riot-web/issues/11123

Error wasn't actually the user being unbanned twice - it was a React error about "cannot call enqueueForceUpdate of undefined", which was a binding problem with onUnbanned. However, fixing that didn't do the intended thing - the user was still shown in the settings. We now just listen for membership and  fix it that way.
---
 .../tabs/room/RolesRoomSettingsTab.js         | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/views/settings/tabs/room/RolesRoomSettingsTab.js b/src/components/views/settings/tabs/room/RolesRoomSettingsTab.js
index 64f3992ad0..c826f89916 100644
--- a/src/components/views/settings/tabs/room/RolesRoomSettingsTab.js
+++ b/src/components/views/settings/tabs/room/RolesRoomSettingsTab.js
@@ -63,13 +63,10 @@ export class BannedUser extends React.Component {
         member: PropTypes.object.isRequired, // js-sdk RoomMember
         by: PropTypes.string.isRequired,
         reason: PropTypes.string,
-        onUnbanned: PropTypes.func.isRequired,
     };
 
     _onUnbanClick = (e) => {
-        MatrixClientPeg.get().unban(this.props.member.roomId, this.props.member.userId).then(() => {
-            this.props.onUnbanned();
-        }).catch((err) => {
+        MatrixClientPeg.get().unban(this.props.member.roomId, this.props.member.userId).catch((err) => {
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             console.error("Failed to unban: " + err);
             Modal.createTrackedDialog('Failed to unban', '', ErrorDialog, {
@@ -109,6 +106,22 @@ export default class RolesRoomSettingsTab extends React.Component {
         roomId: PropTypes.string.isRequired,
     };
 
+    componentDidMount(): void {
+        MatrixClientPeg.get().on("RoomState.members", this._onRoomMembership.bind(this));
+    }
+
+    componentWillUnmount(): void {
+        const client = MatrixClientPeg.get();
+        if (client) {
+            client.removeListener("RoomState.members", this._onRoomMembership.bind(this));
+        }
+    }
+
+    _onRoomMembership(event, state, member) {
+        if (state.roomId !== this.props.roomId) return;
+        this.forceUpdate();
+    }
+
     _populateDefaultPlEvents(eventsSection, stateLevel, eventsLevel) {
         for (const desiredEvent of Object.keys(plEventsToShow)) {
             if (!(desiredEvent in eventsSection)) {
@@ -326,7 +339,7 @@ export default class RolesRoomSettingsTab extends React.Component {
                             return (
                                 <BannedUser key={member.userId} canUnban={canBanUsers}
                                             member={member} reason={banEvent.reason}
-                                            by={bannedBy} onUnbanned={this.forceUpdate} />
+                                            by={bannedBy} />
                             );
                         })}
                     </ul>