aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'vnext/src/components')
-rw-r--r--vnext/src/components/Settings.js90
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, &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>