From 820a5033db1a629f62d24fcfec2b2505abcb0b93 Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Mon, 8 Apr 2019 16:11:47 +0300 Subject: ChangeAvatarForm in Settings --- vnext/package.json | 1 - vnext/src/components/Settings.js | 90 ++++++++++++++++++++-------------------- 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: '' }; + if (preview) { + previewUser = { ...visitor, avatar: preview, uname: '' }; + } + let onSubmitAvatar = (event) => { + if (event.preventDefault) { + event.preventDefault(); + } + updateAvatar(avatarInput.current.files[0]).then(() => { + avatarChanged(''); + me().then(visitor => { + this.props.onChange(visitor); + }); + }); + } + return ( +
+ Recommendations: PNG, 96x96, <50Kb. Also, JPG and GIF supported. + + + + + + ); +} + 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: '' }; - if (settings.preview) { - previewUser = { ...this.props.visitor, avatar: settings.preview, uname: '' }; - } return (
Changing your avatar -
- Recommendations: PNG, 96x96, <50Kb. Also, JPG and GIF supported. - - - - - +
Changing your password 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" -- cgit v1.2.3