config页面 完成

src/components/common/config/Config.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Button, Input, Spin} from 'antd';
+import {Button, Input, Spin, Icon} from 'antd';
 
 import {SHOW_CLOUD, ADD_CLOUD, UPDATE_CLOUD} from "../../gql";
 import {request} from 'graphql-request'
@@ -18,6 +18,8 @@ class Config extends Component {
         super(props);
         this.state = {
             show: false,
+            showOK: '',
+            showNotOK: '',
             tencentCLoudID: '',
             tenID: '',
             tenKey: '',
@@ -26,7 +28,7 @@ class Config extends Component {
             aliKey: '',
             awsCLoudID: '',
             awsID: '',
-            awsKey: ''
+            awsKey: '',
         };
         request('http://123.206.193.98:3000/graphql', SHOW_CLOUD, {user_id: props.userID}).then(
             data => {
@@ -59,38 +61,72 @@ class Config extends Component {
     };
 
     submit = (id, cloudName, secretId, secretKey) => {
-        if (id === '') {
-            let varObj = {
-                id: idGen('cloud'),
-                user_id: this.props.userID,
-                appId: '',
-                cloudName,
-                secretId,
-                secretKey,
-                createdAt: new Date().getTime(),
-                updatedAt: ''
-            };
-            request('http://123.206.193.98:3000/graphql', ADD_CLOUD, varObj).then(
-                data => {
-                    // next...
-                    console.log('create');
-                    console.log(data);
-                }
-            );
-        } else {
-            let varObj = {
-                id,
-                secretId,
-                secretKey,
-                updatedAt: new Date().getTime()
-            };
-            request('http://123.206.193.98:3000/graphql', UPDATE_CLOUD, varObj).then(
-                data => {
-                    // next...
-                    console.log('update');
-                    console.log(data);
-                }
-            );
+        return () => {
+            if (id === '') {
+                let varObj = {
+                    id: idGen('cloud'),
+                    user_id: this.props.userID,
+                    appId: '',
+                    cloudName,
+                    secretId,
+                    secretKey,
+                    createdAt: new Date().getTime(),
+                    updatedAt: ''
+                };
+                request('http://123.206.193.98:3000/graphql', ADD_CLOUD, varObj).then(
+                    data => {
+                        if(data.create_cloud.length !== null) {
+                            this.setState({
+                                showOK: cloudName
+                            });
+                            setTimeout(()=>{
+                                this.setState({
+                                    showOK: ''
+                                });
+                            }, 1500)
+                        } else {
+                            this.setState({
+                                showNotOK: cloudName
+                            });
+                            setTimeout(()=>{
+                                this.setState({
+                                    showNotOK: ''
+                                });
+                            }, 1500)
+                        }
+                    }
+                );
+            } else {
+                let varObj = {
+                    id,
+                    secretId,
+                    secretKey,
+                    updatedAt: new Date().getTime()
+                };
+                request('http://123.206.193.98:3000/graphql', UPDATE_CLOUD, varObj).then(
+                    data => {
+                        if(data.update_cloud.length !== null) {
+                            this.setState({
+                                showOK: cloudName
+                            });
+                            setTimeout(()=>{
+                                this.setState({
+                                    showOK: ''
+                                });
+                            }, 1500)
+                        } else {
+                            this.setState({
+                                showNotOK: cloudName
+                            });
+                            setTimeout(()=>{
+                                this.setState({
+                                    showNotOK: ''
+                                });
+                            }, 1500)
+                        }
+                    }
+                );
+            }
         }
     };
 
@@ -106,6 +142,15 @@ class Config extends Component {
                                            onChange={this.inputChange('tenID')}/>
                                 Key: <Input style={{width: 250}} value={this.state.tenKey}
                                             onChange={this.inputChange('tenKey')}/>
+                                {
+                                    this.state.showOK === 'tencent'?
+                                        <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
+                                        :
+                                        this.state.showNotOK === 'tencent'?
+                                            <span>not ok</span>
+                                            :
+                                            ""
+                                }
                             </div>
                             <Button type='primary' onClick={this.submit(this.state.tencentCLoudID ,'tencent', this.state.tenID, this.state.tenKey)}>ok</Button>
                         </div>
@@ -118,6 +163,15 @@ class Config extends Component {
                                            onChange={this.inputChange('aliID')}/>
                                 Key: <Input style={{width: 250}} value={this.state.aliKey}
                                             onChange={this.inputChange('aliKey')}/>
+                                {
+                                    this.state.showOK === 'aliyun'?
+                                        <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
+                                        :
+                                        this.state.showNotOK === 'aliyun'?
+                                            <span>not ok</span>
+                                            :
+                                            ""
+                                }
                             </div>
                             <Button type='primary' onClick={this.submit(this.state.aliyunCLoudID, 'aliyun', this.state.aliID, this.state.aliKey)}>ok</Button>
                         </div>
@@ -130,6 +184,15 @@ class Config extends Component {
                                            onChange={this.inputChange('awsID')}/>
                                 Key: <Input style={{width: 250}} value={this.state.awsKey}
                                             onChange={this.inputChange('awsKey')}/>
+                                {
+                                    this.state.showOK === 'amazon'?
+                                        <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
+                                        :
+                                        this.state.showNotOK === 'amazon'?
+                                            <span>not ok</span>
+                                            :
+                                            ""
+                                }
                             </div>
                             <Button type='primary' onClick={this.submit(this.state.awsCLoudID, 'amazon', this.state.awsID, this.state.awsKey)}>ok</Button>
                         </div>

src/components/login/login.js

@@ -24,10 +24,8 @@ class Login extends Component {
             userID: '',
             hasLogin: false,
             hasRegister: false,
-            user: {
-                nickname: 'its a default nickname',
-                avatar: ''
-            },
+            nickname: 'its a default nickname',
+            avatar: '',
             register_username: '',
             register_password: '',
             login_username: '',
@@ -51,6 +49,15 @@ class Login extends Component {
                     loginStatus: 'logined',
                     loginOnce: false
                 });
+
+                request('http://123.206.193.98:3000/graphql', 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({
@@ -85,7 +92,7 @@ class Login extends Component {
                                     style={{width: 200}}
                                 />
                                 {
-                                    this.state.usernameTip?
+                                    this.state.usernameTip ?
                                         <span><b>username has been used!</b></span>
                                         :
                                         ''
@@ -136,7 +143,7 @@ class Login extends Component {
                                         this.setState({
                                             usernameTip: true
                                         });
-                                        setTimeout(()=>{
+                                        setTimeout(() => {
                                             this.setState({
                                                 usernameTip: false
                                             });
@@ -167,10 +174,8 @@ class Login extends Component {
                         }, () => {
                             request('http://123.206.193.98:3000/graphql', GET_USER, {id: res.data}).then(data => {
                                     this.setState({
-                                        user: {
-                                            avatar: data.user_by_id.avatar,
-                                            nickname: data.user_by_id.nickname
-                                        }
+                                        avatar: data.user_by_id.avatar,
+                                        nickname: data.user_by_id.nickname
                                     })
                                 }
                             )
@@ -217,7 +222,6 @@ class Login extends Component {
                                                     <Input
                                                         placeholder=""
                                                         onChange={(e) => {
-                                                            // antd 获取不到 target，百度来的下面这句代码
                                                             e.persist();
                                                             this.setState({login_password: e.target.value});
                                                         }}
@@ -235,7 +239,7 @@ class Login extends Component {
                                         this.state.loginStatus === 'logined' ?
                                             <div>
                                                 <span
-                                                    style={{marginRight: '10px'}}>welcome, {this.state.user.nickname}</span>
+                                                    style={{marginRight: '10px'}}>welcome, {this.state.nickname}</span>
                                                 <Button onClick={() => {
                                                     this.setState({
                                                         hasLogin: false,
@@ -272,7 +276,6 @@ class Login extends Component {
 
                             </div>
                         }
-
                     </Content>
                 </Layout>
             </div>