Get avatar display and uploads working

src/components/structures/UserSettings.js

@@ -47,26 +47,7 @@ module.exports = React.createClass({
     componentWillMount: function() {
         var self = this;
 
-        q.all([
+        this._refreshFromServer();
-            UserSettingsStore.loadProfileInfo(), UserSettingsStore.loadThreePids()
-        ]).done(function(resps) {
-            self.setState({
-                avatarUrl: resps[0].avatar_url,
-                threepids: resps[1].threepids,
-                phase: "UserSettings.DISPLAY",
-            });
-
-            // keep a copy of the original state in order to track changes
-            self.setState({
-                originalState: self.state
-            });
-        }, function(error) {
-            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            Modal.createDialog(ErrorDialog, {
-                title: "Can't load user settings",
-                description: error.toString()
-            });
-        });
     },
 
     componentDidMount: function() {
@@ -78,47 +59,24 @@ module.exports = React.createClass({
         dis.unregister(this.dispatcherRef);
     },
 
-/*
+    _refreshFromServer: function() {
-    onSaveClicked: function(ev) { // XXX unused
         var self = this;
-        var savePromises = [];
+        q.all([
-
+            UserSettingsStore.loadProfileInfo(), UserSettingsStore.loadThreePids()
-        // XXX: this is managed in ChangeAvatar.js, although could be moved out here in order
+        ]).done(function(resps) {
-        // to allow for the change to be staged alongside the rest of the form.
-        //
-        // if (this.state.originalState.avatarUrl !== this.state.avatarUrl) {
-        //     savePromises.push( UserSettingsStore.saveAvatarUrl(this.state.avatarUrl) );
-        // }
-
-        if (this.state.originalState.threepids.length !== this.state.threepids.length ||
-                this.state.originalState.threepids.every((element, index) => {
-                    return element === this.state.threepids[index];
-                })) {
-            savePromises.push(
-                UserSettingsStore.saveThreePids(this.state.threepids)
-            );
-        }
-
-        self.setState({
-            phase: "UserSettings.SAVING",
-        });
-
-        q.all(savePromises).done(function(resps) {
             self.setState({
+                avatarUrl: resps[0].avatar_url,
+                threepids: resps[1].threepids,
                 phase: "UserSettings.DISPLAY",
             });
-            self.props.onClose();
         }, function(error) {
-            self.setState({
-                phase: "UserSettings.DISPLAY",
-            });
             var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createDialog(ErrorDialog, {
-                title: "Can't save user settings",
+                title: "Can't load user settings",
                 description: error.toString()
             });
-        });        
+        });
-    }, */
+    },
 
     onAction: function(payload) {
         if (payload.action === "notifier_enabled") {
@@ -126,24 +84,26 @@ module.exports = React.createClass({
                 enableNotifications : UserSettingsStore.getEnableNotifications()
             });
         }
-    }, 
-
-    editAvatar: function() {
-        var url = MatrixClientPeg.get().mxcUrlToHttp(this.state.avatarUrl);
-        var ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
-        var avatarDialog = (
-            <div>
-                <ChangeAvatar initialAvatarUrl={url} />
-                <div className="mx_Dialog_buttons">
-                    <button onClick={this.onAvatarDialogCancel}>Cancel</button>
-                </div>
-            </div>
-        );
-        this.avatarDialog = Modal.createDialogWithElement(avatarDialog);
     },
 
-    onAvatarDialogCancel: function() {
+    onAvatarSelected: function(ev) {
-        this.avatarDialog.close();
+        var self = this;
+        var changeAvatar = this.refs.changeAvatar;
+        if (!changeAvatar) {
+            console.error("No ChangeAvatar found to upload image to!");
+            return;
+        }
+        changeAvatar.onFileSelected(ev).catch(function(err) {
+            var errMsg = err.error || "";
+            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createDialog(ErrorDialog, {
+                title: "Error",
+                description: "Failed to set avatar. " + errMsg
+            });
+        }).finally(function() {
+            // dunno if the avatar changed, re-check it.
+            self._refreshFromServer();
+        }).done();
     },
 
     onLogoutClicked: function(ev) {
@@ -206,6 +166,10 @@ module.exports = React.createClass({
         var RoomHeader = sdk.getComponent('rooms.RoomHeader');
         var ChangeDisplayName = sdk.getComponent("views.settings.ChangeDisplayName");
         var ChangePassword = sdk.getComponent("views.settings.ChangePassword");
+        var ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
+        var avatarUrl = (
+            this.state.avatarUrl ? MatrixClientPeg.get().mxcUrlToHttp(this.state.avatarUrl) : null
+        );
 
         return (
             <div className="mx_UserSettings">
@@ -240,8 +204,15 @@ module.exports = React.createClass({
                     </div>
 
                     <div className="mx_UserSettings_avatarPicker">
-                        <div className="mx_UserSettings_avatarPicker_edit"
+                        <ChangeAvatar ref="changeAvatar" initialAvatarUrl={avatarUrl}
-                            onClick={this.editAvatar}>
+                            showUploadSection={false} />
+                        <div className="mx_UserSettings_avatarPicker_edit">
+                            <label htmlFor="avatarInput">
+                                <img src="img/upload.svg"
+                                    alt="Upload avatar" title="Upload avatar"
+                                    width="19" height="24" />
+                            </label>
+                            <input id="avatarInput" type="file" onChange={this.onAvatarSelected}/>
                         </div>
                     </div>
                 </div>

src/components/views/settings/ChangeAvatar.js

@@ -23,6 +23,8 @@ module.exports = React.createClass({
     propTypes: {
         initialAvatarUrl: React.PropTypes.string,
         room: React.PropTypes.object,
+        // if false, you need to call changeAvatar.onFileSelected yourself.
+        showUploadSection: React.PropTypes.bool
     },
 
     Phases: {
@@ -31,6 +33,12 @@ module.exports = React.createClass({
         Error: "error",
     },
 
+    getDefaultProps: function() {
+        return {
+            showUploadSection: true
+        };
+    },
+
     getInitialState: function() {
         return {
             avatarUrl: this.props.initialAvatarUrl,
@@ -55,7 +63,7 @@ module.exports = React.createClass({
             phase: this.Phases.Uploading
         });
         var self = this;
-        MatrixClientPeg.get().uploadContent(file).then(function(url) {
+        var httpPromise = MatrixClientPeg.get().uploadContent(file).then(function(url) {
             newUrl = url;
             if (self.props.room) {
                 return MatrixClientPeg.get().sendStateEvent(
@@ -67,7 +75,9 @@ module.exports = React.createClass({
             } else {
                 return MatrixClientPeg.get().setAvatarUrl(url);
             }
-        }).done(function() {
+        });
+
+        httpPromise.done(function() {
             self.setState({
                 phase: self.Phases.Display,
                 avatarUrl: MatrixClientPeg.get().mxcUrlToHttp(newUrl)
@@ -78,11 +88,13 @@ module.exports = React.createClass({
             });
             self.onError(error);
         });
+
+        return httpPromise;
     },
 
     onFileSelected: function(ev) {
         this.avatarSet = true;
-        this.setAvatarFromFile(ev.target.files[0]);
+        return this.setAvatarFromFile(ev.target.files[0]);
     },
 
     onError: function(error) {
@@ -106,6 +118,17 @@ module.exports = React.createClass({
             avatarImg = <img src={this.state.avatarUrl} style={style} />;
         }
 
+        var uploadSection;
+        if (this.props.showUploadSection) {
+            uploadSection = (
+                <div className="mx_Dialog_content">
+                    Upload new:
+                    <input type="file" onChange={this.onFileSelected}/>
+                    {this.state.errorText}
+                </div>  
+            );
+        }
+
         switch (this.state.phase) {
             case this.Phases.Display:
             case this.Phases.Error:
@@ -114,11 +137,7 @@ module.exports = React.createClass({
                         <div className="mx_Dialog_content">
                             {avatarImg}
                         </div>
-                        <div className="mx_Dialog_content">
+                        {uploadSection}
-                            Upload new:
-                            <input type="file" onChange={this.onFileSelected}/>
-                            {this.state.errorText}
-                        </div>    
                     </div>
                 );
             case this.Phases.Uploading: