Make group editing work

src/components/structures/GroupView.js

@@ -22,6 +22,7 @@ import dis from '../../dispatcher';
 import { sanitizedHtmlNode } from '../../HtmlUtils';
 import { _t } from '../../languageHandler';
 import AccessibleButton from '../views/elements/AccessibleButton';
+import Modal from '../../Modal';
 
 const RoomSummaryType = PropTypes.shape({
     room_id: PropTypes.string.isRequired,
@@ -180,6 +181,7 @@ export default React.createClass({
             error: null,
             editing: false,
             saving: false,
+            uploadingAvatar: false,
         };
     },
 
@@ -199,10 +201,6 @@ export default React.createClass({
         }
     },
 
-    _collectChangeAvatar: function(node) {
-        this._changeAvatarComponent = node;
-    },
-
     _loadGroupFromServer: function(groupId) {
         MatrixClientPeg.get().getGroupSummary(groupId).done((res) => {
             this.setState({
@@ -252,14 +250,26 @@ export default React.createClass({
         });
     },
 
-    _onAvatarSelected: function(e) {
+    _onAvatarSelected: function(ev) {
-    },
+        const file = ev.target.files[0];
+        if (!file) return;
 
-    _onAvatarChange: function(newAvatarUrl) {
+        this.setState({uploadingAvatar: true});
-        const newProfileForm = Object.assign(this.state.profileForm, { avatar_url: newAvatarUrl });
+        MatrixClientPeg.get().uploadContent(file).then((url) => {
-        this.setState({
+            const newProfileForm = Object.assign(this.state.profileForm, { avatar_url: url });
-            profileForm: newProfileForm,
+            this.setState({
-        });
+                uploadingAvatar: false,
+                profileForm: newProfileForm,
+            });
+        }).catch((e) => {
+            this.setState({uploadingAvatar: false});
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            console.error("Failed to upload avatar image", e);
+            Modal.createDialog(ErrorDialog, {
+                title: _t('Error'),
+                description: _t('Failed to upload image'),
+            });
+        }).done();
     },
 
     _onSaveClick: function() {
@@ -378,15 +388,21 @@ export default React.createClass({
             let headerBottom;
             let roomBody;
             if (this.state.editing) {
+                let avatarImage;
+                if (this.state.uploadingAvatar) {
+                    avatarImage = <Loader />;
+                } else {
+                    const GroupAvatar = sdk.getComponent('avatars.GroupAvatar');
+                    avatarImage = <GroupAvatar groupId={this.props.groupId}
+                        groupAvatarUrl={this.state.profileForm.avatar_url}
+                        width={48} height={48} resizeMethod='crop'
+                    />;
+                }
+
                 avatarNode = (
                     <div className="mx_GroupView_avatarPicker">
                         <label htmlFor="avatarInput" className="mx_GroupView_avatarPicker_label">
-                            <ChangeAvatar ref={this._collectChangeAvatar}
+                            {avatarImage}
-                                groupId={this.props.groupId}
-                                initialAvatarUrl={this.state.summary.profile.avatar_url}
-                                onUploadComplete={this._onAvatarChange}
-                                showUploadSection={false} width={48} height={48}
-                            />
                         </label>
                         <div className="mx_GroupView_avatarPicker_edit">
                             <label htmlFor="avatarInput" className="mx_GroupView_avatarPicker_label">

src/i18n/strings/en_EN.json

@@ -957,5 +957,7 @@
     "Error whilst fetching joined groups": "Error whilst fetching joined groups",
     "Featured Users:": "Featured Users:",
     "Edit Group": "Edit Group",
-    "Automatically replace plain text Emoji": "Automatically replace plain text Emoji"
+    "Automatically replace plain text Emoji": "Automatically replace plain text Emoji",
+    "Failed to upload image": "Failed to upload image",
+    "Failed to update group": "Failed to update group"
 }