add 'delete table'

.idea/workspace.xml

@@ -2,19 +2,11 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="93d86d6a-0860-401c-996e-30fc26553ffc" name="Default Changelist" comment="">
-      <change afterPath="$PROJECT_DIR$/src/app/index.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/config/index.css" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/config/index.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/schema/change/index.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/schema/index.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/App.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/config.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/graphiql.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/graphiql/index.css" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/logo.png" beforeDir="false" afterPath="$PROJECT_DIR$/public/logo.png" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/schema.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/schema/index.css" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/schema.js" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/app/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/index.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/config/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/config/index.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/schema/change/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/schema/change/index.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/schema/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/schema/index.js" afterDir="false" />
     </list>
     <ignored path="$PROJECT_DIR$/.tmp/" />
     <ignored path="$PROJECT_DIR$/temp/" />
@@ -41,14 +33,14 @@
           <entry key="js" value="17" />
           <entry key="json" value="4" />
           <entry key="lock" value="2" />
-          <entry key="png" value="1" />
+          <entry key="png" value="2" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.open">
         <counts>
           <entry key="CSS" value="10" />
           <entry key="HTML" value="1" />
-          <entry key="Image" value="2" />
+          <entry key="Image" value="3" />
           <entry key="JSON" value="4" />
           <entry key="JavaScript" value="17" />
           <entry key="yarn.lock" value="2" />
@@ -62,13 +54,13 @@
       <usages-collector id="statistics.file.extensions.edit">
         <counts>
           <entry key="css" value="307" />
-          <entry key="js" value="8650" />
+          <entry key="js" value="9475" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.edit">
         <counts>
           <entry key="CSS" value="307" />
-          <entry key="JavaScript" value="8650" />
+          <entry key="JavaScript" value="9475" />
         </counts>
       </usages-collector>
     </session>
@@ -78,8 +70,8 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/app/index.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="2734">
-              <caret line="164" column="78" selection-start-line="164" selection-start-column="78" selection-end-line="164" selection-end-column="78" />
+            <state relative-caret-position="627">
+              <caret line="33" column="33" lean-forward="true" selection-start-line="33" selection-start-column="33" selection-end-line="33" selection-end-column="33" />
               <folding>
                 <element signature="e#0#39#0" expanded="true" />
               </folding>
@@ -87,11 +79,11 @@
           </provider>
         </entry>
       </file>
-      <file pinned="false" current-in-tab="false">
+      <file pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/src/schema/index.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="-1528">
-              <caret line="30" column="27" lean-forward="true" selection-start-line="30" selection-start-column="27" selection-end-line="30" selection-end-column="27" />
+            <state relative-caret-position="1064">
+              <caret line="56" column="31" selection-start-line="56" selection-start-column="31" selection-end-line="56" selection-end-column="31" />
               <folding>
                 <element signature="e#0#39#0" expanded="true" />
               </folding>
@@ -102,22 +94,17 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/graphiql/index.css">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="399">
-              <caret line="21" column="25" selection-start-line="21" selection-start-column="25" selection-end-line="21" selection-end-column="25" />
+            <state relative-caret-position="124">
+              <caret line="16" column="23" lean-forward="true" selection-start-line="16" selection-start-column="23" selection-end-line="16" selection-end-column="23" />
             </state>
           </provider>
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/public/manifest.json">
-          <provider selected="true" editor-type-id="text-editor" />
-        </entry>
-      </file>
-      <file pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/src/config/index.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="453">
-              <caret line="68" column="14" selection-start-line="68" selection-start-column="14" selection-end-line="68" selection-end-column="14" />
+            <state relative-caret-position="709">
+              <caret line="104" column="50" selection-start-line="104" selection-start-column="50" selection-end-line="104" selection-end-column="50" />
               <folding>
                 <element signature="e#0#39#0" expanded="true" />
               </folding>
@@ -125,6 +112,11 @@
           </provider>
         </entry>
       </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/public/logo.png">
+          <provider selected="true" editor-type-id="images" />
+        </entry>
+      </file>
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/config/index.css">
           <provider selected="true" editor-type-id="text-editor">
@@ -146,8 +138,8 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/schema/change/index.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="551">
-              <caret line="29" column="26" lean-forward="true" selection-start-line="29" selection-start-column="26" selection-end-line="29" selection-end-column="26" />
+            <state relative-caret-position="-155">
+              <caret line="93" column="11" lean-forward="true" selection-start-line="93" selection-start-column="11" selection-end-line="93" selection-end-column="11" />
               <folding>
                 <element signature="e#0#39#0" expanded="true" />
               </folding>
