add create schema

src/components/app/App.jsx

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Layout, Menu, Input, Button, Spin, Breadcrumb, Icon, Radio, LocaleProvider} from 'antd';
+import {Layout, Menu, Input, Modal, Button, Spin, Breadcrumb, Icon, Radio, LocaleProvider} from 'antd';
 import {BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom";
 
 import moment from 'moment';
@@ -13,6 +13,7 @@ import TrialCase from "../trialCase/TrialCase";
 import Login from "../login/Login";
 import '../common/graphql/index.css';
 import './index.css'
+import Create from "../common/schema/Create";
 
 const {SubMenu} = Menu;
 const {Header, Sider} = Layout;
@@ -28,7 +29,10 @@ class App extends Component {
             collapsed: false,
             inlineCollapsed: false,
             locale: undefined,
-            language: sessionStorage.getItem("language")
+            language: sessionStorage.getItem("language"),
+            ModalText: 'Content of the modal',
+            visible: false,
+            confirmLoading: false,
         };
     }
 
@@ -44,7 +48,20 @@ class App extends Component {
         });
     };
 
+    showModal = () => {
+        this.setState({
+            visible: true,
+        });
+    };
+
+    hideModal = () => {
+        this.setState({
+            visible: false,
+        });
+    };
+
     changeLocale = (e) => {
+        e.stopPropagation();
         let language = sessionStorage.getItem("language");
         // console.log('app language',language);
         let local = language === "中文" ? zhCN : undefined;
@@ -66,9 +83,9 @@ class App extends Component {
         }
     };
 
-
     render() {
-        const { locale,language } = this.state;
+        const { locale,language,visible } = this.state;
+
         return (
             <Router>
                 <Layout style={{minHeight: '100vh'}}>
@@ -81,7 +98,7 @@ class App extends Component {
                         <Menu
                             theme="dark"
                             mode="horizontal"
-                            // defaultSelectedKeys={['cloud-function']}
+                            defaultSelectedKeys={['graphql-service']}
                             style={{lineHeight: '64px'}}
                             onClick={(e) => this.switchMenu('menuLevel1', e)}
                         >
@@ -138,7 +155,9 @@ class App extends Component {
                                                 <Menu.Item key="appointment"><Link to="/graphql-service/trial-case/appointment">appointment</Link></Menu.Item>
                                             </SubMenu>
 
-                                            <Menu.Item key="1"><Icon type="edit" theme="twoTone" /><span>Create</span>
+                                            <Menu.Item key="create-graphql" onClick={this.showModal}>
+                                                <Icon type="edit" theme="twoTone" />
+                                                <span>Create</span>
                                                 <Icon type="plus" style={{
                                                     position: 'absolute',
                                                     top: '35%',
@@ -158,7 +177,7 @@ class App extends Component {
                                             theme="dark"
                                             mode="inline"
                                             inlineCollapsed={this.state.inlineCollapsed}
-                                            defaultSelectedKeys={['e-commerce']}
+                                            defaultSelectedKeys={['wechat']}
                                             defaultOpenKeys={['trial-case']}
                                             // openKeys={['cloud-function']}
                                             onClick={(e) => this.switchMenu('sideBar', e)}
@@ -188,7 +207,7 @@ class App extends Component {
                                             theme="dark"
                                             mode="inline"
                                             inlineCollapsed={this.state.inlineCollapsed}
-                                            defaultSelectedKeys={['e-commerce']}
+                                            defaultSelectedKeys={['quant-service']}
                                             defaultOpenKeys={['trial-case']}
                                             // openKeys={['cloud-function']}
                                             onClick={(e) => this.switchMenu('sideBar', e)}
@@ -238,7 +257,9 @@ class App extends Component {
                                                 <Menu.Item key="appointment"><Link to="/graphql-service/trial-case/appointment">appointment</Link></Menu.Item>
                                             </SubMenu>
 
-                                            <Menu.Item key="1"><Icon type="edit" theme="twoTone" /><span>Create</span>
+                                            <Menu.Item key="create-graphql"  onClick={this.showModal}>
+                                                <Icon type="edit" theme="twoTone" />
+                                                <span>Create</span>
                                                 <Icon type="plus" style={{
                                                     position: 'absolute',
                                                     top: '35%',
@@ -255,6 +276,7 @@ class App extends Component {
                             }
                         })()}
                     </Sider>
+                    <Create visible={visible} hideModal={this.hideModal}/>
                     {
                         // todo: 路由如何传值是个问题，包括schema_id, user_id
                     }

src/components/common/schema/Create.js

@@ -1,29 +1,32 @@
 import React, {Component} from 'react';
-
-import {Row, Col, Input, Icon, Button, Spin} from 'antd';
-import './index.css';
-import SchemaChange from './change/SchemaChange';
+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, DELETE_SCHEMA, SHOW_TABLE} from '../../gql'
 
-const Search = Input.Search;
+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 = {
-            currentSchema: '',
-            currentTable: '',
-            schemaID: ''
+            schemaName: '',
+            schemaID: '',
+            visible: false,
+            confirmLoading: false,
         };
     }
 
+    componentWillReceiveProps(nextProps){
+        // console.log('nextProps',nextProps);
+        this.setState({
+            visible: nextProps.visible,
+        });
+    }
 
     switchSchema = (name, id) => {
         this.setState({
@@ -32,34 +35,7 @@ class Create extends Component {
         });
     };
 
-    switchTable = (table) => {
-        this.setState({
-            currentTable: table
-        })
-    };
-
-    render() {
-        let userID = this.props.userID;
-        return (
-            <div>
-                <Row>
-                    <Col span={6}>
-                        <div className='wrapper'>
-                            <AddSchemaInput userID={userID}/>
-                        </div>
-                    </Col>
-                </Row>
-            </div>
-        )
-    }
-}
-
-export default Create;
-
-class AddSchemaInput extends Component {
-
-    render() {
-        let userID = this.props.userID;
+    handleOk = (userID,create_schema) => {
 
         let varobj = {
             id: idGen('schema'),
@@ -70,50 +46,78 @@ class AddSchemaInput extends Component {
             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 (
-            <Mutation
-                mutation={gql(ADD_SCHEMA)}
-                update={(cache, {data: {create_schema}}) => {
-                    let data = cache.readQuery({query: gql(SHOW_SCHEMA), variables: {user_id: userID}});
-                    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 (
-                        <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>
+            <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;

src/components/common/schema/Schema.jsx

@@ -6,6 +6,7 @@ import SchemaChange from './change/SchemaChange';
 import {Mutation, Query} from "react-apollo";
 import gql from "graphql-tag";
 import {SHOW_SCHEMA, ADD_SCHEMA, DELETE_SCHEMA, SHOW_TABLE} from '../../gql'
+import Create from "./Create";
 
 const Search = Input.Search;
 
@@ -45,6 +46,7 @@ class Schema extends Component {
         let userID = this.props.userID;
         return (
             <div>
+                <Create/>
                 <Row>
                     <Col span={17} offset={1}>
                         {