online/src/components/login/Config.js

import React, {Component} from 'react';
import {Button, Input, Spin, Icon} from 'antd';

import {SHOW_CLOUD, ADD_CLOUD, UPDATE_CLOUD} from "../gql";
import {request} from 'graphql-request'

const idGen = (kind) => {
    return kind + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
};

class Config extends Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false,
            showOK: '',
            showNotOK: '',
            tencentCLoudID: '',
            tenID: '',
            tenKey: '',
            aliyunCLoudID: '',
            aliID: '',
            aliKey: '',
            awsCLoudID: '',
            awsID: '',
            awsKey: '',
        };
        request('http://123.206.193.98:3000/graphql', SHOW_CLOUD, {user_id: props.userID}).then(
            data => {
                let tencent = data.cloud_by_props.find(cloud => cloud.cloudName === 'tencent');
                let aliyun = data.cloud_by_props.find(cloud => cloud.cloudName === 'aliyun');
                let amazon = data.cloud_by_props.find(cloud => cloud.cloudName === 'amazon');
                this.setState({
                    show: true,
                    tencentCLoudID: tencent ? tencent.id : '',
                    tenID: tencent ? tencent.secretId : '',
                    tenKey: tencent ? tencent.secretKey : '',
                    aliyunCLoudID: aliyun ? aliyun.id : '',
                    aliID: aliyun ? aliyun.secretId : '',
                    aliKey: aliyun ? aliyun.secretKey : '',
                    awsCLoudID: amazon ? amazon.id : '',
                    awsID: amazon ? amazon.secretId : '',
                    awsKey: amazon ? amazon.secretKey : ''
                });
            }
        );
    }


    inputChange = (kind) => {
        return (e) => {
            this.setState({
                [kind]: e.target.value
            })
        }
    };

    submit = (id, cloudName, secretId, secretKey) => {
        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 !== null) {
                            this.setState({
                                showOK: cloudName
                            });
                            setTimeout(()=>{
                                this.setState({
                                    showOK: ''
                                });
                            }, 1500)
                        } else {
                            this.setState({
                                showNotOK: cloudName
                            });
                            setTimeout(()=>{
                                this.setState({
                                    showNotOK: ''
                                });
                            }, 1500)
                        }
                    }
                );
            }
        }
    };

    render() {
        return (
            this.state.show ?
                <div>
                    <div>
                        <span className='cloud-name'>Tencent: </span>
                        <div style={{marginBottom: 15}}>
                            <div>
                                <div>
                                    ID: <Input style={{width: 250}} value={this.state.tenID}
                                               onChange={this.inputChange('tenID')}/>
                                </div>
                                <div>
                                    Key: <Input style={{width: 250}} value={this.state.tenKey}
                                                onChange={this.inputChange('tenKey')}/>
                                </div>
                                {
                                    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>
                    </div>
                    <div>
                        <span className='cloud-name'>Aliyun: </span>
                        <div style={{marginBottom: 15}}>
                            <div>
                                <div>
                                    ID: <Input style={{width: 250}} value={this.state.aliID}
                                               onChange={this.inputChange('aliID')}/>
                                </div>
                                <div>
                                    Key: <Input style={{width: 250}} value={this.state.aliKey}
                                                onChange={this.inputChange('aliKey')}/>
                                </div>
                                {
                                    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>
                    </div>
                    <div>
                        <span className='cloud-name'>AWS: </span>
                        <div style={{marginBottom: 15}}>
                            <div>
                                <div>
                                    ID: <Input style={{width: 250}} value={this.state.awsID}
                                               onChange={this.inputChange('awsID')}/>
                                </div>
                                <div>
                                    Key: <Input style={{width: 250}} value={this.state.awsKey}
                                                onChange={this.inputChange('awsKey')}/>
                                </div>
                                {
                                    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>
                    </div>
                </div>
                :
                <Spin style={{marginLeft: 3}}/>
        )
    }
}

export default Config;