Make related groups direct manipulation

src/components/views/room_settings/RelatedGroupSettings.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2017 New Vector Ltd.
+Copyright 2017, 2019 New Vector Ltd.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -21,6 +21,7 @@ import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
 import isEqual from 'lodash/isEqual';
+import ErrorDialog from "../dialogs/ErrorDialog";
 
 const GROUP_ID_REGEX = /\+\S+:\S+/;
 
@@ -46,7 +47,7 @@ module.exports = React.createClass({
     getInitialState: function() {
         return {
             newGroupsList: this.getInitialGroupList(),
-            newGroupId: null,
+            newGroupId: "",
         };
     },
 
@@ -54,24 +55,19 @@ module.exports = React.createClass({
         return this.props.relatedGroupsEvent ? (this.props.relatedGroupsEvent.getContent().groups || []) : [];
     },
 
-    needsSaving: function() {
+    updateGroups: function() {
-        const cli = this.context.matrixClient;
+        this.context.matrixClient.sendStateEvent(this.props.roomId, 'm.room.related_groups', {
-        const room = cli.getRoom(this.props.roomId);
+            groups: this.state.newGroupsList,
-        if (!room.currentState.maySendStateEvent('m.room.related_groups', cli.getUserId())) return false;
+        }, '').catch((err) => {
-        return !isEqual(this.getInitialGroupList(), this.state.newGroupsList);
+            console.error(err);
-    },
+            Modal.createTrackedDialog('Error updating flair', '', ErrorDialog, {
-
+                title: _t("Error updating flair"),
-    saveSettings: function() {
+                description: _t(
-        if (!this.needsSaving()) return Promise.resolve();
+                    "There was an error updating the flair for this room. The server may not allow it or " +
-
+                    "a temporary error occurred."
-        return this.context.matrixClient.sendStateEvent(
+                ),
-            this.props.roomId,
+            });
-            'm.room.related_groups',
+        })
-            {
-                groups: this.state.newGroupsList,
-            },
-            '',
-        );
     },
 
     validateGroupId: function(groupId) {
@@ -98,21 +94,14 @@ module.exports = React.createClass({
             newGroupsList: this.state.newGroupsList.concat([groupId]),
             newGroupId: '',
         });
-    },
+        this.updateGroups();
-
-    onGroupEdited: function(groupId, index) {
-        if (groupId.length === 0 || !this.validateGroupId(groupId)) {
-            return;
-        }
-        this.setState({
-            newGroupsList: Object.assign(this.state.newGroupsList, {[index]: groupId}),
-        });
     },
 
     onGroupDeleted: function(index) {
         const newGroupsList = this.state.newGroupsList.slice();
         newGroupsList.splice(index, 1);
         this.setState({ newGroupsList });
+        this.updateGroups();
     },
 
     render: function() {
@@ -126,7 +115,6 @@ module.exports = React.createClass({
                 canEdit={this.props.canSetRelatedGroups}
                 onNewItemChanged={this.onNewGroupChanged}
                 onItemAdded={this.onGroupAdded}
-                onItemEdited={this.onGroupEdited}
                 onItemRemoved={this.onGroupDeleted}
                 itemsLabel={_t('Showing flair for these communities:')}
                 noItemsLabel={_t('This room is not showing flair for any communities')}

src/components/views/settings/tabs/GeneralRoomSettingsTab.js

@@ -68,12 +68,6 @@ export default class GeneralRoomSettingsTab extends React.Component {
         });
     };
 
-    _saveGroups = (e) => {
-        // TODO: Live modification?
-        if (!this.refs.flairSettings) return;
-        this.refs.flairSettings.saveSettings();
-    };
-
     _onLeaveClick = () => {
         dis.dispatch({
             action: 'leave_room',
@@ -122,12 +116,9 @@ export default class GeneralRoomSettingsTab extends React.Component {
 
                 <span className='mx_SettingsTab_subheading'>{_t("Flair")}</span>
                 <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
-                    <RelatedGroupSettings ref="flairSettings" roomId={room.roomId}
+                    <RelatedGroupSettings roomId={room.roomId}
                                           canSetRelatedGroups={canChangeGroups}
                                           relatedGroupsEvent={groupsEvent} />
-                    <AccessibleButton onClick={this._saveGroups} kind='primary'>
-                        {_t("Save")}
-                    </AccessibleButton>
                 </div>
 
                 <span className='mx_SettingsTab_subheading'>{_t("URL Previews")}</span>