@@ -197,6 +189,8 @@
       <find>props</find>
       <find>none</find>
       <find>addS</find>
+      <find>tableName</find>
+      <find>schemaName</find>
     </findStrings>
   </component>
   <component name="Git.Settings">
@@ -219,10 +213,10 @@
         <option value="$PROJECT_DIR$/src/app/App.js" />
         <option value="$PROJECT_DIR$/src/index.js" />
         <option value="$PROJECT_DIR$/src/schema/index.css" />
-        <option value="$PROJECT_DIR$/src/app/index.js" />
+        <option value="$PROJECT_DIR$/src/config/index.js" />
         <option value="$PROJECT_DIR$/src/schema/index.js" />
         <option value="$PROJECT_DIR$/src/schema/change/index.js" />
-        <option value="$PROJECT_DIR$/src/config/index.js" />
+        <option value="$PROJECT_DIR$/src/app/index.js" />
       </list>
     </option>
   </component>
@@ -243,9 +237,9 @@
     </packageJsonPaths>
   </component>
   <component name="ProjectFrameBounds">
-    <option name="x" value="963" />
-    <option name="y" value="115" />
-    <option name="width" value="1847" />
+    <option name="x" value="804" />
+    <option name="y" value="133" />
+    <option name="width" value="2063" />
     <option name="height" value="1341" />
   </component>
   <component name="ProjectLevelVcsManager">
@@ -280,12 +274,6 @@
               <item name="src" type="462c0819:PsiDirectoryNode" />
               <item name="app" type="462c0819:PsiDirectoryNode" />
             </path>
-            <path>
-              <item name="online" type="b2602c69:ProjectViewProjectNode" />
-              <item name="online" type="462c0819:PsiDirectoryNode" />
-              <item name="src" type="462c0819:PsiDirectoryNode" />
-              <item name="config" type="462c0819:PsiDirectoryNode" />
-            </path>
             <path>
               <item name="online" type="b2602c69:ProjectViewProjectNode" />
               <item name="online" type="462c0819:PsiDirectoryNode" />
@@ -355,20 +343,20 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1540954591627</updated>
-      <workItem from="1540954593719" duration="45983000" />
+      <workItem from="1540954593719" duration="50063000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="45983000" />
+    <option name="totallyTimeSpent" value="50063000" />
   </component>
   <component name="ToolWindowManager">
-    <frame x="963" y="115" width="1847" height="1341" extended-state="0" />
+    <frame x="804" y="133" width="2063" height="1341" extended-state="0" />
     <editor active="true" />
     <layout>
       <window_info id="npm" side_tool="true" />
       <window_info id="Favorites" side_tool="true" />
-      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.13800657" />
+      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.12340842" />
       <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
       <window_info anchor="bottom" id="Docker" show_stripe_button="false" />
       <window_info anchor="bottom" id="Version Control" show_stripe_button="false" />
@@ -446,9 +434,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/public/logo.png">
-      <provider selected="true" editor-type-id="images" />
-    </entry>
     <entry file="file://$PROJECT_DIR$/public/favicon.ico">
       <provider selected="true" editor-type-id="images" />
     </entry>
@@ -474,44 +459,47 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/graphiql/index.css">
+    <entry file="file://$PROJECT_DIR$/src/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="399">
-          <caret line="21" column="25" selection-start-line="21" selection-start-column="25" selection-end-line="21" selection-end-column="25" />
+        <state relative-caret-position="171">
+          <caret line="9" lean-forward="true" selection-start-line="9" selection-end-line="9" />
+          <folding>
+            <element signature="e#0#26#0" expanded="true" />
+          </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/schema/index.css">
+    <entry file="file://$PROJECT_DIR$/src/config/index.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="513">
-          <caret line="27" column="11" selection-start-line="27" selection-start-column="11" selection-end-line="27" selection-end-column="11" />
+        <state relative-caret-position="247">
+          <caret line="13" column="1" selection-start-line="13" selection-start-column="1" selection-end-line="13" selection-end-column="1" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/index.js">
+    <entry file="file://$PROJECT_DIR$/public/logo.png">
+      <provider selected="true" editor-type-id="images" />
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/config/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="171">
-          <caret line="9" lean-forward="true" selection-start-line="9" selection-end-line="9" />
+        <state relative-caret-position="709">
+          <caret line="104" column="50" selection-start-line="104" selection-start-column="50" selection-end-line="104" selection-end-column="50" />
           <folding>
