accountConfig

src/login/AccountConfig.js

@@ -1,9 +1,13 @@
 import React, {Component} from 'react';
 import {FormattedMessage} from 'react-intl';
-import {Icon, Row, Col, Input, Button} from 'antd';
+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} from "../gql";
+import gql from "graphql-tag";
+import {getCookie} from "../cookie";
 
 class AccountConfig extends Component {
     constructor(props) {
@@ -14,11 +18,18 @@ class AccountConfig extends Component {
             overTel: false,
             editTel: false,
             overEmail: false,
-            editEmail: false
+            editEmail: false,
+            userID: ''
         };
 
     }
 
+    componentWillMount() {
+        this.setState({
+            userID: getCookie('user_id')
+        })
+    }
+
     cancelEdit = (kind) => {
         let key = `edit${kind[0].toUpperCase()}${kind.slice(1)}`;
         this.setState({
@@ -27,142 +38,198 @@ class AccountConfig extends Component {
     };
 
     render() {
+        let {userID} = this.state;
         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}/>
-                                                :
-                                                <div className={'nickname'} onMouseOver={() => {
-                                                    this.setState({overNickname: true})
-                                                }} onMouseLeave={() => {
-                                                    this.setState({overNickname: false})
+            <Query query={gql(GET_USER)} variables={{id: userID}}>
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return <Spin style={{marginLeft: 3}}/>
+                        }
+                        if (error) {
+                            return 'error!';
+                        }
+                        console.log(data);
+                        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',
+                                                    })
                                                 }}>
-                                                    xxx
-                                                    {
-                                                        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>
-                                                            :
-                                                            ''
-                                                    }
+                                                    <FormattedMessage id="login"/> <Icon type="right" style={{color: '#848fa6'}}/>
                                                 </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'}}/>
+                                            </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}/>
+                                                                    :
+                                                                    <div className={'nickname'} onMouseOver={() => {
+                                                                        this.setState({overNickname: true})
+                                                                    }} onMouseLeave={() => {
+                                                                        this.setState({overNickname: false})
+                                                                    }}>
+                                                                        {
+                                                                            data.user_by_id.nickname || '匿名'
+                                                                        }
+                                                                        {
+                                                                            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.editTel ?
-                                                <Edit kind={'tel'} cancelEdit={this.cancelEdit}/>
-                                                :
-                                                <div className={'message-content'} onMouseOver={() => {
-                                                    this.setState({overTel: true})
-                                                }} onMouseLeave={() => {
-                                                    this.setState({overTel: false})
-                                                }}>
-                                                    110
-                                                    {
-                                                        this.state.overTel ?
-                                                            <span style={{paddingLeft: '5px', paddingRight: '5px'}}
-                                                                  onClick={() => {
-                                                                      this.setState({
-                                                                          editTel: true,
-                                                                          overTel: false
-                                                                      })
-                                                                  }}>
+                                                    <Row className={'message'}>
+                                                        <Col span={5}>
+                                                    <span className={'message-title'}><FormattedMessage
+                                                        id="tel"/></span>
+                                                        </Col>
+                                                        <Col span={19}>
+                                                            {
+                                                                this.state.editTel ?
+                                                                    <Edit kind={'tel'} cancelEdit={this.cancelEdit}/>
+                                                                    :
+                                                                    <div className={'message-content'} onMouseOver={() => {
+                                                                        this.setState({overTel: true})
+                                                                    }} onMouseLeave={() => {
+                                                                        this.setState({overTel: false})
+                                                                    }}>
+                                                                        {
+                                                                            data.user_by_id.telephone || 110
+                                                                        }
+
+                                                                        {
+                                                                            this.state.overTel ?
+                                                                                <span style={{
+                                                                                    paddingLeft: '5px',
+                                                                                    paddingRight: '5px'
+                                                                                }}
+                                                                                      onClick={() => {
+                                                                                          this.setState({
+                                                                                              editTel: true,
+                                                                                              overTel: false
+                                                                                          })
+                                                                                      }}>
                                                                 <Icon style={{fontSize: '18px'}} type="edit"
                                                                       theme="twoTone"/>
-                                                                <span className={'modify'}> <FormattedMessage id="modify"/></span>
+                                                                <span className={'modify'}> <FormattedMessage
+                                                                    id="modify"/></span>
                                                             </span>
-                                                            :
-                                                            ''
-                                                    }
-                                                </div>
-                                        }
-                                    </Col>
-                                </Row>
+                                                                                :
+                                                                                ''
+                                                                        }
+                                                                    </div>
+                                                            }
+                                                        </Col>
+                                                    </Row>
 
-                                <Row className={'message'}>
-                                    <Col span={5}>
-                                        <span className={'message-title'}><FormattedMessage id="email"/></span>
-                                    </Col>
+                                                    <Row className={'message'}>
+                                                        <Col span={5}>
+                                                    <span className={'message-title'}><FormattedMessage
+                                                        id="email"/></span>
+                                                        </Col>
 
