ChangeAvatarForm in Settings

1 files changed, 46 insertions, 44 deletions

diff --git a/vnext/src/components/Settings.js b/vnext/src/components/Settings.js
index 39489aa3..29d1b4b5 100644
--- a/vnext/src/components/Settings.js
+++ b/vnext/src/components/Settings.js
@@ -1,8 +1,6 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 
-import update from 'immutability-helper';
-
 import { me, updateAvatar } from '../api';
 
 import { UserType } from './Types';
@@ -12,16 +10,56 @@ import Icon from './Icon';
 import UploadButton from './UploadButton';
 import Avatar from './Avatar';
 
+function ChangeAvatarForm({ visitor }) {
+    const [avatar, setAvatar] = useState('');
+    const [preview, setPreview] = useState();
+    const avatarInput = useRef();
+    let avatarChanged = (newAvatar) => {
+        setAvatar(newAvatar);
+        setPreview('');
+        if (newAvatar) {
+            let reader = new FileReader();
+            reader.onloadend = (preview) => {
+                setPreview(preview.target.result);
+            };
+            reader.readAsDataURL(avatarInput.current.files[0]);
+        }
+    }
+    let previewUser = { ...visitor, uname: '<preview>' };
+    if (preview) {
+        previewUser = { ...visitor, avatar: preview, uname: '<preview>' };
+    }
+    let onSubmitAvatar = (event) => {
+        if (event.preventDefault) {
+            event.preventDefault();
+        }
+        updateAvatar(avatarInput.current.files[0]).then(() => {
+            avatarChanged('');
+            me().then(visitor => {
+                this.props.onChange(visitor);
+            });
+        });
+    }
+    return (
+        <form>
+            <small>Recommendations: PNG, 96x96, &lt;50Kb. Also, JPG and GIF supported.</small>
+            <UploadButton inputRef={avatarInput}
+                value={avatar} onChange={avatarChanged} />
+            <Avatar user={visitor} />
+            <Avatar user={previewUser} />
+            <Button onClick={onSubmitAvatar}>Update</Button>
+        </form>
+    );
+}
+
 export default class Settings extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
             settings: {
-                newAvatar: ''
             },
             me: {}
         };
-        this.avatarinput = React.createRef();
     }
     componentDidMount() {
         me().then(visitor => {
@@ -30,17 +68,7 @@ export default class Settings extends React.Component {
             });
         });
     }
-    onSubmitAvatar = (event) => {
-        if (event.preventDefault) {
-            event.preventDefault();
-        }
-        updateAvatar(this.avatarinput.current.files[0]).then(() => {
-            this.avatarChanged('');
-            me().then(visitor => {
-                this.props.onChange(visitor);
-            });
-        });
-    }
+
     passwordChanged = (event) => {
         let newState = update(this.state, {
             settings: { password: { $set: event.target.value } }
@@ -78,40 +106,14 @@ 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, 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>
-                        <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>
+                    <ChangeAvatarForm visitor={me} />
                 </fieldset>
                 <fieldset>
                     <legend><Icon name="ei-unlock" size="m" />Changing your password</legend>