修改目录结构

README.md

@@ -4,6 +4,8 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 In the project directory, you can run:
 
+### `npm install`
+
 ### `npm start`
 
 Runs the app in the development mode.<br>

package.json

@@ -70,7 +70,12 @@
     "test": "node scripts/test.js"
   },
   "eslintConfig": {
-    "extends": "react-app"
+    "extends": "react-app",
+    "rules": {
+      "no-undef": 1,
+      "no-restricted-globals": 0,
+      "no-unused-vars": 0
+    }
   },
   "browserslist": [
     ">0.2%",

src/app/index.js → src/components/app/App.jsx

@@ -1,11 +1,11 @@
 import React, {Component} from 'react';
-import Config from '../config';
-import Schema from '../schema';
-import Graphql from "../graphiql";
-import {Layout, Menu, Input, Button} from 'antd';
+import Deploy from '../common/deploy/Deploy';
+import Schema from '../common/schema/Schema';
+import Graphql from "../common/graphql/Graphql";
+import {Layout, Menu, Input, Button, Spin} from 'antd';
 
-import '../graphiql/index.css';
-import logo from './logo.png';
+import '../common/graphql/index.css';
+import logo from '../../images/logo.png';
 
 import gql from "graphql-tag";
 import {Query} from "react-apollo";
@@ -25,7 +25,6 @@ class App extends Component {
         avatar: ''
       }
     };
-
   }
 
   switchPage = (e) => {
@@ -48,7 +47,7 @@ class App extends Component {
         {
           ({loading, error, data}) => {
             if (loading) {
-              return 'loading...';
+              return <Spin style={{marginLeft: 3}}/>
             }
             if (error) {
               return 'error!';
@@ -141,7 +140,7 @@ class App extends Component {
                   case 'schema':
                     return <Schema userID={this.state.userID}/>;
                   case 'config':
-                    return <Config />;
+                    return <Deploy />;
                   default:
                     return <Graphql />
                 }

src/config/index.js → src/components/common/deploy/Deploy.jsx

@@ -3,12 +3,12 @@ import React, {Component} from 'react';
 import {Row, Col, Input} from 'antd';
 
 import './index.css';
-import Diff from './diff';
+import TencentConfig from './tencent/TencentConfig';
 
 const Search = Input.Search;
 
 
-class Config extends Component {
+class Deploy extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -117,7 +117,7 @@ class Config extends Component {
             }
           </Col>
           <Col span={18}>
-            <Diff addConfig={this.addConfig} deleteConfig={this.deleteConfig} currentConfig={this.state.currentConfig}
+            <TencentConfig addConfig={this.addConfig} deleteConfig={this.deleteConfig} currentConfig={this.state.currentConfig}
                   configs={this.state.configs}/>
           </Col>
         </Row>
@@ -127,4 +127,4 @@ class Config extends Component {
 
 }
 
-export default Config;
+export default Deploy;

src/config/diff/index.js → src/components/common/deploy/tencent/TencentConfig.jsx

@@ -4,7 +4,7 @@ import {Input, Select, Button, Row, Col} from 'antd';
 
 const Option = Select.Option;
 
-class Diff extends Component {
+class TencentConfig extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -147,4 +147,4 @@ class Diff extends Component {
   }
 }
 
-export default Diff;
+export default TencentConfig;

src/components/common/schema/Schema.jsx

@@ -0,0 +1,453 @@
+import React, {Component} from 'react';
+
+import {Row, Col, Input, Icon, Button, Spin} from 'antd';
+import './index.css';
+import SchemaChange from './change/SchemaChange';
+import gql from "graphql-tag";
+import {Mutation, Query} from "react-apollo";
+
+const Search = Input.Search;
+
+const idGen = (kind) => {
+    return kind + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
+};
+
+class Schema extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            currentSchema: '',
+            currentTable: '',
+            schemas: [
+                {
+                    name: 'magazineApp',
+                    tables: [
+                        {
+                            name: 'magazine',
+                            remark: 'magazine list',
+                            cols: [
+                                {
+                                    name: 'id',
+                                    type: 'ID',
+                                    desc: 'key'
+                                },
+                                {
+                                    name: 'name',
+                                    type: 'string',
+                                    desc: 'non-null'
+                                },
+                                {
+                                    name: 'suitableGrade',
+                                    type: 'int',
+                                    desc: 'non-null-list'
+                                },
+                                {
+                                    name: 'picture',
+                                    type: 'string',
+                                    desc: 'description'
+                                },
+                                {
+                                    name: 'magazineIntro',
+                                    type: 'string',
+                                    desc: 'description'
+                                },
+                                {
+                                    name: 'unitPrice',
+                                    type: 'float',
+                                    desc: 'description'
+                                },
+                                {
+                                    name: 'enableSub',
+                                    type: 'int',
+                                    desc: 'list'
+                                }
+                            ]
+                        },
+                        {
+                            name: 'slideshow',
+                            remark: 'slideshow list',
+                            cols: [
+                                {
+                                    name: 'id',
+                                    type: 'ID',
+                                    desc: 'key'
+                                },
+                                {
+                                    name: 'briefIntro',
+                                    type: 'string',
+                                    desc: 'description'
+                                },
+                                {
+                                    name: 'picture',
+                                    type: 'string',
+                                    desc: 'description'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'onlineApp',
+                    tables: [
+                        {
+                            name: 'database',
+                            remark: 'database configs',
+                            cols: [
+                                {
+                                    name: 'dbname',
+                                    type: 'string',
+                                    desc: 'non-null'
+                                },
+                                {
+                                    name: 'dbConfig',
+                                    type: 'string',
+                                    desc: 'non-null'
+                                },
+                                {
+                                    name: 'createdAt',
+                                    type: 'string',
+                                    desc: 'description'
+                                },
+                                {
+                                    name: 'updatedAt',
+                                    type: 'string',
+                                    desc: 'description'
+                                }
+                            ]
+                        },
+                        {
+                            name: 'deploy',
+                            remark: 'deploy\'s collections ',
+                            cols: [
+                                {
+                                    name: 'cloud_id',
+                                    type: 'string',
+                                    desc: 'non-null'
+                                },
+                                {
+                                    name: 'schema_id',
+                                    type: 'string',
+                                    desc: 'non-null'
+                                },
+                                {
+                                    name: 'user_id',
+                                    type: 'string',
+                                    desc: 'description'
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ],
+        };
+        if (this.state.schemas.length !== 0) {
+            this.state.currentSchema = this.state.schemas[0].name;
+            this.state.currentTable = this.state.schemas[0].tables[0].name;
+        }
+    }
+
+    addTable = (columns, remark, tableName, schemaName) => {
+        let schemas = this.state.schemas;
+        let targetSchema = schemas.find(obj => obj.name === schemaName);
+        let targetTable = targetSchema.tables.find(obj => obj.name === tableName);
+        if (targetTable === undefined) {
+            targetSchema.tables.push({name: tableName, remark, cols: columns})
+        } else {
+            targetTable.remark = remark;
+            targetTable.cols = columns;
+        }
+        this.setState({
+            schemas
+        })
+    };
+
+    deleteTable = (tableName, schemaName) => {
+        let schemas = this.state.schemas;
+        let targetSchemaIndex = schemas.findIndex(obj => obj.name === schemaName);
+        let targetTableIndex = schemas.find(obj => obj.name === schemaName).tables.findIndex(obj => obj.name === tableName);
+        schemas[targetSchemaIndex].tables.splice(targetTableIndex, 1);
+        this.setState({
+            schemas
+        });
+
+        let tables = this.state.schemas.find(obj => obj.name === this.state.currentSchema).tables;
+        if (tables.length !== 0) {
+            this.setState({
+                currentTable: tables[0].name
+            })
+        } else {
+            this.setState({
+                currentTable: ''
+            })
+        }
+    };
+
+    switchTable = (table) => {
+        return () => {
+            this.setState({
+                currentTable: table
+            })
+        };
+    };
+
+    addSchema = (name) => {
+        this.setState({
+            schemas: [...this.state.schemas, {
+                name,
+                tables: []
+            }]
+        });
+    };
+
+    findColumns = () => {
+        let schema = this.state.schemas.find(schema => schema.name === this.state.currentSchema);
+        if (schema === undefined) return [];
+        //  if user insert a new schema, after merge to schemas with a {name: 'xx', tables: []}
+        //  you can find the following table is undefined.
+        //  so give a state here if you want add a tip!
+        else {
+            let table = schema.tables.find(table => table.name === this.state.currentTable);
+            if (table === undefined) return [];
+            else return table.cols;
+        }
+    };
+
+    findRemark = () => {
+        let schema = this.state.schemas.find(schema => schema.name === this.state.currentSchema);
+        if (schema === undefined) return '';
+        else {
+            let table = schema.tables.find(table => table.name === this.state.currentTable);
+            if (table === undefined) return '';
+            else return table.remark;
+        }
+    };
+
+
+    render() {
+        return (
+            <div>
+              <Row>
+                <Col span={6}>
+                  <div className='wrapper'>
+                    <div className='current'>{this.state.currentSchema}</div>
+                    <AddSchemaInput userID={this.props.userID} addSchema={this.addSchema}/>
+                  </div>
+                  <ShowSchemaList fetchSchemas={this.fetchSchemas}/>
+                </Col>
+
+                <Col span={18}>
+                    {
+                        this.state.currentTable === 'add' ?
+                            <SchemaChange currentSchema={this.state.currentSchema} columns={[]} remark='' addTable={this.addTable}
+                                    deleteTable={this.deleteTable}/> :
+                            <SchemaChange currentSchema={this.state.currentSchema} currentTable={this.state.currentTable}
+                                    columns={this.findColumns()} remark={this.findRemark()} addTable={this.addTable}
+                                    deleteTable={this.deleteTable}/>
+                    }
+                </Col>
+              </Row>
+            </div>
+        )
+    }
+}
+
+export default Schema;
+
+class AddSchemaInput extends Component {
+
+    render() {
+        let varobj = {
+            id: idGen('schema'),
+            user_id: this.props.userID,
+            createdAt: new Date().getTime(),
+            updatedAt: '',
+            schemaState: 'create',
+        };
+
+        const ADD_SCHEMA = gql`
+            mutation SCHEMA($id: ID!, $user_id: String!, $schemaName: String!, $schemaData: String!, $createdAt: String, $updatedAt: String, $schemaState: String) {
+                create_schema(
+                    id: $id,
+                    user_id: $user_id,
+                    schemaName: $schemaName,
+                    createdAt: $createdAt,
+                    updatedAt: $updatedAt,
+                    schemaData: $schemaData,
+                    schemaState: $schemaState
+                ) {
+                    id,
+                    schemaName
+                }
+            }
+        `;
+
+
+        return (
+            <Mutation mutation={ADD_SCHEMA}>
+                {(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: ''
+                                  });
+                                  this.props.addSchema(value);
+                                  create_schema({
+                                      variables: {
+                                          ...varobj,
+                                          schemaName: value,
+                                          schemaData: {
+                                              value,
+                                              tables: []
+                                          }
+                                      }
+                                  });
+                              }}
+                          />
+                        </div>)
+                }}
+            </Mutation>
+        )
+    }
+}
+
+class ShowSchemaList extends Component {
+
+    switchSchema = (schema) => {
+        return () => {
+            this.setState({
+                currentSchema: schema
+            });
+            // when this schema has no table, show new
+            if (this.state.schemas.find(obj => obj.name === schema).tables.length === 0) {
+                this.setState({
+                    currentTable: ''
+                })
+            }
+        }
+    };
+
+    deleteSchema = (e, schemaName) => {
+        e.stopPropagation();
+        let schemas = this.state.schemas;
+        let targetSchemaIndex = schemas.findIndex(obj => obj.name === schemaName);
+        if (targetSchemaIndex !== -1) {
+            schemas.splice(targetSchemaIndex, 1);
+            this.setState({
+                schemas
+            })
+        }
+        if (this.state.schemas.length !== 0) {
+            this.setState({
+                currentSchema: this.state.schemas[0].name,
+                currentTable: this.state.schemas[0].tables[0] ? this.state.schemas[0].tables[0].name : ''
+            })
+        } else {
+            this.setState({
+                currentSchema: '',
+                currentTable: ''
+            })
+        }
+
+    };
+
+    render() {
+        const SHOW_SCHEMA = gql`
+            query SCHEMA($user_id: String) {
+                schema_by_props(user_id: $user_id) {
+                    schemaData
+                    schemaName
+                }
+            }
+        `;
+        return (
+            <Query query={SHOW_SCHEMA} variables={{user_id: this.props.userID}}>
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return <Spin style={{marginLeft: 3}}/>
+                        }
+                        if (error) {
+                            return 'error!';
+                        }
+                        console.log(data);
+                        if (data.schema_by_props.length === 0)
+                            return (
+                                <div>
+                                  <span>no schemas, create one</span>
+                                </div>
+                            );
+                        else {
+                            console.log('getttttttttt', data);
+                            return (
+                                <div>
+                                    {
+                                        data.schema_by_props.map((schema) => {
+                                            return <div key={schema.schemaName} className='title' onClick={this.switchSchema(schema.schemaName)}>
+                                              <Row>
+                                                <Col span={20}>{schema.schemaName}</Col>
+                                                <Col span={4}>
+                                                  <Button onClick={() => this.setState({currentTable: 'add'})} type="primary"
+                                                          shape="circle" icon="plus" size='small'/>
+                                                  <DeleteSchemaButton schemaName={schema.schemaName} deleteSchema={this.deleteSchema}/>
+                                                </Col>
+                                              </Row>
+
+
+                                                {
+                                                    schema.tables.map((table) =>
+                                                        <p onClick={this.switchTable(table.name)} key={table.name} className='show'>
+                                                          <Icon type="ordered-list" theme="outlined"/> {table.name}
+                                                          <span className='remark'><i>   {table.remark}</i></span>
+                                                        </p>
+                                                    )
+                                                }
+                                            </div>
+                                        })
+                                    }
+                                </div>
+                            );
+                        }
+                    }
+                }
+            </Query>
+        )
+    }
+}
+
+class DeleteSchemaButton extends Component {
+    render() {
+        const DELETE_SCHEMA = gql`
+            mutation SCHEMA($schemaName: String) {
+                delete_schema(schemaName: $schemaName)
+            }
+        `;
+        return (
+            <Mutation mutation={DELETE_SCHEMA}>
+                {(delete_schema, {loading, error}) => {
+                    if (error)
+                        return 'error';
+                    if (loading)
+                        return <Spin style={{marginLeft: 3}}/>;
+                    return (
+                        <Button onClick={(e) => {
+                            this.props.deleteSchema(e, this.props.schemaName);
+                            delete_schema({variables: {schemaName: this.props.schemaName}});
+                        }} type="danger" shape="circle" icon="delete" size='small' style={{marginLeft: 3}}/>
+                    )
+                }}
+            </Mutation>
+        )
+    }
+}
+

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

@@ -0,0 +1,219 @@
+import React, {Component} from 'react';
+
+import {Select, Input, Icon, Button, notification} from 'antd';
+import gql from "graphql-tag";
+
+const Option = Select.Option;
+
+class SchemaChange extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            currentSchema: props.currentSchema,
+            currentTable: props.currentTable,
+            remark: props.remark,
+            columns: props.columns,
+            newColName: '',
+            newColType: 'type',
+            types: ['ID', 'String', 'Int', 'Float'],
+            descriptions: ['description', 'key', 'non-null', 'non-null-list']
+        }
+    }
+
+
+    handleNameChange = (index) => {
+        return (e) => {
+            let columns = this.state.columns;
+            columns[index].name = e.target.value;
+            this.setState({
+                columns
+            })
+        };
+    };
+
+    handleNameNew = (e) => {
+        this.setState({
+            newColName: e.target.value,
+            showNewColumn: false
+        })
+    };
+
+    handleTypeChange = (index) => {
+        return (value) => {
+            let columns = this.state.columns;
+            columns[index].type = value;
+            this.setState({
+                columns
+            });
+        }
+    };
+
+    handleTypeNew = (value) => {
+        if (this.state.newColName !== '') {
+            let columns = this.state.columns;
+            columns.push({name: this.state.newColName, type: value, desc: 'description'});
+            this.setState({
+                columns,
+                newColName: '',
+                newColType: 'type'
+            })
+        } else {
+            notification['warning']({
+                message: 'Notification',
+                description: 'Input a name first.',
+            });
+        }
+    };
+
+    handleDescChange = (index) => {
+        return (value) => {
+            let columns = this.state.columns;
+            columns[index].desc = value;
+            this.setState({
+                columns
+            });
+        };
+    };
+
+    handleColDelete = (index) => {
+        return () => {
+            let columns = this.state.columns;
+            columns.splice(index, 1);
+            this.setState({
+                columns
+            });
+        }
+    };
+
+    componentWillReceiveProps(next) {
+        this.setState({
+            currentTable: next.currentTable,
+            currentSchema: next.currentSchema,
+            columns: next.columns,
+            remark: next.remark
+        });
+    };
+
+    render() {
+        return (
+            <div style={{margin: 20}}>
+              <div style={{marginBottom: 20}}>
+                <span className='table-title'> Table name</span>
+                <Input value={this.state.currentTable} placeholder="table_name" style={{width: 120}} onChange={(e) => {
+                    this.setState({currentTable: e.target.value})
+                }}/>
+
+              </div>
+
+              <div style={{marginBottom: 20}}>
+                <span className='table-title'> Table remark</span>
+                <Input value={this.state.remark} placeholder="table_remark" style={{width: 250}} onChange={(e) => {
+                    this.setState({remark: e.target.value})
+                }}/>
+              </div>
+
+              <div>
+                <span className='table-title'> Table columns</span>
+                <span className='column-title'>name</span>
+                <span className='column-title'>type</span>
+                <span className='column-title'>description</span>
+                  {
+                      this.state.columns.map((col, index) =>
+                          <div key={index} style={{marginBottom: 3}}>
+                            <Input style={{width: 120, marginRight: 10}} value={col.name} onChange={this.handleNameChange(index)}/>
+                            <Select defaultValue={col.type} style={{width: 120, marginRight: 10}}
+                                    onChange={this.handleTypeChange(index)}>
+                                {
+                                    this.state.types.map((value) =>
+                                        <Option key={Math.random()} value={value.toLowerCase()}>{value}</Option>
+                                    )
+                                }
+                            </Select>
+                            <Select defaultValue={col.desc} style={{width: 120, marginRight: 10}}
+                                    onChange={this.handleDescChange(index)}>
+                                {
+                                    this.state.descriptions.map((value) =>
+                                        <Option key={Math.random()} value={value.toLowerCase()}>{value}</Option>
+                                    )
+                                }
+                            </Select>
+                            <Icon type="delete" theme="outlined" style={{cursor: 'pointer'}}
+                                  onClick={this.handleColDelete(index)}/>
+                          </div>
+                      )
+                  }
+                <div>
+                  <Input placeholder="column_name" style={{width: 120, marginRight: 10}} onChange={this.handleNameNew}
+                         value={this.state.newColName}/>
+                  <Select defaultValue="type" style={{width: 120, marginRight: 10}} onChange={this.handleTypeNew}
+                          value={this.state.newColType}>
+                      {
+                          this.state.types.map((value) =>
+                              <Option key={Math.random()} value={value.toLowerCase()}>{value}</Option>
+                          )
+                      }
+                  </Select>
+                </div>
+              </div>
+              <div style={{marginTop: 10}}>
+                <Button type="primary" onClick={() => {
+                    this.props.addTable(this.state.columns, this.state.remark, this.state.currentTable, this.state.currentSchema);
+                }}>
+                  SUBMIT
+                </Button>
+                <Button style={{marginLeft: 10}} type="danger" onClick={() => {
+                    this.props.deleteTable(this.state.currentTable, this.state.currentSchema);
+                }}>DELETE</Button>
+              </div>
+            </div>
+        )
+    }
+}
+
+export default SchemaChange;
+
+
+// 先搞定 showSchema 再来搞这个
+
+class UpdateSchemaButtons extends Component {
+
+//   update_schema(
+//     createdAt: String
+//   id: ID!
+//   schemaData: String
+//   schemaName: String
+//   schemaState: String
+//   updatedAt: String
+//   user_id: String
+// ): Schema
+
+
+    render(){
+        let varobj = {
+            user_id: this.props.userID,
+            updatedAt: new Date().getTime(),
+            schemaState: 'updated',
+            id: this.props.schemaID
+        };
+
+        const ADD_SCHEMA = gql`
+            mutation SCHEMA($id: ID!, $user_id: String!, $schemaName: String!, $schemaData: String!, $createdAt: String, $updatedAt: String, $schemaState: String) {
+                update_schema(
+                    id: $id,
+                    user_id: $user_id,
+                    schemaName: $schemaName,
+                    createdAt: $createdAt,
+                    updatedAt: $updatedAt,
+                    schemaData: $schemaData,
+                    schemaState: $schemaState
+                ) {
+                    id,
+                    schemaName
+                }
+            }
+        `;
+        return (
+            <div>1</div>
+        )
+    }
+}

src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './app';
+import App from './components/app/App'
 import * as serviceWorker from './serviceWorker';
 
 import ApolloClient from "apollo-boost";
@@ -10,6 +10,7 @@ import { ApolloProvider } from "react-apollo";
 const client = new ApolloClient({
   // xySchema api
   uri: "http://service-eucrnpse-1254337200.ap-guangzhou.apigateway.myqcloud.com/release/graphql"
+  // uri: "http://localhost:3000/graphql"
 });
 
 ReactDOM.render(<ApolloProvider client={client}><App /></ApolloProvider>, document.getElementById('root'));

src/schema/change/index.js

@@ -1,172 +0,0 @@
-import React, {Component} from 'react';
-
-import {Select, Input, Icon, Button, notification} from 'antd';
-
-const Option = Select.Option;
-
-class Change extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      currentSchema: props.currentSchema,
-      currentTable: props.currentTable,
-      remark: props.remark,
-      columns: props.columns,
-      newColName: '',
-      newColType: 'type',
-      types: ['ID', 'String', 'Int', 'Float'],
-      descriptions: ['description', 'key', 'non-null', 'non-null-list']
-    }
-  }
-
-
-  handleNameChange = (index) => {
-    return (e) => {
-      let columns = this.state.columns;
-      columns[index].name = e.target.value;
-      this.setState({
-        columns
-      })
-    };
-  };
-
-  handleNameNew = (e) => {
-    this.setState({
-      newColName: e.target.value,
-      showNewColumn: false
-    })
-  };
-
-  handleTypeChange = (index) => {
-    return (value) => {
-      let columns = this.state.columns;
-      columns[index].type = value;
-      this.setState({
-        columns
-      });
-    }
-  };
-
-  handleTypeNew = (value) => {
-    if (this.state.newColName !== '') {
-      let columns = this.state.columns;
-      columns.push({name: this.state.newColName, type: value, desc: 'description'});
-      this.setState({
-        columns,
-        newColName: '',
-        newColType: 'type'
-      })
-    } else {
-      notification['warning']({
-        message: 'Notification',
-        description: 'Input a name first.',
-      });
-    }
-  };
-
-  handleDescChange = (index) => {
-    return (value) => {
-      let columns = this.state.columns;
-      columns[index].desc = value;
-      this.setState({
-        columns
-      });
-    };
-  };
-
-  handleColDelete = (index) => {
-    return () => {
-      let columns = this.state.columns;
-      columns.splice(index, 1);
-      this.setState({
-        columns
-      });
-    }
-  };
-
-  componentWillReceiveProps(next) {
-    this.setState({
-      currentTable: next.currentTable,
-      currentSchema: next.currentSchema,
-      columns: next.columns,
-      remark: next.remark
-    });
-  };
-
-  render() {
-    return (
-      <div style={{margin: 20}}>
-        <div style={{marginBottom: 20}}>
-          <span className='table-title'> Table name</span>
-          <Input value={this.state.currentTable} placeholder="table_name" style={{width: 120}} onChange={(e) => {
-            this.setState({currentTable: e.target.value})
-          }}/>
-
-        </div>
-
-        <div style={{marginBottom: 20}}>
-          <span className='table-title'> Table remark</span>
-          <Input value={this.state.remark} placeholder="table_remark" style={{width: 250}} onChange={(e) => {
-            this.setState({remark: e.target.value})
-          }}/>
-        </div>
-
-        <div>
-          <span className='table-title'> Table columns</span>
-          <span className='column-title'>name</span>
-          <span className='column-title'>type</span>
-          <span className='column-title'>description</span>
-          {
-            this.state.columns.map((col, index) =>
-              <div key={index} style={{marginBottom: 3}}>
-                <Input style={{width: 120, marginRight: 10}} value={col.name} onChange={this.handleNameChange(index)}/>
-                <Select defaultValue={col.type} style={{width: 120, marginRight: 10}}
-                        onChange={this.handleTypeChange(index)}>
-                  {
-                    this.state.types.map((value) =>
-                      <Option key={Math.random()} value={value.toLowerCase()}>{value}</Option>
-                    )
-                  }
-                </Select>
-                <Select defaultValue={col.desc} style={{width: 120, marginRight: 10}}
-                        onChange={this.handleDescChange(index)}>
-                  {
-                    this.state.descriptions.map((value) =>
-                      <Option key={Math.random()} value={value.toLowerCase()}>{value}</Option>
-                    )
-                  }
-                </Select>
-                <Icon type="delete" theme="outlined" style={{cursor: 'pointer'}}
-                      onClick={this.handleColDelete(index)}/>
-              </div>
-            )
-          }
-          <div>
-            <Input placeholder="column_name" style={{width: 120, marginRight: 10}} onChange={this.handleNameNew}
-                   value={this.state.newColName}/>
-            <Select defaultValue="type" style={{width: 120, marginRight: 10}} onChange={this.handleTypeNew}
-                    value={this.state.newColType}>
-              {
-                this.state.types.map((value) =>
-                  <Option key={Math.random()} value={value.toLowerCase()}>{value}</Option>
-                )
-              }
-            </Select>
-          </div>
-        </div>
-        <div style={{marginTop: 10}}>
-          <Button type="primary" onClick={() => {
-            this.props.addTable(this.state.columns, this.state.remark, this.state.currentTable, this.state.currentSchema);
-          }}>
-            SUBMIT
-          </Button>
-          <Button style={{marginLeft: 10}} type="danger" onClick={() => {
-            this.props.deleteTable(this.state.currentTable, this.state.currentSchema);
-          }}>DELETE</Button>
-        </div>
-      </div>
-    )
-  }
-}
-
-export default Change;

