show schema, change by sidebar

src/components/app/App.jsx

@@ -336,7 +336,7 @@ class GraphqlSidebar extends Component {
                                         <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
+                                            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>

src/components/common/schema/Schema.jsx

@@ -4,8 +4,8 @@ import {Row, Col, Input, Icon, Button, Spin} from 'antd';
 import './index.css';
 import {Mutation, Query} from "react-apollo";
 import gql from "graphql-tag";
-import {SHOW_SCHEMA, ADD_SCHEMA, DELETE_SCHEMA, SHOW_TABLE} from '../../gql'
-import Table from './Table';
+import {SHOW_SCHEMA, DELETE_SCHEMA, SHOW_TABLE} from '../../gql'
+
 
 const Search = Input.Search;
 
@@ -19,7 +19,7 @@ class Schema extends Component {
         super(props);
         this.state = {
             currentTable: '',
-            // 下面这两个参数跟 props 拿
+            // default schemaID and schemaName
             schemaID: 'schema_1542243424669_92094965',
             schemaName: 'ecommerce'
         };
@@ -35,59 +35,83 @@ class Schema extends Component {
     render() {
         let userID = this.props.userID;
         return (
-            <div>
-                <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>
+                <Query query={gql(SHOW_TABLE)} variables={{schema_id: this.props.schemaID || this.state.schemaID}}>
+
+                    {
+                        ({loading, error, data}) => {
+                            if (loading) {
+                                return <Spin style={{marginLeft: 3}}/>
+                            }
+                            if (error) {
+                                return 'error!';
+                            }
+                            console.log(data);
+                            return (
+                                <div>
+                                    <div>
+                                        {data.schema_by_id.schemaName || 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>
+                                    </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>
+                            );
+                        }
+                    }
+                    {/*<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>*/}
+                </Query>
+
         )
     }
 }

src/components/common/schema/Table.js

@@ -1,47 +0,0 @@
-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;
-

src/components/common/schema/Column.jsx → src/components/common/schema/Table.jsx

@@ -8,7 +8,7 @@ import {Mutation, Query} from "react-apollo";
 
 const Option = Select.Option;
 
-class Column extends Component {
+class Table extends Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -190,7 +190,7 @@ class Column extends Component {
     }
 }
 
-export default Column;
+export default Table;
 
 
 class UpdateTableButton extends Component {

src/components/gql.js

@@ -113,6 +113,7 @@ const SHOW_TABLE = `
             query TABLE($schema_id: ID!) {
                 schema_by_id(id: $schema_id) {
                     schemaData
+                    schemaName
                 }
             }
         `;

src/components/trialCase/TrialCase.jsx

@@ -20,8 +20,10 @@ class TrialCase extends Component {
 
         this.state = {
             menuLevel2: "schema",
+            // default user
             userID: 'ioobot',
-            getID_url: 'http://123.206.193.98:8999/getuserid'
+            getID_url: 'http://123.206.193.98:8999/getuserid',
+            schemaID: ''
         }
     }
 
@@ -41,6 +43,27 @@ class TrialCase extends Component {
             });
     }
 
+    componentWillReceiveProps(nextProps) {
+        let schemaID  = '';
+        switch (nextProps.match.params.caseId) {
+            case 'e-commerce':
+                schemaID = 'schema_1542243424669_92094965';
+                break;
+            case 'keep-accounts':
+                schemaID = 'schema_1542257622953_79276889';
+                break;
+            case 'appointment':
+                schemaID = 'schema_1542246903496_97115305';
+                break;
+            default:
+                schemaID = nextProps.match.params.caseId;
+        }
+        this.setState({
+            schemaID
+        });
+    }
+
+
     switchMenu = (menuName, e) => {
         // console.log('menuName', menuName, 'e', e);
         this.setState({
@@ -73,7 +96,7 @@ class TrialCase extends Component {
                             (() => {
                                 switch (this.state.menuLevel2) {
                                     case 'schema':
-                                        return <Schema userID={this.state.userID}/>;
+                                        return <Schema userID={this.state.userID} schemaID={this.state.schemaID}/>;
                                     case 'deploy':
                                         return <Deploy userID={this.state.userID}/>;
                                     case 'graphql':