区分 trial-case 和 user-create

src/components/app/App.jsx

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
-import {Layout, Menu, Input, Modal, Button, Spin, Breadcrumb, Icon, Radio, LocaleProvider} from 'antd';
+import {Layout, Menu, Button, Spin, Icon, LocaleProvider} from 'antd';
 import {BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom";
-import {Mutation, Query} from "react-apollo";
+import {Query} from "react-apollo";
 import gql from "graphql-tag";
 
 import moment from 'moment';
@@ -12,8 +12,8 @@ import zhCN from 'antd/lib/locale-provider/zh_CN';
 import WechatService from "../wechatService/WechatService";
 import QuantService from "../quantService/QuantService";
 import TrialCase from "../trialCase/TrialCase";
+import UserCreate from "../userCreate/UserCreate";
 import Login from "../login/Login";
-import Table from '../common/schema/Table';
 import '../common/graphql/index.css';
 import './index.css'
 import Create from "../common/schema/Create";
@@ -21,7 +21,6 @@ import Create from "../common/schema/Create";
 import {SHOW_ALL_SCHEMA} from "../gql";
 import axios from 'axios';
 import {getCookie} from "../cookie";
-import Schema from "../common/schema/Schema";
 
 axios.defaults.withCredentials = true;
 
@@ -302,7 +301,8 @@ class App extends Component {
                                 key={locale ? locale.locale : 'en'/* Have to refresh for production environment */}>
                             <Switch>
                                 <Route path="/" exact component={TrialCase}/>
-                                <Route path="/graphql-service/:sidebar/:case" component={TrialCase}/>
+                                <Route path="/graphql-service/trial-case/:case" component={TrialCase}/>
+                                <Route path="/graphql-service/my-create/:case" component={UserCreate}/>
                                 <Route path="/wechat-service/:sidebar/:case" component={WechatService}/>
                                 <Route path="/quant-service/" component={QuantService}/>
                                 <Route path="/login" component={Login}/>
@@ -322,34 +322,11 @@ class GraphqlSidebar extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            // getID_url: 'http://123.206.193.98:8999/getuserid',
             userID: getCookie('user_id'),
             show: false
         }
     }
 
