Merge remote-tracking branch 'origin/master'

# Conflicts:
#	src/components/app/App.jsx
#	src/components/common/schema/Create.js
#	src/components/common/schema/Schema.jsx

src/components/app/App.jsx

@@ -1,10 +1,12 @@
 import React, {Component} from 'react';
-import {Layout, Menu, Input, Modal, Button, Spin, Breadcrumb, Icon, Radio, LocaleProvider} from 'antd';
+import {Layout, Menu, Input, Button, Spin, Breadcrumb, Icon, Radio, LocaleProvider} from 'antd';
 import {BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom";
+import {Mutation, Query} from "react-apollo";
+import gql from "graphql-tag";
 
 import moment from 'moment';
 import 'moment/locale/zh-cn';
-import { FormattedMessage } from 'react-intl';
+import {FormattedMessage} from 'react-intl';
 import zhCN from 'antd/lib/locale-provider/zh_CN';
 
 import WechatService from "../wechatService/WechatService";
@@ -13,16 +15,20 @@ import TrialCase from "../trialCase/TrialCase";
 import Login from "../login/Login";
 import '../common/graphql/index.css';
 import './index.css'
-import Create from "../common/schema/Create";
+import {SHOW_SCHEMA} from "../gql";
+import axios from 'axios';
+
+axios.defaults.withCredentials = true;
 
 const {SubMenu} = Menu;
 const {Header, Sider} = Layout;
 moment.locale('en');
 
+
 class App extends Component {
     constructor(props) {
         super(props);
-        sessionStorage.setItem("language","English");
+        sessionStorage.setItem("language", "English");
         this.state = {
             menuLevel1: "trail",
             sideBar: "e-commerce",
@@ -30,9 +36,7 @@ class App extends Component {
             inlineCollapsed: false,
             locale: undefined,
             language: sessionStorage.getItem("language"),
-            ModalText: 'Content of the modal',
-            visible: false,
-            confirmLoading: false,
+            userID: ''
         };
     }
 
@@ -48,33 +52,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;
         // console.log('app local',local);
-        let changeLanguage = language === "中文" ? "English" :  "中文";
+        let changeLanguage = language === "中文" ? "English" : "中文";
         // console.log('app changeLanguage',changeLanguage);
-        let nowLanguage = language === "中文" ?  'zh' :  'en';
+        let nowLanguage = language === "中文" ? 'zh' : 'en';
         // console.log('app nowLanguage',nowLanguage);
-        sessionStorage.setItem("language",changeLanguage);
+        sessionStorage.setItem("language", changeLanguage);
         this.props.changeLanguage(nowLanguage);
         this.setState({
-            language:changeLanguage,
-            locale:local
+            language: changeLanguage,
+            locale: local
         });
         if (!local) {
             moment.locale('en');
@@ -83,9 +74,9 @@ class App extends Component {
         }
     };
 
-    render() {
-        const { locale,language,visible } = this.state;
 
+    render() {
+        const {locale, language} = this.state;
         return (
             <Router>
                 <Layout style={{minHeight: '100vh'}}>
@@ -98,7 +89,7 @@ class App extends Component {
                         <Menu
                             theme="dark"
                             mode="horizontal"
-                            defaultSelectedKeys={['graphql-service']}
+                            // defaultSelectedKeys={['cloud-function']}
                             style={{lineHeight: '64px'}}
                             onClick={(e) => this.switchMenu('menuLevel1', e)}
                         >
@@ -106,7 +97,8 @@ class App extends Component {
                                 <Link to="/"><FormattedMessage id="Graphql Service"/></Link>
                             </Menu.Item>
                             <Menu.Item key="wechat-service">
-                                <Link to="/wechat-service/trial-case/wechat case"><FormattedMessage id="Wechat Service"/></Link>
+                                <Link to="/wechat-service/trial-case/wechat case"><FormattedMessage
+                                    id="Wechat Service"/></Link>
                             </Menu.Item>
                             <Menu.Item key="quantization-service">
                                 <Link to="/quant-service/"><FormattedMessage id="Quantization Service"/></Link>
@@ -116,98 +108,34 @@ class App extends Component {
                         <Link to="/login"><Button className='login-button' type='primary'>Login</Button></Link>
 
                         <div className="change-locale">
-                            <Button size="small" onClick={(e)=>this.changeLocale(e)}>{language}</Button>
+                            <Button size="small" onClick={(e) => this.changeLocale(e)}>{language}</Button>
                         </div>
                     </Header>
 
-                    <Sider
-                        width={200}
-                        style={{background: '#fff', marginTop: '64px', zIndex: '0'}}
-                        collapsible
-                        collapsed={this.state.collapsed}
-                        onCollapse={this.onCollapse}
-                    >
-                        {(() => {
-                            switch (this.state.menuLevel1) {
-                                case 'graphql-service':
-                                    return (
-                                        <Menu
-                                            theme="dark"
-                                            mode="inline"
-                                            inlineCollapsed={this.state.inlineCollapsed}
-                                            defaultSelectedKeys={['e-commerce']}
-                                            defaultOpenKeys={['trial-case']}
-                                            // openKeys={['cloud-function']}
-                                            onClick={(e) => this.switchMenu('sideBar', e)}
-                                            selectedKeys={[this.state.sideBar]}
-                                            style={{
-                                                borderRight: 0,
-                                                overflow: 'auto',
-                                                height: '100vh',
-                                                left: '0',
-                                                width: '200px',
-                                                position: 'fixed'
-                                            }}
-                                        >
-                                            <SubMenu key="trial-case" title={<span><Icon type="appstore" theme="twoTone"/><span>Trial Case</span></span>}>
-                                                <Menu.Item key="e-commerce"><Link to="/graphql-service/trial-case/e-commerce">e-commerce</Link></Menu.Item>
-                                                <Menu.Item key="keep accounts"><Link to="/graphql-service/trial-case/keep accounts">keep accounts</Link></Menu.Item>
-                                                <Menu.Item key="appointment"><Link to="/graphql-service/trial-case/appointment">appointment</Link></Menu.Item>
-                                            </SubMenu>
-
-                                            <Menu.Item key="create-graphql" onClick={this.showModal}>
-                                                <Icon type="edit" theme="twoTone" />
-                                                <span>Create</span>
-                                                <Icon type="plus" style={{
-                                                    position: 'absolute',
-                                                    top: '35%',
-                                                    right: '6px',
-                                                    color: 'white'}}/>
-                                            </Menu.Item>
-
-                                            <SubMenu key="my-create"
-                                                     title={<span><Icon type="user" theme="outlined"/><span>My Create</span></span>}>
-                                                <Menu.Item key="my graphql"><Link to="/graphql-service/my-create/my graphql">my graphql</Link></Menu.Item>
-                                            </SubMenu>
-                                        </Menu>
-                                    );
-                                case 'wechat-service':
-                                    return (
-                                        <Menu
-                                            theme="dark"
-                                            mode="inline"
-                                            inlineCollapsed={this.state.inlineCollapsed}
-                                            defaultSelectedKeys={['wechat']}
-                                            defaultOpenKeys={['trial-case']}
-                                            // openKeys={['cloud-function']}
-                                            onClick={(e) => this.switchMenu('sideBar', e)}
-                                            selectedKeys={[this.state.sideBar]}
-                                            style={{
-                                                borderRight: 0,
-                                                overflow: 'auto',
-                                                height: '100vh',
-                                                left: '0',
-                                                width: '200px',
-                                                position: 'fixed'
-                                            }}
-                                        >
-                                            <SubMenu key="trial-case" title={<span><Icon type="appstore" theme="twoTone"/><span>Trial Case</span></span>}>
-                                                <Menu.Item key="wechat"><Link to="/wechat-service/trial-case/wechat case">wechat case</Link></Menu.Item>
-                                            </SubMenu>
 
-                                            <SubMenu key="my-create"
-                                                     title={<span><Icon type="user" theme="outlined"/><span>My Create</span></span>}>
-                                                <Menu.Item key="my wechat"><Link to="/wechat-service/my-create/my wechat">my wechat</Link></Menu.Item>
-                                            </SubMenu>
-                                        </Menu>
-                                    );
-                                case 'quantization-service':
-                                    return (
+                    {(() => {
+                        switch (this.state.menuLevel1) {
+                            case 'graphql-service':
+                                return (
+                                    <GraphqlSidebar collapsed={this.state.collapsed} onCollapse={this.onCollapse}
+                                                    inlineCollapsed={this.state.inlineCollapsed}
+                                                    sideBar={this.state.sideBar} switchMenu={this.switchMenu}
+                                                    userID={this.state.userID}/>
+                                );
+                            case 'wechat-service':
+                                return (
+                                    <Sider
+                                        width={200}
+                                        style={{background: '#fff', marginTop: '64px', zIndex: '0'}}
+                                        collapsible
+                                        collapsed={this.state.collapsed}
+                                        onCollapse={this.onCollapse}
+                                    >
                                         <Menu
                                             theme="dark"
                                             mode="inline"
                                             inlineCollapsed={this.state.inlineCollapsed}
-                                            defaultSelectedKeys={['quant-service']}
+                                            defaultSelectedKeys={['e-commerce']}
                                             defaultOpenKeys={['trial-case']}
                                             // openKeys={['cloud-function']}
                                             onClick={(e) => this.switchMenu('sideBar', e)}
@@ -221,18 +149,32 @@ class App extends Component {
                                                 position: 'fixed'
                                             }}
                                         >
-                                            <SubMenu key="trial-case" title={<span><Icon type="appstore" theme="twoTone"/><span>Trial Case</span></span>}>
-                                                <Menu.Item key="quant-service"><Link to="/quant-service/">quant case</Link></Menu.Item>
+                                            <SubMenu key="trial-case"
+                                                     title={<span><Icon type="appstore" theme="twoTone"/><span>Trial Case</span></span>}>
+                                                <Menu.Item key="wechat"><Link
+                                                    to="/wechat-service/trial-case/wechat case">wechat
+                                                    case</Link></Menu.Item>
                                             </SubMenu>
 
                                             <SubMenu key="my-create"
-                                                     title={<span><Icon type="user" theme="outlined"/><span>My Create</span></span>}>
-                                                <Menu.Item key="my quant"><Link to="/quant-service/">my quant</Link></Menu.Item>
+                                                     title={<span><Icon type="user"
+                                                                        theme="outlined"/><span>My Create</span></span>}>
+                                                <Menu.Item key="my wechat"><Link
+                                                    to="/wechat-service/my-create/my wechat">my
+                                                    wechat</Link></Menu.Item>
                                             </SubMenu>
                                         </Menu>
-                                    );
-                                default:
-                                    return (
+                                    </Sider>
+                                );
+                            case 'quantization-service':
+                                return (
+                                    <Sider
+                                        width={200}
+                                        style={{background: '#fff', marginTop: '64px', zIndex: '0'}}
+                                        collapsible
+                                        collapsed={this.state.collapsed}
+                                        onCollapse={this.onCollapse}
+                                    >
                                         <Menu
                                             theme="dark"
                                             mode="inline"
@@ -251,37 +193,34 @@ class App extends Component {
                                                 position: 'fixed'
                                             }}
                                         >
-                                            <SubMenu key="trial-case" title={<span><Icon type="appstore" theme="twoTone"/><span>Trial Case</span></span>}>
-                                                <Menu.Item key="e-commerce"><Link to="/graphql-service/trial-case/e-commerce">e-commerce</Link></Menu.Item>
-                                                <Menu.Item key="keep accounts"><Link to="/graphql-service/trial-case/keep accounts">keep accounts</Link></Menu.Item>
-                                                <Menu.Item key="appointment"><Link to="/graphql-service/trial-case/appointment">appointment</Link></Menu.Item>
+                                            <SubMenu key="trial-case"
+                                                     title={<span><Icon type="appstore" theme="twoTone"/><span>Trial Case</span></span>}>
+                                                <Menu.Item key="quant-service"><Link to="/quant-service/">quant
+                                                    case</Link></Menu.Item>
                                             </SubMenu>
 
-                                            <Menu.Item key="create-graphql"  onClick={this.showModal}>
-                                                <Icon type="edit" theme="twoTone" />
-                                                <span>Create</span>
-                                                <Icon type="plus" style={{
-                                                    position: 'absolute',
-                                                    top: '35%',
-                                                    right: '6px',
-                                                    color: 'white'}}/>
-                                            </Menu.Item>
-
                                             <SubMenu key="my-create"
-                                                     title={<span><Icon type="user" theme="outlined"/><span>My Create</span></span>}>
-                                                <Menu.Item key="my graphql"><Link to="/graphql-service/my-create/my graphql">my graphql</Link></Menu.Item>
+                                                     title={<span><Icon type="user"
+                                                                        theme="outlined"/><span>My Create</span></span>}>
+                                                <Menu.Item key="my quant"><Link to="/quant-service/">my
+                                                    quant</Link></Menu.Item>
                                             </SubMenu>
                                         </Menu>
-                                    );
-                            }
-                        })()}
-                    </Sider>
-                    <Create visible={visible} hideModal={this.hideModal}/>
-                    {
-                        // todo: 路由如何传值是个问题，包括schema_id, user_id
-                    }
+                                    </Sider>
+                                );
+                            default:
+                                return (
+                                    <GraphqlSidebar collapsed={this.state.collapsed} onCollapse={this.onCollapse}
+                                                    inlineCollapsed={this.state.inlineCollapsed}
+                                                    sideBar={this.state.sideBar} switchMenu={this.switchMenu}
+                                                    userID={this.state.userID}/>
+                                );
+                        }
+                    })()}
+
                     <LocaleProvider locale={locale}>
-                        <Layout style={{marginTop: '64px', zIndex: '0'}} key={locale ? locale.locale : 'en'/* Have to refresh for production environment */} >
+                        <Layout style={{marginTop: '64px', zIndex: '0'}}
+                                key={locale ? locale.locale : 'en'/* Have to refresh for production environment */}>
                             <Switch>
                                 <Route path="/" exact component={TrialCase}/>
                                 <Route path="/graphql-service/:sidebar/:caseId" component={TrialCase}/>
@@ -300,6 +239,110 @@ class App extends Component {
 
 export default App;
 
+class GraphqlSidebar extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            getID_url: 'http://123.206.193.98:8999/getuserid',
+            userID: '',
+            show: false
+        }
+    }
 
 
+    componentWillMount() {
+        let _this = this;
+        axios.get(this.state.getID_url)
+            .then((res) => {
+                console.log(res);
+                if (res.data !== '') {
+                    _this.setState({
+                        userID: res.data,
+                        show: true
+                    })
+                } else {
+                    _this.setState({
+                        show: true
+                    })
+                }
+            })
+            .catch((err) => {
+                console.log(err);
+            });
+    }
+
 
+    render() {
+        return (
+            this.state.show ?
+                <Query query={gql(SHOW_SCHEMA)} variables={{user_id: this.state.userID}}>
+                    {
+                        ({loading, error, data}) => {
+                            if (loading) return <Spin style={{marginLeft: 3}}/>;
+                            if (error) return 'error!';
+                            return (
+                                <Sider
+                                    width={200}
+                                    style={{background: '#fff', marginTop: '64px', zIndex: '0'}}
+                                    collapsible
+                                    collapsed={this.props.collapsed}
+                                    onCollapse={this.props.onCollapse}
+                                >
+                                    <Menu
+                                        theme="dark"
+                                        mode="inline"
+                                        inlineCollapsed={this.props.inlineCollapsed}
+                                        defaultSelectedKeys={['e-commerce']}
+                                        defaultOpenKeys={['trial-case', 'my-create']}
+                                        // openKeys={['cloud-function']}
+                                        onClick={(e) => this.props.switchMenu('sideBar', e)}
+                                        selectedKeys={[this.props.sideBar]}
+                                        style={{
+                                            borderRight: 0,
+                                            overflow: 'auto',
+                                            height: '100vh',
+                                            left: '0',
+                                            width: '200px',
+                                            position: 'fixed'
+                                        }}
+                                    >
+                                        <SubMenu key="trial-case"
+                                                 title={<span><Icon type="appstore"
+                                                                    theme="twoTone"/><span>Trial Case</span></span>}>
+                                            <Menu.Item key="e-commerce"><Link
+                                                to="/graphql-service/trial-case/e-commerce">e-commerce</Link></Menu.Item>
+                                            <Menu.Item key="keep accounts"><Link
+                                                to="/graphql-service/trial-case/keep accounts">keep
+                                                accounts</Link></Menu.Item>
+                                            <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>
+                                            <Icon type="plus" style={{
+                                                position: 'absolute',
+                                                top: '35%',
+                                                right: '6px',
+                                                color: 'white'
+                                            }}/>
+                                        </Menu.Item>
+
+                                        <SubMenu key="my-create" title={<span><Icon type="user"
+                                                                                    theme="outlined"/><span>My Create</span></span>}>
+                                            {
+                                                data.schema_by_props.map((schema) => <Menu.Item
+                                                    key={schema.schemaName}><Link
+                                                    to={`/graphql-service/my-create/${schema.id}`}>{schema.schemaName}</Link></Menu.Item>)
+                                            }
+                                        </SubMenu>
+                                    </Menu>
+                                </Sider>
+                            )
+                        }
+                    }
+                </Query>
+                :
+                ''
+        )
+    }
+}

src/components/common/deploy/Deploy.jsx

@@ -46,7 +46,7 @@ class Deploy extends Component {
             data => {
                 request('http://123.206.193.98:3000/graphql', SEARCH_SCHEMA, {id: this.state.schemaID}).then(
                     _data => {
-                        if(data.fc_by_props.length === 0) {
+                        if (data.fc_by_props.length === 0) {
                             request('http://123.206.193.98:3000/graphql', SHOW_CLOUD, {user_id: this.props.userID}).then(
                                 __data => {
                                     __data.cloud_by_props.forEach(cloud => {
@@ -118,9 +118,12 @@ class Deploy extends Component {
 
     render() {
         const contentListNoTitle = {
-            tencent: <TencentConfig cloudID={this.state.tencentCloudID} fc={this.tencentFC} schemaName={this.state.schemaName} userID={this.props.userID}/>,
-            aliyun: <AliConfig cloudID={this.state.aliyunCloudID} fc={this.aliyunFC} schemaName={this.state.schemaName} userID={this.props.userID}/>,
-            amazon: <AmazonConfig cloudID={this.state.amazonCloudID} fc={this.amazonFC} schemaName={this.state.schemaName} userID={this.props.userID}/>,
+            tencent: <TencentConfig cloudID={this.state.tencentCloudID} fc={this.tencentFC}
+                                    schemaName={this.state.schemaName} userID={this.props.userID}/>,
+            aliyun: <AliConfig cloudID={this.state.aliyunCloudID} fc={this.aliyunFC} schemaName={this.state.schemaName}
+                               userID={this.props.userID}/>,
+            amazon: <AmazonConfig cloudID={this.state.amazonCloudID} fc={this.amazonFC}
+                                  schemaName={this.state.schemaName} userID={this.props.userID}/>,
         };
 
         return (
@@ -138,9 +141,9 @@ class Deploy extends Component {
                     >
                         {
                             this.state.show ?
-                            contentListNoTitle[this.state.cloud]
-                            :
-                            "waiting..."
+                                contentListNoTitle[this.state.cloud]
+                                :
+                                "waiting..."
                         }
                     </Card>
                 </div>

src/components/common/schema/change/SchemaChange.jsx → src/components/common/schema/Column.jsx

@@ -1,14 +1,14 @@
 import React, {Component} from 'react';
 
 import {Select, Input, Icon, Button, notification, Spin} from 'antd';
-import {UPDATE_SCHEMA, SHOW_SCHEMA, SHOW_TABLE} from "../../../gql";
+import {UPDATE_SCHEMA, SHOW_SCHEMA, SHOW_TABLE} from "../../gql";
 import gql from "graphql-tag";
 
 import {Mutation, Query} from "react-apollo";
 
 const Option = Select.Option;
 
-class SchemaChange extends Component {
+class Column extends Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -18,7 +18,7 @@ class SchemaChange extends Component {
             columns: props.columns,
             newColName: '',
             newColType: 'type',
-            types: ['ID', 'String', 'Int', 'Float','Boolean', 'DateTime'],
+            types: ['ID', 'String', 'Int', 'Float', 'Boolean', 'DateTime'],
             descriptions: ['description', 'key', 'non-null', 'non-null-list', 'list']
         }
     }
@@ -190,7 +190,7 @@ class SchemaChange extends Component {
     }
 }
 
-export default SchemaChange;
+export default Column;
 
 
 class UpdateTableButton extends Component {
@@ -266,7 +266,7 @@ class UpdateTableButton extends Component {
 
                                     // 处理一下description的问题
                                     let cols = this.props.columns;
-                                    cols.map(obj=> {
+                                    cols.map(obj => {
                                         if (obj.description === 'description')
                                             obj.description = '';
                                         return obj

src/components/common/schema/Create.js

@@ -1,32 +1,29 @@
 import React, {Component} from 'react';
-import {Modal,Row, Col, Input, Icon, Button, Spin} from 'antd';
+
+import {Row, Col, Input, Icon, Button, Spin} from 'antd';
+import './index.css';
+import Column from './Column';
 import {Mutation, Query} from "react-apollo";
 import gql from "graphql-tag";
+import {SHOW_SCHEMA, ADD_SCHEMA, DELETE_SCHEMA, SHOW_TABLE} from '../../gql'
 
-import {SHOW_SCHEMA, ADD_SCHEMA} from '../../gql'
-import './index.css';
+const Search = Input.Search;
 
 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,
+            currentSchema: '',
+            currentTable: '',
+            schemaID: ''
         };
     }
 
-    componentWillReceiveProps(nextProps){
-        // console.log('nextProps',nextProps);
-        this.setState({
-            visible: nextProps.visible,
-        });
-    }
 
     switchSchema = (name, id) => {
         this.setState({
@@ -35,7 +32,34 @@ class Create extends Component {
         });
     };
 
-    handleOk = (userID,create_schema) => {
+    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;
 
         let varobj = {
             id: idGen('schema'),
@@ -46,78 +70,50 @@ class Create 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 (
-            <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>
+            <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>
         )
     }
 }
-
-export default Create;

src/components/common/schema/Schema.jsx

@@ -2,11 +2,11 @@ import React, {Component} from 'react';
 
 import {Row, Col, Input, Icon, Button, Spin} from 'antd';
 import './index.css';
-import SchemaChange from './change/SchemaChange';
+import Column from './Column';
 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";
+import Table from './Table';
 
 const Search = Input.Search;
 
@@ -19,22 +19,13 @@ class Schema extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            currentSchema: '',
             currentTable: '',
-            schemaID: ''
+            // 下面这两个参数跟 props 拿
+            schemaID: 'schema_1542243424669_92094965',
+            schemaName: 'ecommerce'
         };
     }
 
-    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({
@@ -46,46 +37,57 @@ class Schema extends Component {
         let userID = this.props.userID;
         return (
             <div>
-                <Create/>
-                <Row>
-                    <Col span={17} offset={1}>
-                        {
-                            this.state.currentTable === 'add' ?
-                                <SchemaChange
-                                    currentSchema={this.state.currentSchema}
-                                    currentTableIndex={-2}
-                                    columns={[]}
-                                    remark=''
-                                    userID={userID}
-                                    schemaID={this.state.schemaID}
-                                /> :
-                                <Query query={gql(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={userID}
-                                                />
-                                            )
-                                        }
-                                    }
-                                </Query>
-                        }
-                    </Col>
-                </Row>
+                <div>
+                    {this.state.schemaName}
+                </div>
+                <div>
+                    <Row>
+                        <Col span={8}><span>Name</span></Col>
+                        <Col span={8}><span>Remark</span></Col>
+                        <Col span={8}><span><Icon type="plus"/></span></Col>
+                    </Row>
+                    <Table schemaID={this.state.schemaID}/>
+                </div>
+
+                {/*<Row>*/}
+                {/*<Col span={17} offset={1}>*/}
+                {/*{*/}
+                {/*this.state.currentTable === 'add' ?*/}
+                {/*<Column*/}
+                {/*currentSchema={this.state.currentSchema}*/}
+                {/*currentTableIndex={-2}*/}
+                {/*columns={[]}*/}
+                {/*remark=''*/}
+                {/*userID={userID}*/}
+                {/*schemaID={this.state.schemaID}*/}
+                {/*/> :*/}
+                {/*<Query query={gql(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 (*/}
+                {/*<Column*/}
+                {/*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={userID}*/}
+                {/*/>*/}
+                {/*)*/}
+                {/*}*/}
+                {/*}*/}
+                {/*</Query>*/}
+                {/*}*/}
+                {/*</Col>*/}
+                {/*</Row>*/}
             </div>
         )
     }
@@ -94,3 +96,46 @@ class Schema extends Component {
 export default Schema;
 
 
+
+
+// 备用代码
+
+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>
+        )
+    }
+}

src/components/common/schema/Table.js

@@ -0,0 +1,47 @@
+import React, {Component} from 'react';
+
+import {Row, Col, Icon, Spin} from 'antd';
+import './index.css';
+import Column from './Column';
+import {Query} from "react-apollo";
+import gql from "graphql-tag";
+import {SHOW_TABLE} from '../../gql'
+import Schema from "./Schema";
+
+
+class Table extends Component {
+    render() {
+        let userID = this.props.userID;
+        return (
+            <Query query={gql(SHOW_TABLE)} variables={{schema_id: this.props.schemaID}}>
+
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return <Spin style={{marginLeft: 3}}/>
+                        }
+                        if (error) {
+                            return 'error!';
+                        }
+                        return (
+                            <div>
+                                {
+                                    JSON.parse(data.schema_by_id.schemaData).map(table => (
+                                        <Row key={table.name} className='show'>
+                                            <Col span={8}><span>{table.name}</span></Col>
+                                            <Col span={8}><span>{table.remark}</span></Col>
+                                            <Col span={8}><Icon type="delete"/></Col>
+                                        </Row>
+                                    ))
+                                }
+                            </div>
+                        );
+                    }
+                }
+            </Query>
+        )
+    }
+}
+
+export default Table;
+