src/schema/index.js

@@ -1,409 +0,0 @@
-import React, {Component} from 'react';
-
-import {Row, Col, Input, Icon, Button} from 'antd';
-import './index.css';
-import Change from './change';
-import gql from "graphql-tag";
-import {Mutation} from "react-apollo";
-
-const Search = Input.Search;
-
-const idGen = (kind) => {
-  return kind + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
-};
-
-class Schema extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      currentSchema: '',
-      currentTable: '',
-      schemas: [
-        {
-          name: 'magazineApp',
-          tables: [
-            {
-              name: 'magazine',
-              remark: 'magazine list',
-              cols: [
-                {
-                  name: 'id',
-                  type: 'ID',
-                  desc: 'key'
-                },
-                {
-                  name: 'name',
-                  type: 'string',
-                  desc: 'non-null'
-                },
-                {
-                  name: 'suitableGrade',
-                  type: 'int',
-                  desc: 'non-null-list'
-                },
-                {
-                  name: 'picture',
-                  type: 'string',
-                  desc: 'description'
-                },
-                {
-                  name: 'magazineIntro',
-                  type: 'string',
-                  desc: 'description'
-                },
-                {
-                  name: 'unitPrice',
-                  type: 'float',
-                  desc: 'description'
-                },
-                {
-                  name: 'enableSub',
-                  type: 'int',
-                  desc: 'list'
-                }
-              ]
-            },
-            {
-              name: 'slideshow',
-              remark: 'slideshow list',
-              cols: [
-                {
-                  name: 'id',
-                  type: 'ID',
-                  desc: 'key'
-                },
-                {
-                  name: 'briefIntro',
-                  type: 'string',
-                  desc: 'description'
-                },
-                {
-                  name: 'picture',
-                  type: 'string',
-                  desc: 'description'
-                }
-              ]
-            }
-          ]
-        },
-        {
-          name: 'onlineApp',
-          tables: [
-            {
-              name: 'database',
-              remark: 'database configs',
-              cols: [
-                {
-                  name: 'dbname',
-                  type: 'string',
-                  desc: 'non-null'
-                },
-                {
-                  name: 'dbConfig',
-                  type: 'string',
-                  desc: 'non-null'
-                },
-                {
-                  name: 'createdAt',
-                  type: 'string',
-                  desc: 'description'
-                },
-                {
-                  name: 'updatedAt',
-                  type: 'string',
-                  desc: 'description'
-                }
-              ]
-            },
-            {
-              name: 'deploy',
-              remark: 'deploy\'s collections ',
-              cols: [
-                {
-                  name: 'cloud_id',
-                  type: 'string',
-                  desc: 'non-null'
-                },
-                {
-                  name: 'schema_id',
-                  type: 'string',
-                  desc: 'non-null'
-                },
-                {
-                  name: 'user_id',
-                  type: 'string',
-                  desc: 'description'
-                }
-              ]
-            }
-          ]
-        }
-      ],
-    };
-    if (this.state.schemas.length !== 0) {
-      this.state.currentSchema = this.state.schemas[0].name;
-      this.state.currentTable = this.state.schemas[0].tables[0].name;
-    }
-  }
-
-  addTable = (columns, remark, tableName, schemaName) => {
-    let schemas = this.state.schemas;
-    let targetSchema = schemas.find(obj => obj.name === schemaName);
-    let targetTable = targetSchema.tables.find(obj => obj.name === tableName);
-    if (targetTable === undefined) {
-      targetSchema.tables.push({name: tableName, remark, cols: columns})
-    } else {
-      targetTable.remark = remark;
-      targetTable.cols = columns;
-    }
-    this.setState({
-      schemas
-    })
-  };
-
-  deleteTable = (tableName, schemaName) => {
-    let schemas = this.state.schemas;
-    let targetSchemaIndex = schemas.findIndex(obj => obj.name === schemaName);
-    let targetTableIndex = schemas.find(obj => obj.name === schemaName).tables.findIndex(obj => obj.name === tableName);
-    schemas[targetSchemaIndex].tables.splice(targetTableIndex, 1);
-    this.setState({
-      schemas
-    });
-
-    let tables = this.state.schemas.find(obj => obj.name === this.state.currentSchema).tables;
-    if (tables.length !== 0) {
-      this.setState({
-        currentTable: tables[0].name
-      })
-    } else {
-      this.setState({
-        currentTable: ''
-      })
-    }
-  };
-
-  switchTable = (table) => {
-    return () => {
-      console.log(table, 'clicked');
-      this.setState({
-        currentTable: table
-      })
-    };
-  };
-
-  addSchema = (name) => {
-    this.setState({
-      schemas: [...this.state.schemas, {
-        name,
-        tables: []
-      }]
-    });
-  };
-
-  deleteSchema = (e, schemaName) => {
-    e.stopPropagation();
-    let schemas = this.state.schemas;
-    let targetSchemaIndex = schemas.findIndex(obj => obj.name === schemaName);
-    if (targetSchemaIndex !== -1) {
-      schemas.splice(targetSchemaIndex, 1);
-      this.setState({
-        schemas
-      })
-    }
-    if (this.state.schemas.length !== 0) {
-      this.setState({
-        currentSchema: this.state.schemas[0].name,
-        currentTable: this.state.schemas[0].tables[0] ? this.state.schemas[0].tables[0].name : ''
-      })
-    } else {
-      this.setState({
-        currentSchema: '',
-        currentTable: ''
-      })
-    }
-
-  };
-
-  switchSchema = (schema) => {
-    return () => {
-      this.setState({
-        currentSchema: schema
-      });
-      // when this schema has no table, show new
-      if (this.state.schemas.find(obj => obj.name === schema).tables.length === 0) {
-        this.setState({
-          currentTable: ''
-        })
-      }
-    }
-  };
-
-  findColumns = () => {
-    let schema = this.state.schemas.find(schema => schema.name === this.state.currentSchema);
-    if (schema === undefined) return [];
-    //  if user insert a new schema, after merge to schemas with a {name: 'xx', tables: []}
-    //  you can find the following table is undefined.
-    //  so give a state here if you want add a tip!
-    else {
-      let table = schema.tables.find(table => table.name === this.state.currentTable);
-      if (table === undefined) return [];
-      else return table.cols;
-    }
-  };
-
-  findRemark = () => {
-    let schema = this.state.schemas.find(schema => schema.name === this.state.currentSchema);
-    if (schema === undefined) return '';
-    else {
-      let table = schema.tables.find(table => table.name === this.state.currentTable);
-      if (table === undefined) return '';
-      else return table.remark;
-    }
-  };
-
-  render() {
-    return (
-      <div>
-        <Row>
-          <Col span={6}>
-            <div className='wrapper'>
-              <div className='current'>{this.state.currentSchema}</div>
-              <AddSchemaInput userID={this.props.userID} addSchema={this.addSchema}/>
-            </div>
-
-            {
-              this.state.schemas.map((schema) => {
-                return <div key={schema.name} className='title' onClick={this.switchSchema(schema.name)}>
-                  <Row>
-                    <Col span={20}>{schema.name}</Col>
-                    <Col span={4}>
-                      <Button onClick={() => this.setState({currentTable: 'add'})} type="primary"
-                              shape="circle" icon="plus" size='small'/>
-                      <DeleteSchemaButton shcemaName={schema.name} deleteSchema={this.deleteSchema}/>
-                    </Col>
-                  </Row>
-
-
-                  {
-                    schema.tables.map((table) =>
-                      <p onClick={this.switchTable(table.name)} key={table.name} className='show'>
-                        <Icon type="ordered-list" theme="outlined"/> {table.name}
-                        <span className='remark'><i>   {table.remark}</i></span>
-                      </p>
-                    )
-                  }
-                </div>
-              })
-            }
-
-          </Col>
-
-          <Col span={18}>
-            {
-              this.state.currentTable === 'add' ?
-                <Change currentSchema={this.state.currentSchema} columns={[]} remark='' addTable={this.addTable}
-                        deleteTable={this.deleteTable}/> :
-                <Change currentSchema={this.state.currentSchema} currentTable={this.state.currentTable}
-                        columns={this.findColumns()} remark={this.findRemark()} addTable={this.addTable}
-                        deleteTable={this.deleteTable}/>
-            }
-          </Col>
-        </Row>
-      </div>
-    )
-  }
-}
-
-export default Schema;
-
-class AddSchemaInput extends Component {
-  render() {
-    let varobj = {
-      id: idGen('schema'),
-      user_id: this.props.userID,
-      createdAt: Date().now,
-      updatedAt: '',
-      schemaState: 'create',
-    };
-
-    const ADD_SCHEMA = gql`
-      mutation SCHEMA($id: ID!, $user_id: String!, $schemaName: String!, $schemaData: String!, $createdAt: String, $updatedAt: String, $schemaState: String) {
-        create_schema(
-          id: $id,
-          user_id: $user_id,
-          schemaName: $schemaName,
-          createdAt: $createdAt,
-          updatedAt: $updatedAt,
-          schemaData: $schemaData,
-          schemaState: $schemaState
-        ) {
-            id,
-            schemaName
-        }
-      }
-    `;
-
-
-    return (
-      <Mutation mutation={ADD_SCHEMA}>
-        {(create_schema, {data}) => {
-          // console.log(data);
-          return (
-            <div>
-              <Search
-                className='add-input'
-                placeholder="input schema_name"
-                enterButton="Confirm"
-                onSearch={value => {
-                  this.setState({
-                    switch: true,
-                    currentSchema: value,
-                    currentTable: ''
-                  });
-                  this.props.addSchema(value);
-                  create_schema({
-                    variables: {
-                      ...varobj,
-                      schemaName: value,
-                      schemaData: {
-                        value,
-                        tables: []
-                      }
-                    }
-                  });
-                }}
-              />
-            </div>)
-        }}
-      </Mutation>
-    )
-  }
-}
-
-class DeleteSchemaButton extends Component {
-  render() {
-    const DELETE_SCHEMA = gql`
-      mutation SCHEMA($schemaName: String) {
-        delete_schema(schemaName: $schemaName) 
-        {
-            id,
-            schemaName
-        }
-      }
-    `;
-    return (
-      <Mutation mutation={DELETE_SCHEMA}>
-        {(delete_schema, {data}) => {
-          return (
-            <Button onClick={(e) => {
-              this.props.deleteSchema(e, this.props.schemaName);
-              delete_schema({variables: {schemaName: this.props.schemaName}});
-              console.log(data);
-            }} type="danger" shape="circle" icon="delete" size='small' style={{marginLeft: 3}}/>
-          )
-        }}
-      </Mutation>
-    )
-  }
-}
-