-
-    // componentWillMount() {
-    //     let _this = this;
-    //     axios.get(this.state.getID_url)
-    //         .then((res) => {
-    //             if (res.data !== '') {
-    //                 _this.setState({
-    //                     userID: res.data,
-    //                     show: true
-    //                 })
-    //             } else {
-    //                 _this.setState({
-    //                     show: true
-    //                 })
-    //             }
-    //         })
-    //         .catch((err) => {
-    //             console.log(err);
-    //         });
-    // }
-
-
     render() {
         return (
             <Query query={gql(SHOW_ALL_SCHEMA)} variables={{user_id: this.state.userID}}>

src/components/common/application/Application.js

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+
+class Application extends Component {
+
+    render() {
+        return (
+            <div>
+                Application
+            </div>
+        )
+    }
+}
+
+export default Application;

src/components/trialCase/TrialCase.jsx

@@ -6,6 +6,7 @@ import Deploy from '../common/deploy/Deploy';
 import Schema from '../common/schema/Schema';
 import Graphql from "../common/graphql/Graphql";
 import CaseMetabase from "../common/caseMetabase/CaseMetabase";
+import Application from "../common/application/Application";
 import axios from 'axios';
 
 axios.defaults.withCredentials = true;
@@ -39,7 +40,6 @@ class TrialCase extends Component {
     }
 
     switchMenu = (menuName, e) => {
-        // console.log('menuName', menuName, 'e', e);
         this.setState({
             [menuName]: e.key,
         });
@@ -49,7 +49,6 @@ class TrialCase extends Component {
     render() {
         let schemaID = this.props.history.location.state ? this.props.history.location.state.schemaID : "schema_1542243424669_92094965";
         let schemaName = this.props.history.location.state ? this.props.history.location.state.schemaName : "ecommerce";
-        // console.log('schemaID0',schemaID,'schemaName0',schemaName);
         return (
             <div>
                 <Menu
@@ -60,9 +59,10 @@ class TrialCase extends Component {
                     selectedKeys={[this.state.menuLevel2]}
                 >
                     <Menu.Item key="schema">schema</Menu.Item>
+                    <Menu.Item key="application">application</Menu.Item>
                     <Menu.Item key="deploy">deploy</Menu.Item>
                     <Menu.Item key="graphql">graphql</Menu.Item>
-                    <Menu.Item key="graphiql">graphql IDE</Menu.Item>
+                    {/*<Menu.Item key="graphiql">graphql IDE</Menu.Item>*/}
                     <Menu.Item key="metabase">metabase</Menu.Item>
                 </Menu>
 
@@ -74,12 +74,14 @@ class TrialCase extends Component {
                                 switch (this.state.menuLevel2) {
                                     case 'schema':
                                         return <Schema userID={this.state.userID} schemaName={schemaName} schemaID={schemaID} history={this.props.history} location={this.props.location}/>;
+                                    case 'application':
+                                        return <Application />;
                                     case 'deploy':
                                         return <Deploy userID={this.state.userID} schemaID={schemaID} schemaName={schemaName}/>;
                                     case 'graphql':
                                         return <GenerateJs/>;
-                                    case 'graphiql':
-                                        return <Graphql/>;
+                                    // case 'graphiql':
+                                    //     return <Graphql/>;
                                     case 'metabase':
                                         return <CaseMetabase/>;
                                     default:

src/components/userCreate/UserCreate.jsx

@@ -0,0 +1,96 @@
+import React, {Component} from 'react';
+import {Layout, Menu} from 'antd';
+
+import GenerateJs from "../common/generateJs/GenerateJs";
+import Deploy from '../common/deploy/Deploy';
+import Schema from '../common/schema/Schema';
+import Graphql from "../common/graphql/Graphql";
+import CaseMetabase from "../common/caseMetabase/CaseMetabase";
+import axios from 'axios';
+
+axios.defaults.withCredentials = true;
+
+const {Content} = Layout;
+
+class UserCreate extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            menuLevel2: "schema",
+            userID: "ioobot",
+            getID_url: 'http://123.206.193.98:8999/getuserid',
+        }
+    }
+
+    componentWillMount() {
+        let _this = this;
+        axios.get(this.state.getID_url)
+            .then((res) => {
+                if (res.data !== '') {
+                    _this.setState({
+                        userID: res.data
+                    })
+                }
+            })
+            .catch(function (err) {
+                console.log(err);
+            });
+    }
+
+    switchMenu = (menuName, e) => {
+        this.setState({
+            [menuName]: e.key,
+        });
+    };
+
+
+    render() {
+        let schemaID = this.props.history.location.state ? this.props.history.location.state.schemaID : "schema_1542243424669_92094965";
+        let schemaName = this.props.history.location.state ? this.props.history.location.state.schemaName : "ecommerce";
+        return (
+            <div>
+                <Menu
+                    mode="horizontal"
+                    defaultSelectedKeys={['schema']}
+                    style={{padding: '0 24px', position: 'fixed', width: '100%', zIndex: '1',lineHeight:'50px',fontWeight:600}}
+                    onClick={(e) => this.switchMenu('menuLevel2', e)}
+                    selectedKeys={[this.state.menuLevel2]}
+                >
+                    <Menu.Item key="schema">schema</Menu.Item>
+                    <Menu.Item key="deploy">deploy</Menu.Item>
+                    <Menu.Item key="graphql">graphql</Menu.Item>
+                    <Menu.Item key="graphiql">graphql IDE</Menu.Item>
+                    <Menu.Item key="metabase">metabase</Menu.Item>
+                </Menu>
+
+
+                <Layout style={{padding: '24px', zIndex: '0'}}>
+                    <Content style={{padding: '24px', minHeight: 280, background: '#fff', marginTop: '48px'}}>
+                        {
+                            (() => {
+                                switch (this.state.menuLevel2) {
+                                    case 'schema':
+                                        return <Schema userID={this.state.userID} schemaName={schemaName} schemaID={schemaID} history={this.props.history} location={this.props.location}/>;
+                                    case 'deploy':
+                                        return <Deploy userID={this.state.userID} schemaID={schemaID} schemaName={schemaName}/>;
+                                    case 'graphql':
+                                        return <GenerateJs/>;
+                                    case 'graphiql':
+                                        return <Graphql/>;
+                                    case 'metabase':
+                                        return <CaseMetabase/>;
+                                    default:
+                                        return <Graphql/>
+                                }
+                            })()
+                        }
+
+                    </Content>
+                </Layout>
+            </div>
+        )
+    }
+}
+
+export default UserCreate;
+