aboutsummaryrefslogtreecommitdiff
path: root/vnext/src
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2018-12-12 12:56:58 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:54 +0300
commit6e9a031a75d383b9d28fc7c391b8b892df19fd64 (patch)
treeec08c54eef3888e513726fddb93a3124cf7d02dc /vnext/src
parent24a4dcbd81e9f4defc8fee30fbeb0967a3db9b32 (diff)
Upload avatar
Diffstat (limited to 'vnext/src')
-rw-r--r--vnext/src/App.js2
-rw-r--r--vnext/src/api/index.js6
-rw-r--r--vnext/src/components/Settings.js58
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, &lt;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, &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>
</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
};