diff options
Diffstat (limited to 'vnext')
| -rw-r--r-- | vnext/src/App.js | 2 | ||||
| -rw-r--r-- | vnext/src/api/index.js | 6 | ||||
| -rw-r--r-- | vnext/src/components/Settings.js | 58 |
3 files changed, 53 insertions, 13 deletions
diff --git a/vnext/src/App.js b/vnext/src/App.js index 94b2ced5..5c9b3b81 100644 --- a/vnext/src/App.js +++ b/vnext/src/App.js @@ -155,7 +155,7 @@ export default class App extends React.Component { <Discover visitor={user} {...props} /> } /> <Route exact path="/settings" render={(props) => - <Settings visitor={user} {...props} /> + <Settings visitor={user} {...props} onChange={this.auth} /> } /> <Route exact path="/post" render={(props) => <Post visitor={user} {...props} />} /> <Route exact path="/pm" render={(props) => <Contacts visitor={user} {...props} />} /> diff --git a/vnext/src/api/index.js b/vnext/src/api/index.js index ab26a359..9bb9d5a3 100644 --- a/vnext/src/api/index.js +++ b/vnext/src/api/index.js @@ -76,6 +76,12 @@ export function comment(mid, rid, body, attach) { return client.post('/comment', form); } +export function updateAvatar(newAvatar) { + let form = new FormData(); + form.append('avatar', newAvatar); + return client.post('/me/upload', form); +} + function socialLink(network) { return `${apiBaseUrl}/_${network}login?state=${window.location.protocol}//${window.location.host}${window.location.pathname}`; } 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 }; |