conflict fixing

src/components/app/App.jsx

@@ -29,7 +29,7 @@ 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",
@@ -91,7 +91,7 @@ class App extends Component {
     };
 
     render() {
-        const { locale,language,visible } = this.state;
+        const {locale, language, visible} = this.state;
 
         return (
             <Router>
@@ -113,7 +113,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>
@@ -123,63 +124,29 @@ 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 (
+                    {(() => {
+                        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} showModel={this.showModal}/>
+                                );
+                            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"
@@ -198,18 +165,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="wechat"><Link to="/wechat-service/trial-case/wechat case">wechat 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 wechat"><Link to="/wechat-service/my-create/my wechat">my wechat</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>
-                                    );
-                                case 'quantization-service':
-                                    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"
@@ -228,66 +209,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="quant-service"><Link to="/quant-service/">quant
+                                                    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 quant"><Link to="/quant-service/">my
+                                                    quant</Link></Menu.Item>
                                             </SubMenu>
                                         </Menu>
-                                    );
-                                default:
-                                    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>
+                                    </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} showModel={this.showModal}/>
+                                );
+                        }
+                    })()}
 
-                                            <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>
-                                    );
-                            }
-                        })()}
-                    </Sider>
                     <Create visible={visible} hideModal={this.hideModal}/>
-                    {
-                        // todo: 路由如何传值是个问题，包括schema_id, user_id
-                    }
-
                     <LocaleProvider locale={locale}>
                         <Layout style={{marginTop: '64px', zIndex: '0'}}
                                 key={locale ? locale.locale : 'en'/* Have to refresh for production environment */}>
@@ -388,13 +335,14 @@ class GraphqlSidebar extends Component {
                                                 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.props.showModal}>
+                                            <Icon type="edit" theme="twoTone" />
+                                            <span>Create</span>
                                             <Icon type="plus" style={{
                                                 position: 'absolute',
                                                 top: '35%',
                                                 right: '6px',
-                                                color: 'white'
-                                            }}/>
+                                                color: 'white'}}/>
                                         </Menu.Item>
 
                                         <SubMenu key="my-create" title={<span><Icon type="user"

src/components/common/schema/Create.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 
-import {Modal,Row, Col, Input, Icon, Button, Spin} from 'antd';
+import {Modal, Row, Col, Input, Icon, Button, Spin} from 'antd';
 
 import {Mutation, Query} from "react-apollo";
 import gql from "graphql-tag";
@@ -23,22 +23,14 @@ class Create extends Component {
         };
     }
 
-    componentWillReceiveProps(nextProps){
-        // console.log('nextProps',nextProps);
+    componentWillReceiveProps(nextProps) {
         this.setState({
             visible: nextProps.visible,
         });
     }
 
-    switchSchema = (name, id) => {
-        this.setState({
-            currentSchema: name,
-            schemaID: id
-        });
-    };
-
-    handleOk = (userID,create_schema) => {
 
+    handleOk = (userID, create_schema) => {
         let varobj = {
             id: idGen('schema'),
             user_id: userID,
@@ -48,6 +40,7 @@ class Create extends Component {
             schemaData: JSON.stringify([]),
             reference: ''
         };
+
         this.setState({
             confirmLoading: true,
         });
@@ -68,14 +61,14 @@ class Create extends Component {
 
     render() {
         let userID = this.props.userID || "user_1543305776799_25177768";
-        console.log('userid',userID);
-        const { visible, confirmLoading } = this.state;
+        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}}]}
+                    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}}));
@@ -95,9 +88,9 @@ class Create extends Component {
                             <Modal title="Create Graphql Service"
                                    centered
                                    visible={visible}
-                                   onOk={()=>this.handleOk(userID,create_schema)}
+                                   onOk={() => this.handleOk(userID, create_schema)}
                                    confirmLoading={confirmLoading}
-                                   onCancel={()=>this.props.hideModal()}
+                                   onCancel={() => this.props.hideModal()}
                             >
                                 <div>
                                     <p>schema name</p>
@@ -106,7 +99,7 @@ class Create extends Component {
                                         placeholder="input schema_name"
                                         onChange={e => {
                                             e.persist();
-                                            console.log('schema name',e.target.value);
+                                            console.log('schema name', e.target.value);
                                             this.setState({
                                                 schemaName: e.target.value,
                                             });

src/components/common/schema/Schema.jsx

@@ -2,7 +2,6 @@ import React, {Component} from 'react';
 
 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'