diff options
Diffstat (limited to 'vnext/src/components')
-rw-r--r-- | vnext/src/components/Settings.js | 90 |
1 files changed, 46 insertions, 44 deletions
diff --git a/vnext/src/components/Settings.js b/vnext/src/components/Settings.js index 39489aa30..29d1b4b59 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, <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, <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> |