online/src/login/AccountConfig.js

import React, {Component} from 'react';
import {FormattedMessage} from 'react-intl';
import {Icon, Row, Col, Input, Button, Spin} from 'antd';
import './index.css'
import avatar from '../images/avatar.jpg';
import classnames from 'classnames';
import {Mutation, Query} from "react-apollo";
import {GET_USER, UPDATE_USER} from "../gql";
import gql from "graphql-tag";
import {getCookie} from "../cookie";

class AccountConfig extends Component {
    constructor(props) {
        super(props);
        this.state = {
            overNickname: false,
            editNickname: false,
            overTelephone: false,
            editTelephone: false,
            overEmail: false,
            editEmail: false,
            userID: ''
        };

    }

    componentWillMount() {
        this.setState({
            userID: getCookie('user_id')
        })
    }

    cancelEdit = (kind) => {
        let key = `edit${kind[0].toUpperCase()}${kind.slice(1)}`;
        this.setState({
            [key]: false
        })
    };

    render() {
        let {userID} = this.state;
        return (
            <Query query={gql(GET_USER)} variables={{id: userID}}>
                {
                    ({loading, error, data}) => {
                        if (loading) {
                            return <Spin style={{marginLeft: 3}}/>
                        }
                        if (error) {
                            return 'error!';
                        }
                        if (data.user_by_id === null) {
                            return (
                                <Row style={{marginTop: 100}}>
                                    <Col span={12} offset={6} className={'login-wrapper'}>
                                        <Row>
                                            <Col span={4} offset={20}>
                                                <div className="back-to-login" onClick={() => {
                                                    this.props.history.push({
                                                        pathname: '/login',
                                                    })
                                                }}>
                                                    <FormattedMessage id="login"/> <Icon type="right"
                                                                                         style={{color: '#848fa6'}}/>
                                                </div>
                                            </Col>
                                        </Row>
                                        <div className={'no-login-tip'}>
                                            <span>你还没有登录</span>
                                        </div>
                                    </Col>
                                </Row>
                            )
                        } else {
                            return (
                                <div>
                                    <Row style={{marginTop: 100}}>
                                        <Col span={12} offset={6} className={'login-wrapper'}>
                                            <div className={'mask'} style={{backgroundImage: `url(${avatar})`}}>
                                                <div className={'mask-black'}>
                                                    <div className={'tip'}>
                                                        <Icon style={{fontSize: 30, display: 'block'}} type="camera"/>
                                                        <span style={{paddingTop: 5, display: 'block'}}
                                                              className={'tip-span'}><FormattedMessage
                                                            id="modify avatar"/></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <Row>
                                                <Col span={20} offset={4} className={'message-wrapper'}>
                                                    <Row>
                                                        <Col span={20}>
                                                            {
                                                                this.state.editNickname ?
                                                                    <EditNickname cancelEdit={this.cancelEdit}
                                                                                  userID={userID}
                                                                                  data={data.user_by_id}/>
                                                                    :
                                                                    <div className={'nickname'} onMouseOver={() => {
                                                                        this.setState({overNickname: true})
                                                                    }} onMouseLeave={() => {
                                                                        this.setState({overNickname: false})
                                                                    }}>
                                                                        {
                                                                            data.user_by_id.nickname || 'please input'
                                                                        }
                                                                        {
                                                                            this.state.overNickname ?
                                                                                <span style={{
                                                                                    paddingLeft: '5px',
                                                                                    paddingRight: '5px'
                                                                                }}
                                                                                      onClick={() => {
                                                                                          this.setState({
                                                                                              editNickname: true,
                                                                                              overNickname: false
                                                                                          })
                                                                                      }}>
                                                                <Icon style={{fontSize: '18px'}} type="edit"
                                                                      theme="twoTone"/>
                                                                <span className={'modify'}> <FormattedMessage
                                                                    id="modify"/></span></span>
                                                                                :
                                                                                ''
                                                                        }
                                                                    </div>
                                                            }
                                                        </Col>
                                                        <Col span={4}>
                                                            <div className="back-to-login" onClick={() => {
                                                                this.props.history.push({
                                                                    pathname: '/login',
                                                                })
                                                            }}>
                                                                <FormattedMessage id="login"/> <Icon type="right"
                                                                                                     style={{color: '#848fa6'}}/>
                                                            </div>
                                                        </Col>
                                                    </Row>

                                                    <Row className={'message'}>
                                                        <Col span={5}>
                                                    <span className={'message-title'}><FormattedMessage
                                                        id="tel"/></span>
                                                        </Col>
                                                        <Col span={19}>
                                                            {
                                                                this.state.editTelephone ?
                                                                    <Edit kind={'telephone'} cancelEdit={this.cancelEdit} userID={userID} data={data.user_by_id}/>
                                                                    :
                                                                    <div className={'message-content'}
                                                                         onMouseOver={() => {
                                                                             this.setState({overTelephone: true})
                                                                         }} onMouseLeave={() => {
                                                                        this.setState({overTelephone: false})
                                                                    }}>
                                                                        {
                                                                            data.user_by_id.telephone || 'please input'
                                                                        }

                                                                        {
                                                                            this.state.overTelephone ?
                                                                                <span style={{
                                                                                    paddingLeft: '5px',
                                                                                    paddingRight: '5px'
                                                                                }}
                                                                                      onClick={() => {
                                                                                          this.setState({
                                                                                              editTelephone: true,
                                                                                              overTelephone: false
                                                                                          })
                                                                                      }}>
                                                                <Icon style={{fontSize: '18px'}} type="edit"
                                                                      theme="twoTone"/>
                                                                <span className={'modify'}> <FormattedMessage
                                                                    id="modify"/></span></span>
                                                                                :
                                                                                ''
                                                                        }
                                                                    </div>
                                                            }
                                                        </Col>
                                                    </Row>

                                                    <Row className={'message'}>
                                                        <Col span={5}>
                                                            <span className={'message-title'}><FormattedMessage
                                                                id="email"/></span>
                                                        </Col>

                                                        <Col span={19}>

                                                            {
                                                                this.state.editEmail ?
                                                                    <Edit kind={'email'} cancelEdit={this.cancelEdit} userID={userID} data={data.user_by_id}/>
                                                                    :
                                                                    <div className={'message-content'}
                                                                         onMouseOver={() => {
                                                                             this.setState({overEmail: true})
                                                                         }} onMouseLeave={() => {
                                                                        this.setState({overEmail: false})
                                                                    }}>
                                                                        {
                                                                            data.user_by_id.email || 'please input'
                                                                        }
                                                                        {
                                                                            this.state.overEmail ?
                                                                                <span style={{
                                                                                    paddingLeft: '5px',
                                                                                    paddingRight: '5px'
                                                                                }}
                                                                                      onClick={() => {
                                                                                          this.setState({
                                                                                              editEmail: true,
                                                                                              overEmail: false
                                                                                          })
                                                                                      }}>
                                                                <Icon style={{fontSize: '18px'}} type="edit"
                                                                      theme="twoTone"/>
                                                                <span className={'modify'}> <FormattedMessage
                                                                    id="modify"/></span>
                                                            </span>
                                                                                :
                                                                                ''
                                                                        }
                                                                    </div>
                                                            }
                                                        </Col>
                                                    </Row>
                                                </Col>
                                            </Row>
                                        </Col>
                                    </Row>
                                </div>
                            )
                        }

                    }
                }
            </Query>
        )
    }
}

