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.

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(() => {
+        MatrixClientPeg.get().unban(this.props.member.roomId, this.props.member.userId).catch((err) => {
-            this.props.onUnbanned();
-        }).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>