Make group profile editing mostly work

apart from avatars

src/components/structures/GroupView.js

@@ -179,10 +179,12 @@ export default React.createClass({
             summary: null,
             error: null,
             editing: false,
+            saving: false,
         };
     },
 
     componentWillMount: function() {
+        this._changeAvatarComponent = null;
         this._loadGroupFromServer(this.props.groupId);
     },
 
@@ -197,6 +199,10 @@ export default React.createClass({
         }
     },
 
+    _collectChangeAvatar: function(node) {
+        this._changeAvatarComponent = node;
+    },
+
     _loadGroupFromServer: function(groupId) {
         MatrixClientPeg.get().getGroupSummary(groupId).done((res) => {
             this.setState({
@@ -246,8 +252,36 @@ export default React.createClass({
         });
     },
 
+    _onAvatarSelected: function(e) {
+    },
+
+    _onAvatarChange: function(newAvatarUrl) {
+        const newProfileForm = Object.assign(this.state.profileForm, { avatar_url: newAvatarUrl });
+        this.setState({
+            profileForm: newProfileForm,
+        });
+    },
+
     _onSaveClick: function() {
-        // TODO: There's no API to edit group profile info yet.
+        this.setState({saving: true});
+        MatrixClientPeg.get().setGroupProfile(this.props.groupId, this.state.profileForm).then((result) => {
+            this.setState({
+                saving: false,
+                editing: false,
+                summary: false,
+            });
+            return this._loadGroupFromServer(this.props.groupId);
+        }).catch((e) => {
+            this.setState({
+                saving: false,
+            });
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            console.error("Failed to save group profile", e);
+            Modal.createDialog(ErrorDialog, {
+                title: _t('Error'),
+                description: _t('Failed to update group'),
+            });
+        }).done();
     },
 
     _getFeaturedRoomsNode() {
@@ -330,8 +364,9 @@ export default React.createClass({
         const GroupAvatar = sdk.getComponent("avatars.GroupAvatar");
         const Loader = sdk.getComponent("elements.Spinner");
         const ChangeAvatar = sdk.getComponent("settings.ChangeAvatar");
+        const TintableSvg = sdk.getComponent("elements.TintableSvg");
 
-        if (this.state.summary === null && this.state.error === null) {
+        if (this.state.summary === null && this.state.error === null || this.state.saving) {
             return <Loader />;
         } else if (this.state.summary) {
             const summary = this.state.summary;
@@ -345,16 +380,16 @@ export default React.createClass({
             if (this.state.editing) {
                 avatarNode = (
                     <div className="mx_GroupView_avatarPicker">
-                        <div onClick={this.onAvatarPickerClick}>
+                        <label htmlFor="avatarInput" className="mx_GroupView_avatarPicker_label">
                             <ChangeAvatar ref={this._collectChangeAvatar}
                                 groupId={this.props.groupId}
                                 initialAvatarUrl={this.state.summary.profile.avatar_url}
-                                setAvatar={false} onAvatar={this._onAvatarChange}
+                                onUploadComplete={this._onAvatarChange}
                                 showUploadSection={false} width={48} height={48}
                             />
-                        </div>
+                        </label>
                         <div className="mx_GroupView_avatarPicker_edit">
-                            <label htmlFor="avatarInput" ref="file_label">
+                            <label htmlFor="avatarInput" className="mx_GroupView_avatarPicker_label">
                                 <img src="img/camera.svg"
                                     alt={ _t("Upload avatar") } title={ _t("Upload avatar") }
                                     width="17" height="15" />
@@ -421,9 +456,9 @@ export default React.createClass({
                     {this._getFeaturedUsersNode()}
                 </div>;
                 // disabled until editing works
-                rightButtons = null;/*<AccessibleButton className="mx_GroupHeader_button" onClick={this._onEditClick} title={_t("Edit Group")}>
+                rightButtons = <AccessibleButton className="mx_GroupHeader_button" onClick={this._onEditClick} title={_t("Edit Group")}>
                     <TintableSvg src="img/icons-settings-room.svg" width="16" height="16"/>
-                </AccessibleButton>;*/
+                </AccessibleButton>;
             }
 
             return (

src/components/views/settings/ChangeAvatar.js

@@ -33,12 +33,10 @@ module.exports = React.createClass({
         height: React.PropTypes.number,
         className: React.PropTypes.string,
 
-        // If true, set the room / user avatar once the image is uploaded.
+        // Called with the mxc URL of the uploaded image after the avatar is
-        // Ignored for groups.
+        // uploaded. If undefined, the room or user avatar if changed once the
-        setAvatar: React.PropTypes.bool,
+        // image has finished uploading. Must be set for groups.
-
+        onUploadComplete: React.PropTypes.func,
-        // Called after the avatar is uploaded
-        onAvatar: React.PropTypes.func,
     },
 
     Phases: {
@@ -53,7 +51,6 @@ module.exports = React.createClass({
             className: "",
             width: 80,
             height: 80,
-            setAvatar: true,
         };
     },
 
@@ -85,8 +82,7 @@ module.exports = React.createClass({
             newUrl = url;
             if (this.props.onAvatar) {
                 this.props.onAvatar(url);
-            }
+            } else {
-            if (this.props.setAvatar) {
                 if (self.props.room) {
                     return MatrixClientPeg.get().sendStateEvent(
                         self.props.room.roomId,
@@ -94,7 +90,7 @@ module.exports = React.createClass({
                         {url: url},
                         ''
                     );
-                } else {
+                } else if (!this.props.groupId) {
                     return MatrixClientPeg.get().setAvatarUrl(url);
                 }
             }