diff options
Diffstat (limited to 'vnext')
| -rw-r--r-- | vnext/package.json | 1 | ||||
| -rw-r--r-- | vnext/src/components/Settings.js | 90 | ||||
| -rw-r--r-- | vnext/yarn.lock | 7 |
3 files changed, 46 insertions, 52 deletions
diff --git a/vnext/package.json b/vnext/package.json index bb02c0e3..0792d29a 100644 --- a/vnext/package.json +++ b/vnext/package.json @@ -79,7 +79,6 @@ "dependencies": { "axios": "^0.18.0", "core-js": "^3.0.1", - "immutability-helper": "^3.0.0", "moment": "^2.24.0", "qs": "^6.7.0", "react": "16.8.6", 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, <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> diff --git a/vnext/yarn.lock b/vnext/yarn.lock index a45720cc..e72bcefa 100644 --- a/vnext/yarn.lock +++ b/vnext/yarn.lock @@ -4884,13 +4884,6 @@ immer@1.10.0: resolved "https://registry.yarnpkg.com/immer/-/immer-1.10.0.tgz#bad67605ba9c810275d91e1c2a47d4582e98286d" integrity sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg== -immutability-helper@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/immutability-helper/-/immutability-helper-3.0.0.tgz#a74e989c60e2ddab85a6abeed8078981b2d13271" - integrity sha512-Ww7oOSnBIRb9ihT9UH9eHz0uhie0rw9bpqGYCb7qD5VpsdOLv+fx/KCRgHqvX/13LgSM5sDfsLpeSIM6kodUxQ== - dependencies: - invariant "^2.2.4" - import-cwd@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9" |