add generateJs

src/components/app/App.jsx

@@ -1,27 +1,31 @@
 import React, {Component} from 'react';
-import Deploy from '../common/deploy/Deploy';
-import Schema from '../common/schema/Schema';
-import Graphql from "../common/graphql/Graphql";
-
-import {Layout, Menu, Input, Button, Spin, Breadcrumb, Icon} from 'antd';
+import {Layout, Menu, Input, Button, Spin,Breadcrumb, Icon,Radio,LocaleProvider  } from 'antd';
 import {BrowserRouter as Router, Route, Link} from "react-router-dom";
-
-import {Query} from "react-apollo";
 import gql from "graphql-tag";
+import {Query} from "react-apollo";
+import moment from 'moment';
+import 'moment/locale/zh-cn';
 
-import '../common/graphql/index.css';
+import Deploy from '../common/deploy/Deploy';
+import Schema from '../common/schema/Schema';
+import Graphql from "../common/graphql/Graphql";
+import GenerateJs from "../common/generateJs/GenerateJs";
+import zhCN from 'antd/lib/locale-provider/zh_CN';
 import logo from '../../images/logo.png';
+import '../common/graphql/index.css';
 import './index.css'
 
-const {SubMenu} = Menu;
-const {Header, Content, Sider} = Layout;
+const { SubMenu } = Menu;
+const { Header, Content, Sider } = Layout;
+moment.locale('en');
 
 class App extends Component {
     constructor() {
         super();
         this.state = {
-            menuLevel1: "cloud-function",
-            sideBar: "e-commerce",
+            menuLevel1:"cloud-function",
+            menuLevel2:"schema",
+            sideBar:"e-commerce",
             userID: '',
             hasLogin: false,
             user: {
@@ -29,13 +33,13 @@ class App extends Component {
                 avatar: ''
             },
             collapsed: false,
-            inlineCollapsed: false
+            inlineCollapsed:false,
+            locale: null,
         };
     }
-
     onCollapse = (collapsed) => {
         console.log(collapsed);
-        this.setState({collapsed});
+        this.setState({ collapsed });
     };
 
     switchMenu = (menuName, e) => {
@@ -45,6 +49,16 @@ class App extends Component {
         });
     };
 
+    changeLocale = (e) => {
+        const localeValue = e.target.value;
+        this.setState({ locale: localeValue });
+        if (!localeValue) {
+            moment.locale('en');
+        } else {
+            moment.locale('zh-cn');
+        }
+    };
+
     login = (id) => {
         const GET_USER = gql`
             query USER($id: ID!) {
@@ -118,6 +132,13 @@ class App extends Component {
                             <Menu.Item key="monitor-notification"><Link to="/monitor-notification/">Monitor Notification</Link></Menu.Item>
                         </Menu>
 
+                        {/*<div className="change-locale">*/}
+                            {/*<span style={{ marginRight: 16 }}>Change locale of components: </span>*/}
+                            {/*<Radio.Group defaultValue={undefined} onChange={this.changeLocale}>*/}
+                                {/*<Radio.Button key="en" value={undefined}>English</Radio.Button>*/}
+                                {/*<Radio.Button key="cn" value={zhCN}>中文</Radio.Button>*/}
+                            {/*</Radio.Group>*/}
+                        {/*</div>*/}
                         {/*<div className='login'>*/}
                             {/*{*/}
                                 {/*this.state.hasLogin ?*/}
@@ -238,7 +259,7 @@ class App extends Component {
                             </Menu>
                         </Sider>
 
-                        <Layout style={{marginTop: '64px'}}>
+                        <Layout style={{marginTop: '64px', zIndex: '0'}}>
                             <Route path="/" exact component={CloudFunction}/>
                             <Route path="/cloud-function/" component={CloudFunction}/>
                             <Route path="/data-storage/" component={DataStorge}/>
@@ -288,34 +309,22 @@ class CloudFunction extends Component {
                     <Menu.Item key="notification">notification</Menu.Item>
                 </Menu>
 
-                <Layout style={{padding: '24px', zIndex: '0'}}>
-                    {/*<Sider width={200} style={{ background: '#fff' }}>*/}
-                    {/*<Menu*/}
-                    {/*mode="inline"*/}
-                    {/*defaultSelectedKeys={['1']}*/}
-                    {/*defaultOpenKeys={['sub1']}*/}
-                    {/*style={{ height: '100%' }}*/}
-                    {/*>*/}
-                    {/*<Menu.Item key="1">Query</Menu.Item>*/}
-                    {/*<Menu.Item key="2">Mutation</Menu.Item>*/}
-                    {/*</Menu>*/}
-                    {/*</Sider>*/}
-                    <Content
-                        style={{padding: '24px', minHeight: 280, background: '#fff', marginTop: '48px'}}>
-                        <div>
-                            {(() => {
-                                switch (this.state.menuLevel2) {
-                                    case 'schema':
-                                        return <Schema userID={this.state.userID}/>;
-                                    case 'deploy':
-                                        return <Deploy/>;
-                                    case 'graphiql':
-                                        return <Graphql/>;
-                                    default:
-                                        return <Graphql/>
-                                }
-                            })()}
-                        </div>
+                <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}/>;
+                                case 'deploy':
+                                    return <Deploy />;
+                                case 'graphql':
+                                    return <GenerateJs />;
+                                case 'graphiql':
+                                    return <Graphql />;
+                                default:
+                                    return <Graphql />
+                            }
+                        })()}
                     </Content>
                 </Layout>
             </div>

src/components/app/index.css

@@ -6,3 +6,6 @@
     margin: 16px 28px 16px 0;
     float: left;
 }
+.change-locale {
+    margin-bottom: 16px;
+}

src/components/common/generateJs/GenerateJs.jsx

@@ -0,0 +1,31 @@
+import React, {Component} from 'react';
+
+import {Tabs} from 'antd';
+
+const TabPane = Tabs.TabPane;
+
+class GenerateJs extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+
+        };
+    }
+
+    render() {
+        return (
+            <div>
+                <Tabs
+                    defaultActiveKey="query"
+                    tabPosition="left"
+                    style={{ height: 220 }}
+                >
+                    <TabPane tab="Query" key="query">Query Graphql</TabPane>
+                    <TabPane tab="Mutation" key="mutation">Mutation Graphql</TabPane>
+                </Tabs>
+            </div>
+        )
+    }
+}
+
+export default GenerateJs;