-            <element signature="e#0#26#0" expanded="true" />
+            <element signature="e#0#39#0" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/schema/index.js">
+    <entry file="file://$PROJECT_DIR$/src/schema/index.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="-1528">
-          <caret line="30" column="27" lean-forward="true" selection-start-line="30" selection-start-column="27" selection-end-line="30" selection-end-column="27" />
-          <folding>
-            <element signature="e#0#39#0" expanded="true" />
-          </folding>
+        <state relative-caret-position="513">
+          <caret line="27" column="11" selection-start-line="27" selection-start-column="11" selection-end-line="27" selection-end-column="11" />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/schema/change/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="551">
-          <caret line="29" column="26" lean-forward="true" selection-start-line="29" selection-start-column="26" selection-end-line="29" selection-end-column="26" />
+        <state relative-caret-position="-155">
+          <caret line="93" column="11" lean-forward="true" selection-start-line="93" selection-start-column="11" selection-end-line="93" selection-end-column="11" />
           <folding>
             <element signature="e#0#39#0" expanded="true" />
           </folding>
@@ -520,25 +508,25 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/src/app/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="2734">
-          <caret line="164" column="78" selection-start-line="164" selection-start-column="78" selection-end-line="164" selection-end-column="78" />
+        <state relative-caret-position="627">
+          <caret line="33" column="33" lean-forward="true" selection-start-line="33" selection-start-column="33" selection-end-line="33" selection-end-column="33" />
           <folding>
             <element signature="e#0#39#0" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/config/index.css">
+    <entry file="file://$PROJECT_DIR$/src/graphiql/index.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="247">
-          <caret line="13" column="1" selection-start-line="13" selection-start-column="1" selection-end-line="13" selection-end-column="1" />
+        <state relative-caret-position="124">
+          <caret line="16" column="23" lean-forward="true" selection-start-line="16" selection-start-column="23" selection-end-line="16" selection-end-column="23" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/config/index.js">
+    <entry file="file://$PROJECT_DIR$/src/schema/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="453">
-          <caret line="68" column="14" selection-start-line="68" selection-start-column="14" selection-end-line="68" selection-end-column="14" />
+        <state relative-caret-position="1064">
+          <caret line="56" column="31" selection-start-line="56" selection-start-column="31" selection-end-line="56" selection-end-column="31" />
           <folding>
             <element signature="e#0#39#0" expanded="true" />
           </folding>

src/app/index.js

@@ -89,7 +89,8 @@ class App extends Component {
             }
           ]
         }
-      ]
+      ],
+
     }
   }
 
