online/src/app/common/deploy/tencent/notificationCard/NotificationCardRender.js

import React, {Component} from 'react';
import {FormattedMessage} from 'react-intl';
import {Input, Tooltip, Icon, Button} from 'antd';
import {graphqlUrl, manageUsers} from "../../../../../config";
import {ADD_NOTIFICATION, UPDATE_NOTIFICATION, UPDATE_PROJECT_ONLY_STATUS} from "../../../../../gql";
import {request} from 'graphql-request'
import {idGen} from "../../../../../func";

const valueToKey = {
    'dingding webhook': 'dingding webhook',
    'notification name': 'requestMethod'
};

const toolTipTitle = {
    'dingding webhook': 'its dingding webhook',
    'notification name': 'its notification name'
};

const youMustFill = {
    'dingding webhook': false,
    'notification name': false
};


class NotificationCardFetch extends Component {
    constructor(props) {
        super(props);
        if(props.notification !== '' && props.notification !== null) {
            let {type, webhook, name} = props.notification;
            this.state = {
                type,
                webhook,
                name
            }
        } else {
            this.state = {
                type: 'dingding',
                webhook: '',
                name: props.defaultName
            }
        }
    }

    componentWillReceiveProps(next) {
        if(next.notification !== '' && next.notification !== null) {
            let {type, webhook, name} = next.notification;
            this.setState({
                type,
                webhook,
                name
            })
        } else {
            this.setState({
                type: 'dingding',
                webhook: '',
                name: next.defaultName
            })
        }
    }

    ok = (id, userID, projectID, notification) => {
        let {type, webhook, name} = this.state;
        let varObj = {
            id,
            user_id: userID,
            type,
            webhook,
            name,
            createdAt: new Date().getTime(),
            updatedAt: ''
        };
        if (notification === '') {
            request(graphqlUrl, ADD_NOTIFICATION, varObj).then(
                data => {
                    if (data.create_notification !== null) {
                        this.setState({
                            showOK: true
                        });
                        // 写回 project
                        request(graphqlUrl, UPDATE_PROJECT_ONLY_STATUS, {
                            id: projectID,
                            updatedAt: new Date().getTime(),
                            projectStatus: 'notificationed'
                        }).then(data => {
                            if (data.update_project !== null)
                                this.props.stepByStep(4);
                        })

                    }
                    setTimeout(() => {
                        this.setState({
                            showOK: false
                        })
                    }, 1500)
                }
            )

        } else {
            let varObj = {
                id: notification.id,
                type,
                webhook,
                name,
                updatedAt: new Date().getTime()
            };
            request(graphqlUrl, UPDATE_NOTIFICATION, varObj).then(
                data => {
                    if (data.update_notification !== null) {
                        this.setState({
                            showOK: true
                        });
                        request(graphqlUrl, UPDATE_PROJECT_ONLY_STATUS, {
                            id: projectID,
                            updatedAt: new Date().getTime(),
                            projectStatus: 'updated'
                        }).then(data => {
                            if (data.update_project !== null)
                                this.props.stepByStep(4);
                        })
                    }
                    setTimeout(() => {
                        this.setState({
                            showOK: false
                        })
                    }, 1500)
                }
            )
        }
    };

    render() {
        return (
            <div>
                <div className='kind'>
                    <p style={{marginBottom: 10}}><b><FormattedMessage id="Ding Talk"/></b></p>
                    <div className='item'>
                        <p style={{marginBottom: 10}}>
                            <span className='item-title'>
                                <span>
                                    {
                                        youMustFill['dingding webhook'] ?
                                            <span style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
                                            :
                                            ''
                                    }
                                    <FormattedMessage id="Web hook"/>
                                    &nbsp;
                                </span>
                                <Tooltip placement="top" title={toolTipTitle['dingding webhook']}>
                                    <Icon type="question-circle"/>
                                </Tooltip>
                            </span>
                            <Input style={{width: 400}} value={this.state.webhook} onChange={(e) => {
                                this.setState({
                                    webhook: e.target.value
                                })
                            }}/>
                        </p>
                        <p style={{marginBottom: 10}}>
                            <span className='item-title'>
                                <span>
                                    {
                                        youMustFill['notification name'] ?
                                            <span style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
                                            :
                                            ''
                                    }
                                    <FormattedMessage id="Notification Name"/>
                                    &nbsp;
                                </span>
                                <Tooltip placement="top" title={toolTipTitle['notification name']}>
                                    <Icon type="question-circle"/>
                                </Tooltip>
                            </span>
                            <Input style={{width: 300}} value={this.state.name} onChange={(e) => {
                                this.setState({
                                    name: e.target.value
                                })
                            }}/></p>
                    </div>
                </div>

                {/*<div className='kind'>*/}
                {/*<p><b>QQ</b></p>*/}
                {/*<div className='item'>*/}
                {/*<p>*/}
                {/*<span className='item-title'>*/}
                {/*<span>Web hook  </span>*/}
                {/*<Tooltip placement="top" title='hahahha'>*/}
                {/*<Icon type="question-circle"/>*/}
                {/*</Tooltip>*/}
                {/*</span>*/}
                {/*<Input style={{width: 600}}/>*/}
                {/*</p>*/}
                {/*<p>*/}
                {/*<span className='item-title'>*/}
                {/*<span>Notification Name  </span>*/}
                {/*<Tooltip placement="top" title='heheheheh'>*/}
                {/*<Icon type="question-circle"/>*/}
                {/*</Tooltip>*/}
                {/*</span>*/}
                {/*<Input style={{width: 300}}/></p>*/}
                {/*</div>*/}
                {/*</div>*/}

                <div>
                    {
                        manageUsers.includes(this.props.userID) ?
                            <Button type="primary" onClick={() => {
                                const id = idGen('notification');
                                this.ok(id, this.props.userID, this.props.projectID, this.props.notification);
                            }}><FormattedMessage id="save"/></Button>
                            :
                            this.props.trialcase ?
                                ''
                                :
                                <Button type="primary" onClick={() => {
                                    const id = idGen('notification');
                                    this.ok(id, this.props.userID, this.props.projectID, this.props.notification);
                                }}><FormattedMessage id="save"/></Button>
                    }
                </div>
            </div>
        )

    }
}

export default NotificationCardFetch;