online/src/components/common/schema/Create.js

import React, {Component} from 'react';
import {Modal,Row, Col, Input, Icon, Button, Spin} from 'antd';
import {Mutation, Query} from "react-apollo";
import gql from "graphql-tag";

import {SHOW_SCHEMA, ADD_SCHEMA} from '../../gql'
import './index.css';

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

class Create extends Component {
    constructor(props) {
        super(props);
        this.state = {
            schemaName: '',
            schemaID: '',
            visible: false,
            confirmLoading: false,
        };
    }

    componentWillReceiveProps(nextProps){
        // console.log('nextProps',nextProps);
        this.setState({
            visible: nextProps.visible,
        });
    }

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

    handleOk = (userID,create_schema) => {

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

        create_schema({
            variables: {
                ...varobj,
                schemaName: this.state.schemaName
            }
        });
        setTimeout(() => {
            this.setState({
                visible: false,
                confirmLoading: false,
            });
        }, 2000);
    };

    render() {
        let userID = this.props.userID || "user_1543305776799_25177768";
        console.log('userid',userID);
        const { visible, confirmLoading } = this.state;

        return (
            <div>
                <Mutation
                    mutation={gql(ADD_SCHEMA)}
                    refetchQueries={[{query:gql(SHOW_SCHEMA), variables:{user_id: userID}}]}
                    // update={(cache, {data: {create_schema}}) => {
                    //     console.log('cache',cache);
                    //     console.log('data1',cache.readQuery({query: gql(SHOW_SCHEMA), variables: {user_id: userID}}));
                    //     let data = cache.readQuery({query: gql(SHOW_SCHEMA), variables: {user_id: userID}});
                    //     console.log('data',data);
                    //     data.schema_by_props.push(create_schema);
                    //     cache.writeQuery({query: gql(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 (
                            <Modal title="Create Graphql Service"
                                   centered
                                   visible={visible}
                                   onOk={()=>this.handleOk(userID,create_schema)}
                                   confirmLoading={confirmLoading}
                                   onCancel={()=>this.props.hideModal()}
                            >
                                <div>
                                    <p>schema name</p>
                                    <Input
                                        className='add-input'
                                        placeholder="input schema_name"
                                        onChange={e => {
                                            e.persist();
                                            console.log('schema name',e.target.value);
                                            this.setState({
                                                schemaName: e.target.value,
                                            });
                                        }}
                                    />
                                </div>
                            </Modal>
                        )
                    }}
                </Mutation>
            </div>
        )
    }
}

export default Create;