-                                    <Col span={19}>
+                                                        <Col span={19}>
 
-                                        {
-                                            this.state.editEmail ?
-                                                <Edit kind={'email'} cancelEdit={this.cancelEdit}/>
-                                                :
-                                                <div className={'message-content'} onMouseOver={() => {
-                                                    this.setState({overEmail: true})
-                                                }} onMouseLeave={() => {
-                                                    this.setState({overEmail: false})
-                                                }}>
-                                                    xxx@ioobot.com
-                                                    {
-                                                        this.state.overEmail ?
-                                                            <span style={{paddingLeft: '5px', paddingRight: '5px'}}
-                                                                  onClick={() => {
-                                                                      this.setState({
-                                                                          editEmail: true,
-                                                                          overEmail: false
-                                                                      })
-                                                                  }}>
+                                                            {
+                                                                this.state.editEmail ?
+                                                                    <Edit kind={'email'} cancelEdit={this.cancelEdit}/>
+                                                                    :
+                                                                    <div className={'message-content'} onMouseOver={() => {
+                                                                        this.setState({overEmail: true})
+                                                                    }} onMouseLeave={() => {
+                                                                        this.setState({overEmail: false})
+                                                                    }}>
+                                                                        {
+                                                                            data.user_by_id.email || 'xxx@ioobot.com'
+                                                                        }
+                                                                        {
+                                                                            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 className={'modify'}> <FormattedMessage
+                                                                    id="modify"/></span>
                                                             </span>
-                                                            :
-                                                            ''
-                                                    }
-                                                </div>
-                                        }
-                                    </Col>
-                                </Row>
-                            </Col>
-                        </Row>
-                    </Col>
-                </Row>
-            </div>
+                                                                                :
+                                                                                ''
+                                                                        }
+                                                                    </div>
+                                                            }
+                                                        </Col>
+                                                    </Row>
+                                                </Col>
+                                            </Row>
+                                        </Col>
+                                    </Row>
+                                </div>
+                            )
+                        }
+
+                    }
+                }
+            </Query>
         )
     }
 }

src/login/LoginInput.js

@@ -42,32 +42,34 @@ class LoginInput extends Component {
         let _this = this;
         // let loginUrl = `http://localhost:8999/login`;
 
-        axios.post(loginUrl, {
-            'user-name': this.state.login_username,
-            password: this.state.login_password
-        })
-            .then((res) => {
-                _this.setState({
-                    userID: res.data,
-                    loginStatus: 'logined',
-                    loginOnce: false
-                });
-                setCookie("user_id", res.data);
-                _this.props.getUserId(res.data);
-                request(graphqlUrl, GET_USER, {id: res.data}).then(data => {
-                        this.setState({
-                            avatar: data.user_by_id.avatar,
-                            nickname: data.user_by_id.nickname
-                        })
-                    }
-                )
+        if (this.state.login_username !== '' && this.state.login_password !== '') {
+            axios.post(loginUrl, {
+                'user-name': this.state.login_username,
+                password: this.state.login_password
             })
-            .catch((err) => {
-                _this.setState({
-                    loginStatus: 'failed',
-                    loginOnce: false
+                .then((res) => {
+                    _this.setState({
+                        userID: res.data,
+                        loginStatus: 'logined',
+                        loginOnce: false
+                    });
+                    setCookie("user_id", res.data);
+                    _this.props.getUserId(res.data);
+                    request(graphqlUrl, GET_USER, {id: res.data}).then(data => {
+                            this.setState({
+                                avatar: data.user_by_id.avatar,
+                                nickname: data.user_by_id.nickname
+                            })
+                        }
+                    )
+                })
+                .catch((err) => {
+                    _this.setState({
+                        loginStatus: 'failed',
+                        loginOnce: false
+                    });
                 });
-            });
+        }
     };
 
     register = () => {
@@ -252,7 +254,8 @@ class LoginInput extends Component {
                         this.state.loginStatus === 'logined' ?
                             <div>
                                                 <span
-                                                    style={{marginRight: '10px'}}><FormattedMessage id="Welcome"/>, {this.state.nickname}</span>
+                                                    style={{marginRight: '10px'}}><FormattedMessage
+                                                    id="Welcome"/>, {this.state.nickname}</span>
                                 <Button onClick={() => {
                                     this.setState({
                                         hasLogin: false,

src/login/index.css

@@ -19,6 +19,7 @@
   border-radius: 2px;
   box-shadow: 0 1px 10px rgba(26,26,26,.1);
   box-sizing: border-box;
+  position: relative;
 }
 
 .message-wrapper {
@@ -114,4 +115,11 @@
   line-height: 36px;
   font-size: 16px;
   padding-right: 50px;
+}
+
+.no-login-tip {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }