import React from 'react'; import PropTypes from 'prop-types'; import update from 'immutability-helper'; 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: { newAvatar: '' }, me: {} }; this.avatarinput = React.createRef(); } componentDidMount() { me().then(visitor => { this.setState({ me: visitor }); }); } 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 } } }); this.setState(newState); } onSubmitPassword = (event) => { if (event.preventDefault) { event.preventDefault(); } console.log('password update'); } emailChanged = (event) => { let newState = update(this.state, { me: { activeEmail: { $set: event.target.value } } }); this.setState(newState); console.log('email update'); } disableTelegram = () => { console.log('telegram disable'); } disableFacebook = (event) => { if (event.preventDefault) { event.preventDefault(); } console.log('facebook disable'); } enableFacebook = (event) => { if (event.preventDefault) { event.preventDefault(); } console.log('facebook enable'); } 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

Change password:
(max. length - 16 symbols)

Telegram {me.telegramName ? (
Telegram: {me.telegramName}
) : (

To connect Telegram account: send any text message to @Juick_bot

)}
{me.jids && (
XMPP accounts

Your accounts:

{ me.jids.map(jid =>
) }

{ me.jids && me.jids.length > 1 &&

}

To add new jabber account: send any text message to juick@juick.com

)}
E-mail

Add account:

Your accounts:

{ me.emails ? me.emails.map(email =>
) : '-' }

{ me.emails && me.emails.length > 1 && }
{ me.emails && <> {/** email_off **/}
You can receive notifications to email:
Sent to
{/** /email_off **/}

 

You can post to Juick via e-mail. Send your plain text messages to juick@juick.com. You can attach one photo or video file.

}
Facebook {me.facebookStatus && me.facebookStatus.connected ? ( me.facebookStatus.crosspostEnabled ?
Facebook: Enabled
:
Facebook: Disabled
) : (

Cross-posting to Facebook: Connect to Facebook

)}
Twitter {me.twitterName ?
Twitter: {me.twitterName}
:

Cross-posting to Twitter: Connect to Twitter

}
); } } Settings.propTypes = { visitor: UserType.isRequired, onChange: PropTypes.func.isRequired };