@@ -104,7 +105,6 @@ class App extends Component {
 
   addTable = (columns, tableName, schemaName) => {
     let schemas = this.state.schemas;
-    console.log(columns, tableName, schemaName, schemas);
     let targetSchema = schemas.find(obj => obj.name === schemaName);
     let targetTable = targetSchema.tables.find(obj => obj.name === tableName);
     if(targetTable === undefined) {
@@ -117,6 +117,16 @@ class App extends Component {
     })
   };
 
+  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
+    })
+  };
+
   handleClick = (e) => {
     this.setState({
       current: e.key,
@@ -162,7 +172,7 @@ class App extends Component {
             (() => {
               switch (this.state.current) {
                 case 'schema':
-                  return <Schema addSchema={this.addSchema} addTable={this.addTable} schemas={this.state.schemas}/>;
+                  return <Schema addSchema={this.addSchema} addTable={this.addTable} deleteTable={this.deleteTable} schemas={this.state.schemas}/>;
                 case 'config':
                   return <Config schemas={this.state.schemas}/>;
                 default:

src/config/index.js

@@ -54,9 +54,9 @@ class Index extends Component {
           </Col>
           <Col span={18}>
             You are in config of <b>{this.state.currentSchema}</b>
-            <div>
-              <p>云服务器商选择配置</p>
-              <p>云服务器商</p>
+            <p style={{fontSize: 30}}>Cloud Config</p>
+            <div style={{marginBottom: 30}}>
+              <p><b>Cloud Server providers</b></p>
               <Select defaultValue="tencent" style={{ width: 120 }} onChange={this.handleCSChange}>
                 <Option value="tencent">Tencent</Option>
                 <Option disabled value="aliyun">Aliyun</Option>
@@ -67,7 +67,7 @@ class Index extends Component {
 
             <div>
 
-              <div>
+              <div style={{marginBottom: 30}}>
                 <p><b>Serverless Cloud Function</b></p>
                 <div>
                   <div>
@@ -79,7 +79,7 @@ class Index extends Component {
                 </div>
               </div>
 
-              <div>
+              <div style={{marginBottom: 30}}>
                 <p><b>API</b></p>
                 <div>
                   <div>
@@ -93,7 +93,7 @@ class Index extends Component {
 
             </div>
 
-            <div>
+            <div style={{marginBottom: 30}}>
               <p><b>Database</b></p>
               <Select defaultValue="mongodb" style={{ width: 120 }} onChange={this.handleCSChange}>
                 <Option value="mongodb">MongoDB</Option>
@@ -102,9 +102,7 @@ class Index extends Component {
               </Select>
             </div>
 
-            <Button type="primary">
-              submit
-            </Button>
+            <Button type="primary">submit</Button>
           </Col>
         </Row>
       </div>

src/schema/change/index.js

@@ -8,8 +8,8 @@ class Change extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      schemaName: props.schemaName,
-      tableName: props.tableName,
+      currentSchema: props.currentSchema,
+      currentTable: props.currentTable,
       columns: props.columns,
       newColName: '',
       newColType: 'type'
@@ -83,8 +83,8 @@ class Change extends Component {
 
   componentWillReceiveProps(next) {
     this.setState({
-      tableName: next.tableName,
-      schemaName: next.schemaName,
+      currentTable: next.currentTable,
+      currentSchema: next.currentSchema,
       columns: next.columns
     });
   };
@@ -94,8 +94,8 @@ class Change extends Component {
       <div>
         <div>
           Table name:
-          <Input value={this.state.tableName} placeholder="table_name" style={{width: 120}} onChange={(e) => {
-            this.setState({tableName: e.target.value})
+          <Input value={this.state.currentTable} placeholder="table_name" style={{width: 120}} onChange={(e) => {
+            this.setState({currentTable: e.target.value})
           }}/>
         </div>
         <div>
@@ -131,11 +131,13 @@ class Change extends Component {
           </div>
         </div>
         <Button type="primary" onClick={() => {
-          this.setState({submit: true});
-          this.props.addTable(this.state.columns, this.state.tableName, this.state.schemaName);
+          this.props.addTable(this.state.columns, this.state.currentTable, this.state.currentSchema);
         }}>
           Submit
         </Button>
+        <Button type="danger" onClick={() => {
+          this.props.deleteTable(this.state.currentTable, this.state.currentSchema);
+        }}>DELETE</Button>
       </div>
     )
   }

src/schema/index.js

@@ -104,9 +104,9 @@ class Schema extends Component {
           <Col span={18}>
             {
               this.state.currentTable === 'add' ?
-                <AddTable currentSchema={this.state.currentSchema} addTable={this.props.addTable}/> :
+                <AddTable currentSchema={this.state.currentSchema} addTable={this.props.addTable} deleteTable={this.props.deleteTable}/> :
                 <ShowTable currentSchema={this.state.currentSchema} currentTable={this.state.currentTable}
-                           columns={this.findColumns()} addTable={this.props.addTable}/>
+                           columns={this.findColumns()} addTable={this.props.addTable} deleteTable={this.props.deleteTable}/>
             }
           </Col>
         </Row>
@@ -129,24 +129,21 @@ class AddTable extends Component {
     return (
       <div style={{margin: 10}}>
         <div style={{fontSize: 30}}>Add a new table to <b>{this.props.currentSchema}</b></div>
-        <Change schemaName={this.props.currentSchema} tableName={this.props.currentTable} columns={this.state.columns} addTable={this.props.addTable}/>
+        <Change currentSchema={this.props.currentSchema} currentTable={this.props.currentTable} columns={this.state.columns} addTable={this.props.addTable} deleteTable={this.props.deleteTable}/>
       </div>
     )
   }
 }
 
 class ShowTable extends Component {
-  constructor(props) {
-    super(props);
-  }
-
   render() {
     return (
       <div style={{margin: 10}}>
         <div style={{fontSize: 30}}>{this.props.currentSchema} > {this.props.currentTable}</div>
-        <Change schemaName={this.props.currentSchema} tableName={this.props.currentTable} columns={this.props.columns} addTable={this.props.addTable}/>
+        <Change currentSchema={this.props.currentSchema} currentTable={this.props.currentTable} columns={this.props.columns} addTable={this.props.addTable} deleteTable={this.props.deleteTable}/>
       </div>
     )
   }
 }
 
+