diff options
author | 2018-12-12 12:56:58 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:54 +0300 | |
commit | 6e9a031a75d383b9d28fc7c391b8b892df19fd64 (patch) | |
tree | ec08c54eef3888e513726fddb93a3124cf7d02dc /vnext/src/components/Settings.js | |
parent | 24a4dcbd81e9f4defc8fee30fbeb0967a3db9b32 (diff) |
Upload avatar
Diffstat (limited to 'vnext/src/components/Settings.js')
-rw-r--r-- | vnext/src/components/Settings.js | 58 |
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, <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, <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 }; |