accountConfig good

src/gql.js

@@ -6,7 +6,15 @@
 const GET_USER = `
             query USER($id: ID!) {
                 user_by_id(id: $id) {
+                    email
+                    updatedAt
+                    password
+                    telephone
                     nickname
+                    username
+                    createdAt
+                    openid
+                    id
                     avatar
                 }
             }
@@ -15,7 +23,16 @@ const GET_USER = `
 const SEARCH_USER = `
         query USER($username: String) {
                 user_by_props(username: $username) {
+                    email
+                    updatedAt
+                    password
+                    telephone
+                    nickname
                     username
+                    createdAt
+                    openid
+                    id
+                    avatar
                 }
             }
         `;
@@ -49,6 +66,30 @@ const ADD_USER = `
 
         `;
 
+const UPDATE_USER = `
+            mutation USER($email: String, $updatedAt: String, $telephone: String, $nickname: String, $openid: String, $id: ID!, $avatar: String) {
+                update_user(
+                    id: $id
+                    email: $email 
+                    updatedAt: $updatedAt 
+                    telephone: $telephone 
+                    nickname: $nickname 
+                    openid: $openid
+                    avatar: $avatar
+                ) {
+                    email
+                    updatedAt
+                    password
+                    telephone
+                    nickname
+                    username
+                    createdAt
+                    openid
+                    id
+                    avatar
+                }
+            }
+        `;
 
 const SHOW_SCHEMA = `
             query SCHEMA($user_id: ID) {
@@ -562,6 +603,7 @@ export {
     ADD_USER,
     GET_USER,
     SEARCH_USER,
+    UPDATE_USER,
     SEARCH_SCHEMA,
     ADD_SCHEMA,
     SHOW_ALL_SCHEMA,

src/login/AccountConfig.js

@@ -5,7 +5,7 @@ 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 {GET_USER, UPDATE_USER} from "../gql";
 import gql from "graphql-tag";
 import {getCookie} from "../cookie";
 
@@ -15,8 +15,8 @@ class AccountConfig extends Component {
         this.state = {
             overNickname: false,
             editNickname: false,
-            overTel: false,
-            editTel: false,
+            overTelephone: false,
+            editTelephone: false,
             overEmail: false,
             editEmail: false,
             userID: ''
@@ -49,7 +49,6 @@ class AccountConfig extends Component {
                         if (error) {
                             return 'error!';
                         }
-                        console.log(data);
                         if (data.user_by_id === null) {
                             return (
                                 <Row style={{marginTop: 100}}>
@@ -61,7 +60,8 @@ class AccountConfig extends Component {
                                                         pathname: '/login',
                                                     })
                                                 }}>
-                                                    <FormattedMessage id="login"/> <Icon type="right" style={{color: '#848fa6'}}/>
+                                                    <FormattedMessage id="login"/> <Icon type="right"
+                                                                                         style={{color: '#848fa6'}}/>
                                                 </div>
                                             </Col>
                                         </Row>
@@ -80,7 +80,9 @@ class AccountConfig extends Component {
                                                 <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>
+                                                        <span style={{paddingTop: 5, display: 'block'}}
+                                                              className={'tip-span'}><FormattedMessage
+                                                            id="modify avatar"/></span>
                                                     </div>
                                                 </div>
                                             </div>
@@ -90,7 +92,9 @@ class AccountConfig extends Component {
                                                         <Col span={20}>
                                                             {
                                                                 this.state.editNickname ?
-                                                                    <EditNickname cancelEdit={this.cancelEdit}/>
+                                                                    <EditNickname cancelEdit={this.cancelEdit}
+                                                                                  userID={userID}
+                                                                                  data={data.user_by_id}/>
                                                                     :
                                                                     <div className={'nickname'} onMouseOver={() => {
                                                                         this.setState({overNickname: true})
@@ -98,7 +102,7 @@ class AccountConfig extends Component {
                                                                         this.setState({overNickname: false})
                                                                     }}>
                                                                         {
-                                                                            data.user_by_id.nickname || '匿名'
+                                                                            data.user_by_id.nickname || 'please input'
                                                                         }
                                                                         {
                                                                             this.state.overNickname ?
@@ -112,8 +116,10 @@ class AccountConfig extends Component {
                                                                                               overNickname: false
                                                                                           })
                                                                                       }}>
-                                                                <Icon style={{fontSize: '18px'}} type="edit" theme="twoTone"/>
-                                                                <span className={'modify'}> <FormattedMessage id="modify"/></span></span>
+                                                                <Icon style={{fontSize: '18px'}} type="edit"
+                                                                      theme="twoTone"/>
+                                                                <span className={'modify'}> <FormattedMessage
+                                                                    id="modify"/></span></span>
                                                                                 :
                                                                                 ''
                                                                         }
@@ -126,7 +132,8 @@ class AccountConfig extends Component {
                                                                     pathname: '/login',
                                                                 })
                                                             }}>
-                                                                <FormattedMessage id="login"/> <Icon type="right" style={{color: '#848fa6'}}/>
+                                                                <FormattedMessage id="login"/> <Icon type="right"
+                                                                                                     style={{color: '#848fa6'}}/>
                                                             </div>
                                                         </Col>
                                                     </Row>
@@ -138,35 +145,35 @@ class AccountConfig extends Component {
                                                         </Col>
                                                         <Col span={19}>
                                                             {
-                                                                this.state.editTel ?
-                                                                    <Edit kind={'tel'} cancelEdit={this.cancelEdit}/>
+                                                                this.state.editTelephone ?
+                                                                    <Edit kind={'telephone'} cancelEdit={this.cancelEdit} userID={userID} data={data.user_by_id}/>
                                                                     :
-                                                                    <div className={'message-content'} onMouseOver={() => {
-                                                                        this.setState({overTel: true})
-                                                                    }} onMouseLeave={() => {
-                                                                        this.setState({overTel: false})
+                                                                    <div className={'message-content'}
+                                                                         onMouseOver={() => {
+                                                                             this.setState({overTelephone: true})
+                                                                         }} onMouseLeave={() => {
+                                                                        this.setState({overTelephone: false})
                                                                     }}>
                                                                         {
-                                                                            data.user_by_id.telephone || 110
+                                                                            data.user_by_id.telephone || 'please input'
                                                                         }
 
                                                                         {
-                                                                            this.state.overTel ?
+                                                                            this.state.overTelephone ?
                                                                                 <span style={{
                                                                                     paddingLeft: '5px',
                                                                                     paddingRight: '5px'
                                                                                 }}
                                                                                       onClick={() => {
                                                                                           this.setState({
-                                                                                              editTel: true,
-                                                                                              overTel: false
+                                                                                              editTelephone: true,
+                                                                                              overTelephone: false
                                                                                           })
                                                                                       }}>
                                                                 <Icon style={{fontSize: '18px'}} type="edit"
                                                                       theme="twoTone"/>
                                                                 <span className={'modify'}> <FormattedMessage
-                                                                    id="modify"/></span>
-                                                            </span>
+                                                                    id="modify"/></span></span>
                                                                                 :
                                                                                 ''
                                                                         }
@@ -177,23 +184,24 @@ class AccountConfig extends Component {
 
                                                     <Row className={'message'}>
                                                         <Col span={5}>
-                                                    <span className={'message-title'}><FormattedMessage
-                                                        id="email"/></span>
+                                                            <span className={'message-title'}><FormattedMessage
+                                                                id="email"/></span>
                                                         </Col>
 
                                                         <Col span={19}>
 
                                                             {
                                                                 this.state.editEmail ?
-                                                                    <Edit kind={'email'} cancelEdit={this.cancelEdit}/>
+                                                                    <Edit kind={'email'} cancelEdit={this.cancelEdit} userID={userID} data={data.user_by_id}/>
                                                                     :
-                                                                    <div className={'message-content'} onMouseOver={() => {
-                                                                        this.setState({overEmail: true})
-                                                                    }} onMouseLeave={() => {
+                                                                    <div className={'message-content'}
+                                                                         onMouseOver={() => {
+                                                                             this.setState({overEmail: true})
+                                                                         }} onMouseLeave={() => {
                                                                         this.setState({overEmail: false})
                                                                     }}>
                                                                         {
-                                                                            data.user_by_id.email || 'xxx@ioobot.com'
+                                                                            data.user_by_id.email || 'please input'
                                                                         }
                                                                         {
                                                                             this.state.overEmail ?
@@ -239,23 +247,63 @@ export default AccountConfig;
 class EditNickname extends Component {
     constructor(props) {
         super(props);
-        this.state = {}
+        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 (
-            <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/>
-                        <Button type={'primary'}><FormattedMessage id="save"/></Button>
-                        <Button onClick={() => this.props.cancelEdit('nickname')}><FormattedMessage id="cancel"/></Button>
-                    </span>
-                </Col>
-            </Row>
+            <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>
+
         )
     }
 }
@@ -263,16 +311,58 @@ class EditNickname extends Component {
 class Edit extends Component {
     constructor(props) {
         super(props);
-        this.state = {}
+        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 (
-            <span className={'message-content'}>
-                <Input/>
-                <Button type={'primary'}><FormattedMessage id="save"/></Button>
-                <Button onClick={() => this.props.cancelEdit(this.props.kind)}><FormattedMessage id="cancel"/></Button>
-            </span>
+            <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>
         )
     }
 }