add bugs

src/schema/change/index.js

@@ -172,6 +172,9 @@ class Change extends Component {
 
 export default Change;
 
+
+// 先搞定 showSchema 再来搞这个
+
 class UpdateSchemaButtons extends Component {
 
 //   update_schema(
@@ -189,13 +192,13 @@ class UpdateSchemaButtons extends Component {
     let varobj = {
       user_id: this.props.userID,
       updatedAt: new Date().getTime(),
-      schemaState: 'create',
+      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) {
-        create_schema(
+        update_schema(
           id: $id,
           user_id: $user_id,
           schemaName: $schemaName,

src/schema/index.js

@@ -4,7 +4,7 @@ import {Row, Col, Input, Icon, Button, Spin} from 'antd';
 import './index.css';
 import Change from './change';
 import gql from "graphql-tag";
-import {Mutation} from "react-apollo";
+import {Mutation, Query} from "react-apollo";
 
 const Search = Input.Search;
 
@@ -184,7 +184,6 @@ class Schema extends Component {
 
   switchTable = (table) => {
     return () => {
-      console.log(table, 'clicked');
       this.setState({
         currentTable: table
       })
@@ -200,44 +199,6 @@ class Schema extends Component {
     });
   };
 
-  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 [];
@@ -261,6 +222,7 @@ class Schema extends Component {
     }
   };
 
+
   render() {
     return (
       <div>
@@ -270,32 +232,7 @@ class Schema extends Component {
               <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 schemaName={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>
-              })
-            }
-
+            <ShowSchemaList fetchSchemas={this.fetchSchemas}/>
           </Col>
 
           <Col span={18}>
@@ -348,9 +285,8 @@ class AddSchemaInput extends Component {
     return (
       <Mutation mutation={ADD_SCHEMA}>
         {(create_schema, {loading, error}) => {
-          // console.log(data);
           if (loading)
-            return <Spin style={{marginLeft: 30, marginTop: 10}}/>
+            return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
           if (error)
             return 'error';
           return (
@@ -385,6 +321,110 @@ class AddSchemaInput extends Component {
   }
 }
 
+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`