Upload avatar

1 files changed, 46 insertions, 12 deletions

diff --git a/vnext/src/components/Settings.js b/vnext/src/components/Settings.js
index bf42180a..62115455 100644
--- a/vnext/src/components/Settings.js
+++ b/vnext/src/components/Settings.js
@@ -1,21 +1,27 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import update from 'immutability-helper';
 
-import { me } from '../api';
+import { me, updateAvatar } from '../api';
 
 import { UserType } from './Types';
 
 import Button from './Button';
 import Icon from './Icon';
+import UploadButton from './UploadButton';
+import Avatar, { AvatarLink } from './Avatar';
 
 export default class Settings extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            settings: {},
+            settings: {
+                newAvatar: ''
+            },
             me: {}
         };
+        this.avatarinput = React.createRef();
     }
     componentDidMount() {
         me().then(visitor => {
@@ -28,12 +34,18 @@ export default class Settings extends React.Component {
         if (event.preventDefault) {
             event.preventDefault();
         }
-        console.log('avatar update');
+        updateAvatar(this.avatarinput.current.files[0]).then(() => {
+            this.avatarChanged('');
+            me().then(visitor => {
+                this.props.onChange(visitor);
+            });
+        });
     }
     passwordChanged = (event) => {
-        this.setState({
-            settings: { password: event.target.value }
+        let newState = update(this.state, {
+            settings: { password: { $set: event.target.value } }
         });
+        this.setState(newState);
     }
     onSubmitPassword = (event) => {
         if (event.preventDefault) {
@@ -66,18 +78,39 @@ export default class Settings extends React.Component {
     disableTwitter = () => {
         console.log('twitter disable');
     }
+    avatarChanged = (newAvatar) => {
+        let newState = update(this.state, {
+            settings: { newAvatar: { $set: newAvatar }, preview: { $set: '' } }
+        });
+        this.setState(newState);
+        if (newAvatar) {
+            let reader = new FileReader();
+            reader.onloadend = (preview) => {
+                let newState = update(this.state, {
+                    settings: { preview: { $set: preview.target.result } }
+                });
+                this.setState(newState);
+            };
+            reader.readAsDataURL(this.avatarinput.current.files[0]);
+        }
+    }
     render() {
-        const { me } = this.state;
+        const { me, settings } = this.state;
+        let previewUser = { ...this.props.visitor, uname: '<preview>' };
+        if (settings.preview) {
+            previewUser = { ...this.props.visitor, avatar: settings.preview, uname: '<preview>' };
+        }
         return (
             <div className="msg-cont">
                 <fieldset>
                     <legend><Icon name="ei-user" size="m" />Changing your avatar</legend>
                     <form>
-                        <p>Avatar: <input type="file" name="avatar" /><br />
-                            <small>Recommendations: PNG, 96x96, &lt;50Kb. Also, JPG and GIF supported.</small></p>
-                        <p><input type="hidden" name="page" value="about" />
-                            <Button onClick={this.onSubmitAvatar}>Update</Button>
-                        </p>
+                        <small>Recommendations: PNG, 96x96, &lt;50Kb. Also, JPG and GIF supported.</small>
+                        <UploadButton inputRef={this.avatarinput}
+                            value={settings.newAvatar} onChange={this.avatarChanged} />
+                        <Avatar user={this.props.visitor} />
+                        <Avatar user={previewUser} />
+                        <Button onClick={this.onSubmitAvatar}>Update</Button>
                     </form>
                 </fieldset>
                 <fieldset>
@@ -221,6 +254,7 @@ export default class Settings extends React.Component {
 }
 
 Settings.propTypes = {
-    visitor: UserType.isRequired
+    visitor: UserType.isRequired,
+    onChange: PropTypes.func.isRequired
 };