export default AccountConfig;

class EditNickname extends Component {
    constructor(props) {
        super(props);
        this.state = {
            nickname: this.props.data.nickname
        }
    }

    componentWillReceiveProps(next) {
        this.setState({
            nickname: next.data.nickname
        });
    }

    render() {
        let {email, telephone, openid, avatar} = this.props.data;

        return (
            <Mutation
                mutation={gql(UPDATE_USER)}
                onCompleted={(data) => this.props.cancelEdit('nickname')}
            >

                {(update_schema, {loading, error}) => {
                    if (loading)
                        return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
                    if (error)
                        return 'error';
                    let varObj = {
                        id: this.props.userID,
                        email,
                        updatedAt: new Date().getTime(),
                        telephone,
                        openid,
                        avatar,
                        nickname: this.state.nickname
                    };
                    return (
                        <Row className={'message-top'}>
                            <Col span={5}>
                                <span className={'message-title message-title-high'}><FormattedMessage
                                    id="nickname"/></span>
                            </Col>
                            <Col span={19}>
                                <span className={'message-content'}>
                                    <Input onChange={(e) => {
                                        this.setState({nickname: e.target.value})
                                    }} value={this.state.nickname}/>
                                    <Button type={'primary'} onClick={() => {
                                        update_schema({variables: varObj});
                                    }}><FormattedMessage id="save"/></Button>
                                    <Button onClick={() => this.props.cancelEdit('nickname')}><FormattedMessage
                                        id="cancel"/></Button>
                                </span>
                            </Col>
                        </Row>
                    )
                }}
            </Mutation>

        )
    }
}

class Edit extends Component {
    constructor(props) {
        super(props);
        this.state = {
            telephone: props.data.telephone,
            email: props.data.email,
            avatar: props.data.avatar,
        }
    }

    componentWillReceiveProps(next) {
        this.setState({
            telephone: next.data.telephone,
            email: next.data.email,
            avatar: next.data.avatar,
        });
    }

    render() {
        let {kind} = this.props;

        return (
            <Mutation
                mutation={gql(UPDATE_USER)}
                onCompleted={(data) => this.props.cancelEdit(kind)}
            >
                {(update_schema, {loading, error}) => {
                    if (loading)
                        return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
                    if (error)
                        return 'error';
                    let {email, telephone, openid, avatar, nickname} = this.props.data;

                    let varObj = {
                        id: this.props.userID,
                        email,
                        updatedAt: new Date().getTime(),
                        telephone,
                        openid,
                        avatar,
                        nickname
                    };
                    return (
                        <span className={'message-content'}>
                            <Input onChange={(e) => {
                                this.setState({[kind]: e.target.value})
                            }} value={this.state[kind]}/>
                            <Button type={'primary'} onClick={() => {
                                update_schema({variables: {...varObj, [kind]:this.state[kind]}});
                            }}><FormattedMessage id="save"/></Button>
                            <Button onClick={() => this.props.cancelEdit(kind)}><FormattedMessage id="cancel"/></Button>
                        </span>
                    )
                }}
            </Mutation>
        )
    }
}