online/src/app/wechatService/wxConfig/WxConfig.jsx

import React, {Component} from 'react';
import {Input, Spin, Button, Icon, Modal} from 'antd';
import './index.css';
import {UPDATE_WXCONFIG, SHOW_WXCONTENT, DELETE_WXCONFIG, SHOW_WXCONFIG,DELETE_PROJECT,SHOW_PROJECT} from "../../../gql";
import gql from "graphql-tag";
import {Mutation, Query} from "react-apollo";
import {getCookie} from "../../../cookie";

const confirm = Modal.confirm;

class WxConfig extends Component {
    constructor(props) {
        super(props);
        this.state = {
            configs: ['appName', 'appID', 'appSecret', 'enter_url', 'token', 'welcome_words', 'pay_api_key', 'attach', 'mch_id', 'body', 'spbill_create_ip', 'notify_url'],
            configID: props.location.state === undefined ? props.defaultConfigID : props.location.state.configID,
            appName: props.location.state === undefined ? props.defaultAppName : props.location.state.appName,
            projectID: props.location.state === undefined ? props.projectID : props.location.state.projectID,
            userID:props.userID
        }
    }

    componentWillReceiveProps(next) {
        this.setState({
            userID:next.userID,
            configID: next.location.state === undefined ? next.defaultConfigID : next.location.state.configID,
            appName: next.location.state === undefined ? next.defaultAppName : next.location.state.appName,
            projectID: next.location.state === undefined ? next.projectID : next.location.state.projectID,
        });
    }

    render() {
        return (
            <Query query={gql(SHOW_WXCONTENT)} variables={{id: this.state.configID}}>
                {
                    ({loading, error, data}) => {
                        if (loading) {
                            return <Spin style={{marginLeft: 3}}/>
                        }
                        if (error) {
                            return 'error!';
                        }
                        let {history, location, trialcase} = this.props;
                        let {appName, configID, configs,projectID,userID} = this.state;
                        return (
                            <Display
                                configs={configs}
                                userID={userID}
                                projectID={projectID}
                                configID={configID}
                                appName={appName}
                                location={location}
                                history={history}
                                trialcase={trialcase}
                                data={data.wxConfig_by_id}
                            />
                        )
                    }
                }
            </Query>
        )
    }
}

export default WxConfig;

class Display extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userID:props.userID,
            configID: props.configID,
            appName: props.appName,
            projectID:props.projectID,
            mch_id: props.data === null ? '' : props.data.mch_id,
            notify_url: props.data === null ? '' : props.data.notify_url,
            appSecret: props.data === null ? '' : props.data.appSecret,
            appID: props.data === null ? '' : props.data.appID,
            token: props.data === null ? '' : props.data.token,
            spbill_create_ip: props.data === null ? '' : props.data.spbill_create_ip,
            enter_url: props.data === null ? '' : props.data.enter_url,
            pay_api_key: props.data === null ? '' : props.data.pay_api_key,
            body: props.data === null ? '' : props.data.body,
            welcome_words: props.data === null ? '' : props.data.welcome_words,
            attach: props.data === null ? '' : props.data.attach,
        }
    }

    componentWillReceiveProps(next) {
        this.setState({
            userID:next.userID,
            configID: next.configID,
            appName: next.appName,
            projectID:next.projectID,
            mch_id: next.data === null ? '' : next.data.mch_id,
            notify_url: next.data === null ? '' : next.data.notify_url,
            appSecret: next.data === null ? '' : next.data.appSecret,
            appID: next.data === null ? '' : next.data.appID,
            token: next.data === null ? '' : next.data.token,
            spbill_create_ip: next.data === null ? '' : next.data.spbill_create_ip,
            enter_url: next.data === null ? '' : next.data.enter_url,
            pay_api_key: next.data === null ? '' : next.data.pay_api_key,
            body: next.data === null ? '' : next.data.body,
            welcome_words: next.data === null ? '' : next.data.welcome_words,
            attach: next.data === null ? '' : next.data.attach,
        });
    }


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

    render() {
        let {configs} = this.props;
        let {userID,configID, appName,projectID, mch_id, notify_url, appSecret, appID, token, spbill_create_ip, enter_url, pay_api_key, body, welcome_words, attach} = this.state;
        return (
            <div>
                {
                    configs.map(config => (
                        <div key={config} style={{marginBottom: 10}}>
                            <span className='vice-title'>{config}: </span>
                            <Input value={this.state[config]} style={{width: 200}}
                                   onChange={this.switchConfig(config)}/>
                        </div>
                    ))
                }
                {
                    this.props.trialcase ?
                        ""
                        :
                        <div>
                            <UpdateWXConfigButton
                                id={configID}
                                appName={appName}
                                mch_id={mch_id}
                                notify_url={notify_url}
                                appSecret={appSecret}
                                appID={appID}
                                token={token}
                                spbill_create_ip={spbill_create_ip}
                                enter_url={enter_url}
                                pay_api_key={pay_api_key}
                                body={body}
                                welcome_words={welcome_words}
                                attach={attach}
                            />
                            <DeleteWXProjectButton
                                id={configID}
                                userID={userID}
                                projectID={projectID}
                                history={this.props.history}
                            />
                        </div>

                }
            </div>
        )
    }
}

class UpdateWXConfigButton extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        return (
            <Mutation mutation={gql(UPDATE_WXCONFIG)}>
                {(update_wxConfig, {loading, error}) => {
                    if (loading)
                        return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
                    if (error)
                        return 'error';
                    let {id, appName, mch_id, notify_url, appSecret, appID, token, spbill_create_ip, enter_url, pay_api_key, body, welcome_words, attach} = this.props;
                    return (
                        <Button type={'primary'} onClick={() => {
                            update_wxConfig({
                                variables: {
                                    id,
                                    appName,
                                    mch_id,
                                    notify_url,
                                    appSecret,
                                    appID,
                                    token,
                                    spbill_create_ip,
                                    enter_url,
                                    pay_api_key,
                                    body,
                                    welcome_words,
                                    attach,
                                    updatedAt: new Date().getTime()
                                }
                            });
                        }}>save</Button>
                    )
                }}
            </Mutation>
        )
    }
}

class DeleteWXProjectButton extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userID: props.userID,
            projectID:props.projectID
        }
    }

    showConfirm = (delete_wx_project,  projectID, userID) => {
        let _this = this;
        confirm({
            title: 'Do you want to delete this config?',
            content: 'It cannot be found back!',
            onOk() {
                delete_wx_project({variables: {id:projectID, user_id: userID}});
                _this.props.history.push({
                    pathname: `/wechat-service/trial-case/index`,
                });
            },
            onCancel() {
            },
        });
    };

    render() {
        let {userID,projectID} = this.state;

        return (
            <Mutation
                mutation={gql(DELETE_PROJECT)}
                refetchQueries={[{query: gql(SHOW_PROJECT), variables: {projectType:'wx',user_id: userID}}]}
            >
                {(delete_wx_project, {loading, error}) => {
                    if (loading)
                        return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
                    if (error)
                        return 'error';
                    return (
                        <Button
                            type={'danger'}
                            onClick={() => {
                                this.showConfirm(delete_wx_project, projectID, userID);
                            }}>delete</Button>
                    )
                }}
            </Mutation>
        )
    }
}