online/src/app/graphqlService/component/generateJs/GenerateJs.jsx

import React, {Component} from 'react';
import {FormattedMessage} from 'react-intl';
import axios from 'axios';
import {BackTop, Tabs, Button, Spin, Alert} from 'antd';
import saveAs from 'file-saver';
import beautify from 'js-beautify';
import {genJsUrl} from '../../../../config';

import './index.css';

const TabPane = Tabs.TabPane;
axios.defaults.withCredentials = true;

class GenerateJs extends Component {
    constructor(props) {
        super(props);
        this.state = {
            schemaID:props.schemaID,
            schemaName:props.schemaName,
            graphqlJs:'',
            show: false
        };
    }

    componentDidMount() {
        this._isMounted = true;
        let _this = this;
        let {schemaID} = this.state;
        axios.get(`${genJsUrl}?schema=${schemaID}`)
            .then((res) => {
                if(this._isMounted){
                    if (res.data !== '') {
                        // console.log('js res', res.data);
                        let graphqlJs = beautify(res.data, { indent_size: 2, space_in_empty_paren: true });
                        // console.log('beautify graphqlJs',graphqlJs);
                        _this.setState({
                            graphqlJs,
                            show: true
                        });
                    } else {
                        _this.setState({
                            show: true
                        })
                    }
                }
            })
            .catch((err) => {
                console.log(err);
            });
    }

    componentWillReceiveProps(next) {
        this.setState({
            schemaID: next.schemaID,
        });
    }

    componentDidUpdate() {
        this._isMounted = true;
        let _this = this;
        let {schemaID} = this.state;
        // axios.get(`${genJsUrl}?schema=${'schema_1544405636137_14283164'}`)
        axios.get(`${genJsUrl}?schema=${schemaID}`)
            .then((res) => {
                if(this._isMounted){
                    if (res.data !== '') {
                        // console.log('js res', res.data);
                        let graphqlJs = beautify(res.data, { indent_size: 2, space_in_empty_paren: true });
                        // console.log('beautify graphqlJs',graphqlJs);
                        _this.setState({
                            graphqlJs,
                            show: true
                        });
                    } else {
                        _this.setState({
                            show: true
                        })
                    }
                }
            })
            .catch((err) => {
                console.log(err);
            });
    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    saveFile =()=>{
        let {schemaName,graphqlJs} = this.state;
        let blob = new Blob([graphqlJs], {type: "text/plain;charset=utf-8"});
        saveAs(blob, `${schemaName}_graphql.js`);
    };

    render() {
        let {graphqlJs} = this.state;
        let queryList = [];
        let mutationList = [];
        let graphqlJsList = beautify(graphqlJs, { indent_size: 2, space_in_empty_paren: true });
        // console.log('beautify graphqlJs',graphqlJsList);
        graphqlJsList.split("}\n}\n").forEach((item) => {
            if (item.indexOf('query')>-1) queryList.push(item+"}\n}\n");
            else mutationList.push(item+"}\n}\n");
        });
        // console.log('queryList',queryList);
        // console.log('mutationList',mutationList);
        return (
            <div>
                {/*<Alert message="online 数据库，非开发环境请移除"*/}
                       {/*type="warning" banner closable style={{marginBottom: 10}}/>*/}
                <Tabs
                    defaultActiveKey="query"
                    tabPosition="left"
                >
                    <TabPane tab="Query" key="query">
                        <div className='download-button'>
                            <Button type="primary" style={{float:'right'}} onClick={()=>this.saveFile()}>
                                <FormattedMessage id="Download"/>
                            </Button>
                        </div>
                        <br/>
                        {this.state.show ?
                            <GraphqlJs graphqlList={queryList}/>
                            :
                            <Loading/>
                        }
                    </TabPane>

                    <TabPane tab="Mutation" key="mutation">
                        <div className='download-button'>
                            <Button type="primary" style={{float:'right'}} onClick={()=>this.saveFile()}>
                                <FormattedMessage id="Download"/>
                            </Button>
                        </div>
                        <br/>
                        {this.state.show ?
                            <GraphqlJs graphqlList={mutationList}/>
                            :
                            <Loading/>
                        }
                    </TabPane>
                </Tabs>
                <div>
                    <BackTop />
                </div>
            </div>
        )
    }
}

export default GenerateJs;

const GraphqlJs = (props) => {
    return (
        <div>
            <pre>
                <code>
                    {props.graphqlList}
                </code>
            </pre>
        </div>
    );
};

const Loading =() => {
    return (
        <div style={{width: '100%', height: window.innerHeight - 164}}>
            <Spin
                tip={'loading...'}
                style={{
                    position: 'relative',
                    top: '50%',
                    left: '50%',
                    transform: 'translate(-50%,-50%)'
                }}/>
        </div>
    );
};