online/src/components/common/schema/Schema.jsx

import React, {Component} from 'react';

import {Row, Col, Input, Icon, Button, Spin} from 'antd';
import './index.css';
import SchemaChange from './change/SchemaChange';
import {Mutation, Query} from "react-apollo";
import {SHOW_SCHEMA, ADD_SCHEMA, DELETE_SCHEMA, SHOW_TABLE} from './gql'

const Search = Input.Search;

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


class Schema extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentSchema: '',
            currentTable: '',
            schemaID: '',
            userID: 'xy_1'
        };
    }

    findColumns = data => this.state.currentTable === '' ? [] : data.find(table => table.name === this.state.currentTable) ? data.find(table => table.name === this.state.currentTable).cols : [];

    findRemark = data => this.state.currentTable === '' ? '' : data.find(table => table.name === this.state.currentTable) ? data.find(table => table.name === this.state.currentTable).remark : '';

    switchSchema = (name, id) => {
        this.setState({
            currentSchema: name,
            schemaID: id
        });
    };

    switchTable = (table) => {
        this.setState({
            currentTable: table
        })
    };

    render() {
        return (
            <div>
                <Row>
                    <Col span={6}>
                        <div className='wrapper'>
                            <div className='current'>{this.state.currentSchema}</div>
                            <AddSchemaInput userID={this.state.userID}/>
                        </div>
                        <ShowSchemaList
                            userID={this.state.userID}
                            switchTable={this.switchTable}
                            switchSchema={this.switchSchema}
                        />
                    </Col>

                    <Col span={17} offset={1}>
                        {
                            this.state.currentTable === 'add' ?
                                <SchemaChange
                                    currentSchema={this.state.currentSchema}
                                    currentTableIndex={-2}
                                    columns={[]}
                                    remark=''
                                    userID={this.state.userID}
                                    schemaID={this.state.schemaID}
                                /> :
                                <Query query={SHOW_TABLE}
                                       variables={{schema_id: this.state.schemaID}}>
                                    {
                                        ({loading, error, data}) => {
                                            if (loading)
                                                return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
                                            if (error)
                                                return 'error';
                                            if (data.schema_by_id === null) data = [];
                                            else data = JSON.parse(data.schema_by_id.schemaData);
                                            return (
                                                <SchemaChange
                                                    currentSchema={this.state.currentSchema}
                                                    currentTable={this.state.currentTable}
                                                    currentTableIndex={this.state.currentTable === '' ? -2 : data.findIndex(obj => obj.name === this.state.currentTable)}
                                                    columns={this.findColumns(data)}
                                                    remark={this.findRemark(data)}
                                                    schemaID={this.state.schemaID}
                                                    userID={this.state.userID}
                                                />
                                            )
                                        }
                                    }
                                </Query>
                        }
                    </Col>
                </Row>
            </div>
        )
    }
}

export default Schema;

class AddSchemaInput extends Component {

    render() {
        let userID = this.props.userID;

        let varobj = {
            id: idGen('schema'),
            user_id: userID,
            createdAt: new Date().getTime(),
            updatedAt: '',
            schemaState: 'create',
            schemaData: JSON.stringify([])
        };


        return (
            <Mutation
                mutation={ADD_SCHEMA}
                update={(cache, {data: {create_schema}}) => {
                    let data = cache.readQuery({query: SHOW_SCHEMA, variables: {user_id: userID}});
                    data.schema_by_props.push(create_schema);
                    cache.writeQuery({
                        query: SHOW_SCHEMA,
                        variables: {user_id: userID},
                        data
                    });
                }}
            >

                {(create_schema, {loading, error}) => {
                    if (loading)
                        return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
                    if (error)
                        return 'error';
                    return (
                        <div>
                            <Search
                                className='add-input'
                                placeholder="input schema_name"
                                enterButton="Confirm"
                                onSearch={value => {
                                    this.setState({
                                        switch: true,
                                        currentSchema: value,
                                        currentTable: ''
                                    });
                                    create_schema({
                                        variables: {
                                            ...varobj,
                                            schemaName: value
                                        }
                                    });
                                }}
                            />
                        </div>)
                }}
            </Mutation>
        )
    }
}

class ShowSchemaList extends Component {
    render() {
        let userID = this.props.userID;
        return (
            <Query query={SHOW_SCHEMA} variables={{user_id: userID}}>

                {
                    ({loading, error, data}) => {
                        if (loading) {
                            return <Spin style={{marginLeft: 3}}/>
                        }
                        if (error) {
                            return 'error!';
                        }
                        if (data.schema_by_props.length === 0)
                            return (
                                <div>
                                    <span>no schemas, create one</span>
                                </div>
                            );
                        else {
                            return (
                                <div>
                                    {
                                        data.schema_by_props.map((schema) => {
                                            return <div key={schema.schemaName} className='title'
                                                        onClick={() => {
                                                            this.props.switchSchema(schema.schemaName, schema.id);
                                                        }}>
                                                <Row>
                                                    <Col span={20}>{schema.schemaName}</Col>
                                                    <Col span={4}>
                                                        <Button onClick={() => this.props.switchTable('add')}
                                                                type="primary"
                                                                shape="circle" icon="plus" size='small'/>
                                                        <DeleteSchemaButton
                                                            schemaName={schema.schemaName}
                                                            userID={this.props.userID}
                                                        />
                                                    </Col>
                                                </Row>


                                                {
                                                    JSON.parse(schema.schemaData).map(table => (
                                                        <p
                                                            onClick={() => {
                                                                this.props.switchTable(table.name)
                                                            }}
                                                            key={table.name}
                                                            className='show'>
                                                            <Icon type="ordered-list" theme="outlined"/> {table.name}
                                                            <span className='remark'><i>   {table.remark}</i></span>
                                                        </p>
                                                    ))
                                                }
                                            </div>
                                        })
                                    }
                                </div>
                            );
                        }
                    }
                }
            </Query>
        )
    }
}

class DeleteSchemaButton extends Component {
    constructor(props) {
        super(props);
        this.state = {
            schemaName: props.schemaName
        }
    }

    render() {
        let userID = this.props.userID;
        return (
            <Mutation
                mutation={DELETE_SCHEMA}
                update={(cache) => {
                    let data = cache.readQuery({query: SHOW_SCHEMA, variables: {user_id: userID}});

                    data.schema_by_props.splice(data.schema_by_props.findIndex(obj => obj.schemaName === this.state.schemaName), 1);
                    cache.writeQuery({
                        query: SHOW_SCHEMA,
                        variables: {user_id: userID},
                        data
                    });
                }}
            >
                {(delete_schema, {loading, error}) => {
                    if (error)
                        return 'error';
                    if (loading)
                        return <Spin style={{marginLeft: 3}}/>;
                    return (
                        <Button onClick={(e) => {
                            delete_schema({variables: {schemaName: this.props.schemaName}});
                        }} type="danger" shape="circle" icon="delete" size='small' style={{marginLeft: 3}}/>
                    )
                }}
            </Mutation>
        )
    }
}