remote connected

.idea/workspace.xml

@@ -2,15 +2,10 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="93d86d6a-0860-401c-996e-30fc26553ffc" name="Default Changelist" comment="">
-      <change afterPath="$PROJECT_DIR$/src/graphiql/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$/public/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/public/index.html" afterDir="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/diff/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/config/diff/index.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/config/index.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/config/index.css" 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.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/schema/index.css" 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/" />
@@ -66,7 +61,7 @@
         <counts>
           <entry key="css" value="766" />
           <entry key="html" value="24" />
-          <entry key="js" value="18833" />
+          <entry key="js" value="19595" />
           <entry key="ts" value="14" />
         </counts>
       </usages-collector>
@@ -74,7 +69,7 @@
         <counts>
           <entry key="CSS" value="766" />
           <entry key="HTML" value="24" />
-          <entry key="JavaScript" value="18833" />
+          <entry key="JavaScript" value="19595" />
           <entry key="TypeScript" value="14" />
         </counts>
       </usages-collector>
@@ -85,8 +80,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="1007">
-              <caret line="53" column="28" selection-start-line="53" selection-start-column="28" selection-end-line="53" selection-end-column="28" />
+            <state relative-caret-position="858">
+              <caret line="135" lean-forward="true" selection-start-line="135" selection-end-line="135" />
               <folding>
                 <element signature="e#0#39#0" expanded="true" />
               </folding>
@@ -118,10 +113,13 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/config/diff/index.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="505">
-              <caret line="79" column="12" lean-forward="true" selection-start-line="79" selection-start-column="12" selection-end-line="79" selection-end-column="12" />
+            <state relative-caret-position="325">
+              <caret line="67" column="25" lean-forward="true" selection-start-line="67" selection-start-column="25" selection-end-line="67" selection-end-column="25" />
               <folding>
                 <element signature="e#0#39#0" expanded="true" />
+                <element signature="e#722#835#0" />
+                <element signature="e#871#1077#0" />
+                <element signature="e#1110#1220#0" />
               </folding>
             </state>
           </provider>
@@ -139,20 +137,26 @@
       <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="705">
-              <caret line="142" column="52" lean-forward="true" selection-start-line="142" selection-start-column="52" selection-end-line="142" selection-end-column="52" />
+            <state relative-caret-position="798">
+              <caret line="63" column="5" lean-forward="true" selection-start-line="63" selection-start-column="5" selection-end-line="63" selection-end-column="5" />
               <folding>
                 <element signature="e#0#39#0" expanded="true" />
+                <element signature="e#433#596#0" />
+                <element signature="e#624#717#0" />
+                <element signature="e#752#910#0" />
+                <element signature="e#1384#1543#0" />
+                <element signature="e#1577#1727#0" />
+                <element signature="n#!!block;n#componentWillReceiveProps#0;n#Change#0" />
               </folding>
             </state>
           </provider>
         </entry>
       </file>
-      <file pinned="false" current-in-tab="false">
+      <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="681">
-              <caret line="87" column="25" selection-start-line="87" selection-start-column="25" selection-end-line="87" selection-end-column="25" />
+            <state relative-caret-position="493">
+              <caret line="106" column="20" selection-start-line="106" selection-start-column="20" selection-end-line="106" selection-end-column="20" />
               <folding>
                 <element signature="e#0#39#0" expanded="true" />
                 <element signature="e#353#442#0" />
@@ -167,11 +171,11 @@
           <provider selected="true" editor-type-id="images" />
         </entry>
       </file>
-      <file pinned="false" current-in-tab="true">
+      <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/schema/index.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="1331">
-              <caret line="256" column="23" lean-forward="true" selection-start-line="256" selection-start-column="23" selection-end-line="256" selection-end-column="23" />
+            <state relative-caret-position="149">
+              <caret line="20" column="16" lean-forward="true" selection-start-line="20" selection-start-column="16" selection-end-line="20" selection-end-column="16" />
               <folding>
                 <element signature="e#0#39#0" expanded="true" />
                 <element signature="e#496#1501#0" />
@@ -182,9 +186,11 @@
                 <element signature="e#1072#1204#0" />
                 <element signature="e#1222#1349#0" />
                 <element signature="e#1367#1485#0" />
-                <element signature="e#3886#4001#0" />
+                <element signature="e#3847#4233#0" />
+                <element signature="e#4279#4630#0" />
                 <element signature="e#4863#4952#0" />
-                <element signature="e#5438#6563#0" />
+                <element signature="e#5168#5285#0" />
+                <element signature="e#5925#6220#0" />
                 <element signature="e#6541#6632#0" />
                 <element signature="e#6657#7170#0" />
                 <element signature="e#6579#7092#0" />
@@ -196,8 +202,8 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/graphiql/index.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="570">
-              <caret line="30" column="47" lean-forward="true" selection-start-line="30" selection-start-column="47" selection-end-line="30" selection-end-column="47" />
+            <state relative-caret-position="665">
+              <caret line="35" column="49" lean-forward="true" selection-start-line="35" selection-start-column="49" selection-end-line="35" selection-end-column="49" />
               <folding>
                 <element signature="e#0#39#0" expanded="true" />
               </folding>
@@ -217,10 +223,6 @@
   </component>
   <component name="FindInProjectRecents">
     <findStrings>
-      <find>top</find>
-      <find>topbar</find>
-      <find>databa</find>
-      <find>this.state.schemas</find>
       <find>this.</find>
       <find>c',</find>
       <find>props</find>
@@ -232,17 +234,25 @@
       <find>changeConfig</find>
       <find>add Sc</find>
       <find>Input</find>
-      <find>changeName</find>
       <find>ADD SC</find>
       <find>add</find>
       <find>console.log</find>
       <find>api</find>
       <find>login</find>
-      <find>hand</find>
+      <find>schemas</find>
       <find>style</find>
-      <find>change</find>
       <find>this.props</find>
-      <find>schemas</find>
+      <find>changeDataBase</find>
+      <find>changeCS</find>
+      <find>changeConfigLocal</find>
+      <find>changeSchemas</find>
+      <find>changeName</find>
+      <find>change</find>
+      <find>hand</find>
+      <find>map</find>
+      <find>openNotificationWithIcon</find>
+      <find>icationWithIcon</find>
+      <find>notification</find>
     </findStrings>
   </component>
   <component name="Git.Settings">
@@ -269,13 +279,13 @@
         <option value="$PROJECT_DIR$/node_modules/react-apollo/Query.d.ts" />
         <option value="$PROJECT_DIR$/public/index.html" />
         <option value="$PROJECT_DIR$/src/graphiql/index.js" />
-        <option value="$PROJECT_DIR$/src/schema/change/index.js" />
-        <option value="$PROJECT_DIR$/src/app/index.js" />
         <option value="$PROJECT_DIR$/src/schema/index.css" />
         <option value="$PROJECT_DIR$/src/config/index.css" />
         <option value="$PROJECT_DIR$/src/config/diff/index.js" />
-        <option value="$PROJECT_DIR$/src/config/index.js" />
+        <option value="$PROJECT_DIR$/src/schema/change/index.js" />
+        <option value="$PROJECT_DIR$/src/app/index.js" />
         <option value="$PROJECT_DIR$/src/schema/index.js" />
+        <option value="$PROJECT_DIR$/src/config/index.js" />
       </list>
     </option>
   </component>
@@ -296,10 +306,10 @@
     </packageJsonPaths>
   </component>
   <component name="ProjectFrameBounds">
-    <option name="x" value="474" />
-    <option name="y" value="76" />
+    <option name="x" value="333" />
+    <option name="y" value="54" />
     <option name="width" value="2063" />
-    <option name="height" value="1341" />
+    <option name="height" value="1311" />
   </component>
   <component name="ProjectLevelVcsManager" settingsEditedManually="true">
     <ConfirmationsSetting value="2" id="Add" />
@@ -412,17 +422,18 @@
       <updated>1540954591627</updated>
       <workItem from="1540954593719" duration="75927000" />
       <workItem from="1541378899580" duration="1667000" />
-      <workItem from="1541395110197" duration="39348000" />
+      <workItem from="1541395110197" duration="45502000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="116942000" />
+    <option name="totallyTimeSpent" value="123096000" />
   </component>
   <component name="ToolWindowManager">
-    <frame x="474" y="76" width="2063" height="1341" extended-state="0" />
+    <frame x="333" y="54" width="2063" height="1311" extended-state="0" />
+    <editor active="true" />
     <layout>
-      <window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.12340842" />
+      <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 id="npm" order="2" side_tool="true" />
       <window_info id="Favorites" order="3" side_tool="true" />
@@ -437,7 +448,7 @@
       <window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
       <window_info anchor="bottom" id="Version Control" order="8" show_stripe_button="false" />
       <window_info anchor="bottom" id="Event Log" order="9" side_tool="true" />
-      <window_info active="true" anchor="bottom" id="Terminal" order="10" visible="true" weight="0.26421136" />
+      <window_info anchor="bottom" id="Terminal" order="10" visible="true" weight="0.2707137" />
       <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
       <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
       <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
@@ -551,20 +562,30 @@
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/src/config/index.css">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="684">
+          <caret line="36" column="12" selection-start-line="36" selection-start-column="12" selection-end-line="36" selection-end-column="12" />
+        </state>
+      </provider>
+    </entry>
     <entry file="file://$PROJECT_DIR$/src/graphiql/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="570">
-          <caret line="30" column="47" lean-forward="true" selection-start-line="30" selection-start-column="47" selection-end-line="30" selection-end-column="47" />
+        <state relative-caret-position="665">
+          <caret line="35" column="49" lean-forward="true" selection-start-line="35" selection-start-column="49" selection-end-line="35" selection-end-column="49" />
           <folding>
             <element signature="e#0#39#0" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/logo.png">
+      <provider selected="true" editor-type-id="images" />
+    </entry>
     <entry file="file://$PROJECT_DIR$/src/app/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="1007">
-          <caret line="53" column="28" selection-start-line="53" selection-start-column="28" selection-end-line="53" selection-end-column="28" />
+        <state relative-caret-position="858">
+          <caret line="135" lean-forward="true" selection-start-line="135" selection-end-line="135" />
           <folding>
             <element signature="e#0#39#0" expanded="true" />
           </folding>
@@ -578,52 +599,39 @@
         </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="705">
-          <caret line="142" column="52" lean-forward="true" selection-start-line="142" selection-start-column="52" selection-end-line="142" selection-end-column="52" />
-          <folding>
-            <element signature="e#0#39#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/config/index.js">
+    <entry file="file://$PROJECT_DIR$/src/config/diff/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="681">
-          <caret line="87" column="25" selection-start-line="87" selection-start-column="25" selection-end-line="87" selection-end-column="25" />
+        <state relative-caret-position="325">
+          <caret line="67" column="25" lean-forward="true" selection-start-line="67" selection-start-column="25" selection-end-line="67" selection-end-column="25" />
           <folding>
             <element signature="e#0#39#0" expanded="true" />
-            <element signature="e#353#442#0" />
-            <element signature="e#480#911#0" />
+            <element signature="e#722#835#0" />
+            <element signature="e#871#1077#0" />
+            <element signature="e#1110#1220#0" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/app/logo.png">
-      <provider selected="true" editor-type-id="images" />
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/config/diff/index.js">
+    <entry file="file://$PROJECT_DIR$/src/schema/change/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="505">
-          <caret line="79" column="12" lean-forward="true" selection-start-line="79" selection-start-column="12" selection-end-line="79" selection-end-column="12" />
+        <state relative-caret-position="798">
+          <caret line="63" column="5" lean-forward="true" selection-start-line="63" selection-start-column="5" selection-end-line="63" selection-end-column="5" />
           <folding>
             <element signature="e#0#39#0" expanded="true" />
+            <element signature="e#433#596#0" />
+            <element signature="e#624#717#0" />
+            <element signature="e#752#910#0" />
+            <element signature="e#1384#1543#0" />
+            <element signature="e#1577#1727#0" />
+            <element signature="n#!!block;n#componentWillReceiveProps#0;n#Change#0" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/config/index.css">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="684">
-          <caret line="36" column="12" selection-start-line="36" selection-start-column="12" selection-end-line="36" selection-end-column="12" />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/src/schema/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="1331">
-          <caret line="256" column="23" lean-forward="true" selection-start-line="256" selection-start-column="23" selection-end-line="256" selection-end-column="23" />
+        <state relative-caret-position="149">
+          <caret line="20" column="16" lean-forward="true" selection-start-line="20" selection-start-column="16" selection-end-line="20" selection-end-column="16" />
           <folding>
             <element signature="e#0#39#0" expanded="true" />
             <element signature="e#496#1501#0" />
@@ -634,9 +642,11 @@
             <element signature="e#1072#1204#0" />
             <element signature="e#1222#1349#0" />
             <element signature="e#1367#1485#0" />
-            <element signature="e#3886#4001#0" />
+            <element signature="e#3847#4233#0" />
+            <element signature="e#4279#4630#0" />
             <element signature="e#4863#4952#0" />
-            <element signature="e#5438#6563#0" />
+            <element signature="e#5168#5285#0" />
+            <element signature="e#5925#6220#0" />
             <element signature="e#6541#6632#0" />
             <element signature="e#6657#7170#0" />
             <element signature="e#6579#7092#0" />
@@ -644,5 +654,17 @@
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/src/config/index.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="493">
+          <caret line="106" column="20" selection-start-line="106" selection-start-column="20" selection-end-line="106" selection-end-column="20" />
+          <folding>
+            <element signature="e#0#39#0" expanded="true" />
+            <element signature="e#353#442#0" />
+            <element signature="e#480#911#0" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
   </component>
 </project>

src/app/index.js

@@ -8,7 +8,7 @@ import '../graphiql/index.css';
 import logo from './logo.png';
 
 import gql from "graphql-tag";
-import {Query, Mutation} from "react-apollo";
+import {Query} from "react-apollo";
 
 const {Header, Content} = Layout;
 
@@ -139,7 +139,7 @@ class App extends Component {
               (() => {
                 switch (this.state.current) {
                   case 'schema':
-                    return <Schema />;
+                    return <Schema userID={this.state.userID}/>;
                   case 'config':
                     return <Config />;
                   default:

src/config/diff/index.js

@@ -18,25 +18,7 @@ class Diff extends Component {
     };
   }
 
-  changeName = (e) => {
-    this.setState({
-      config: {
-        ...this.state.config,
-        name: e.target.value
-      }
-    })
-  };
-
-  changeSchemas = (value) => {
-    this.setState({
-      config: {
-        ...this.state.config,
-        schemas: value
-      }
-    })
-  };
-
-  changeCS = (value) => {
+  switchCS = (value) => {
     this.setState({
       config: {
         ...this.state.config,
@@ -45,7 +27,7 @@ class Diff extends Component {
     })
   };
 
-  changeConfigLocal = (label) => {
+  switchConfigLocal = (label) => {
     return (e) => {
       this.setState({
         config: {
@@ -56,7 +38,7 @@ class Diff extends Component {
     };
   };
 
-  changeDataBase = (value) => {
+  switchDataBase = (value) => {
     this.setState({
       config: {
         ...this.state.config,
@@ -96,7 +78,7 @@ class Diff extends Component {
           <div style={{marginBottom: 10}}>
             <p><b>Cloud Server providers</b></p>
             <Select defaultValue="tencent" value={this.state.config.cloudServer} style={{width: 120}}
-                    onChange={this.changeCS}>
+                    onChange={this.switchCS}>
               <Option value="tencent">Tencent</Option>
               <Option value="aliyun">Aliyun</Option>
               <Option value="huawei">Huawei</Option>
@@ -112,12 +94,12 @@ class Diff extends Component {
                   <div>
                     <span className='vice-title'>secretID: </span>
                     <Input value={this.state.config.configLocal.SCF_secretID} style={{width: 200}}
-                           onChange={this.changeConfigLocal('SCF_secretID')}/>
+                           onChange={this.switchConfigLocal('SCF_secretID')}/>
                   </div>
                   <div style={{marginTop: 5}}>
                     <span className='vice-title'>secretKey: </span>
                     <Input value={this.state.config.configLocal.SCF_secretKey} style={{width: 200}}
-                           onChange={this.changeConfigLocal('SCF_secretKey')}/>
+                           onChange={this.switchConfigLocal('SCF_secretKey')}/>
                   </div>
                 </div>
               </div>
@@ -130,12 +112,12 @@ class Diff extends Component {
                   <div>
                     <span className='vice-title'>secretID: </span>
                     <Input value={this.state.config.configLocal.API_secretID} style={{width: 200}}
-                           onChange={this.changeConfigLocal('API_secretID')}/>
+                           onChange={this.switchConfigLocal('API_secretID')}/>
                   </div>
                   <div style={{marginTop: 5}}>
                     <span className='vice-title'>secretKey: </span>
                     <Input value={this.state.config.configLocal.API_secretKey} style={{width: 200}}
-                           onChange={this.changeConfigLocal('API_secretKey')}/>
+                           onChange={this.switchConfigLocal('API_secretKey')}/>
                   </div>
                 </div>
               </div>
@@ -147,7 +129,7 @@ class Diff extends Component {
         <div style={{marginBottom: 30}}>
           <span className='table-title'> Database Config</span>
           <Select defaultValue="mongodb" value={this.state.config.database} style={{width: 120}}
-                  onChange={this.changeDataBase}>
+                  onChange={this.switchDataBase}>
             <Option value="mongodb">MongoDB</Option>
             <Option value="nedb">nedb</Option>
             <Option value="postgres">postgres</Option>
@@ -157,7 +139,7 @@ class Diff extends Component {
         <Button type="primary" onClick={() => {
           this.props.addConfig(this.state.config, this.state.config.name);
         }}>SUBMIT</Button>
-        <Button type="danger" onClick={() => {
+        <Button style={{marginLeft: 10}} type="danger" onClick={() => {
           this.props.deleteConfig(this.state.config.name);
         }}>DELETE</Button>
       </div>

src/config/index.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 
-import {Row, Col, Input, Button} from 'antd';
+import {Row, Col, Input} from 'antd';
 
 import './index.css';
 import Diff from './diff';
@@ -8,13 +8,11 @@ import Diff from './diff';
 const Search = Input.Search;
 
 
-
 class Config extends Component {
   constructor(props) {
     super(props);
     this.state = {
       currentConfig: '',
-      switch: true,
       configs: [
         {
           name: 'Tenc and Mongo',
@@ -40,7 +38,7 @@ class Config extends Component {
         }
       ]
     };
-    if(this.state.configs.length !== 0) {
+    if (this.state.configs.length !== 0) {
       this.state.currentConfig = this.state.configs[0].name
     }
   }
@@ -98,20 +96,16 @@ class Config extends Component {
             <div className='warpper'>
               <div className='current'>{this.state.currentConfig}</div>
               {
-                this.state.switch?
-                  <Button className='add' type='dashed' icon="plus" onClick={()=>{this.setState({switch: false})}} /> :
-                  <Search
-                    className='add-input'
-                    placeholder="input config_name"
-                    enterButton="Confirm"
-                    onSearch={value => {
-                      this.setState({
-                        switch: true,
-                      });
-                      this.addConfig('new', value);
-                    }}
-                    disabled={this.state.switch}
-                  />
+
+
+                <Search
+                  className='add-input'
+                  placeholder="input config_name"
+                  enterButton="Confirm"
+                  onSearch={value => {
+                    this.addConfig('new', value);
+                  }}
+                />
               }
             </div>
 
@@ -127,7 +121,8 @@ class Config extends Component {
 
           </Col>
           <Col span={18}>
-            <Diff addConfig={this.addConfig} deleteConfig={this.deleteConfig} currentConfig={this.state.currentConfig} configs={this.state.configs} />
+            <Diff addConfig={this.addConfig} deleteConfig={this.deleteConfig} currentConfig={this.state.currentConfig}
+                  configs={this.state.configs}/>
           </Col>
         </Row>
       </div>

src/schema/change/index.js

@@ -14,6 +14,8 @@ class Change extends Component {
       columns: props.columns,
       newColName: '',
       newColType: 'type',
+      types: ['ID', 'String', 'Int', 'Float'],
+      descriptions: ['description', 'key', 'non-null', 'non-null-list']
     }
   }
 
@@ -100,7 +102,6 @@ class Change extends Component {
             this.setState({currentTable: e.target.value})
           }}/>
 
-
         </div>
 
         <div style={{marginBottom: 20}}>
@@ -121,14 +122,19 @@ class Change extends Component {
                 <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)}>
-                  <Option value="string">String</Option>
-                  <Option value="int">Int</Option>
-                  <Option value="float">Float</Option>
+                  {
+                    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)}>
-                  <Option value="non-null">non-null</Option>
-                  <Option value="key">key</Option>
+                  {
+                    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)}/>
@@ -140,9 +146,11 @@ class Change extends Component {
                    value={this.state.newColName}/>
             <Select defaultValue="type" style={{width: 120, marginRight: 10}} onChange={this.handleTypeNew}
                     value={this.state.newColType}>
-              <Option value="string">String</Option>
-              <Option value="int">Int</Option>
-              <Option value="float">Float</Option>
+              {
+                this.state.types.map((value) =>
+                  <Option key={Math.random()} value={value.toLowerCase()}>{value}</Option>
+                )
+              }
             </Select>
           </div>
         </div>

src/schema/index.js

@@ -8,6 +8,9 @@ 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) {
@@ -15,7 +18,6 @@ class Schema extends Component {
     this.state = {
       currentSchema: '',
       currentTable: '',
-      switch: true,
       schemas: [
         {
           name: 'magazineApp',
@@ -138,16 +140,12 @@ class Schema extends Component {
         }
       ],
     };
-    if(this.state.schemas.length !== 0) {
+    if (this.state.schemas.length !== 0) {
       this.state.currentSchema = this.state.schemas[0].name;
       this.state.currentTable = this.state.schemas[0].tables[0].name;
     }
   }
 
-  idGen = (kind) => {
-    return kind + ' of ' + this.state.nickname + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
-  };
-
   addTable = (columns, remark, tableName, schemaName) => {
     let schemas = this.state.schemas;
     let targetSchema = schemas.find(obj => obj.name === schemaName);
@@ -172,8 +170,8 @@ class Schema extends Component {
       schemas
     });
 
-    let tables = this.state.schemas.find(obj=> obj.name === this.state.currentSchema).tables;
-    if(tables.length !== 0) {
+    let tables = this.state.schemas.find(obj => obj.name === this.state.currentSchema).tables;
+    if (tables.length !== 0) {
       this.setState({
         currentTable: tables[0].name
       })
@@ -193,53 +191,12 @@ class Schema extends Component {
   };
 
   addSchema = (name) => {
-    let newSchema = {
-      name,
-      tables: []
-    };
-
     this.setState({
-      schemas: [...this.state.schemas, newSchema]
+      schemas: [...this.state.schemas, {
+        name,
+        tables: []
+      }]
     });
-
-
-    let varobj = {
-      id: this.idGen('schema'),
-      user_id: this.state.userID,
-      schemaName: name,
-      createdAt: Date().now,
-      updatedAt: '',
-      schemaData: newSchema,
-      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
-        }
-      }
-    `;
-
-    console.log(111111111111111);
-
-    return (
-      <Mutation mutation={ADD_SCHEMA}>
-        {(create_schema, {data}) => {
-          create_schema({variables: varobj});
-          console.log(222222222222222);
-        }}
-      </Mutation>
-    )
   };
 
   deleteSchema = (schemaName) => {
@@ -253,7 +210,7 @@ class Schema extends Component {
           schemas
         })
       }
-      if(this.state.schemas.length !== 0) {
+      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 : ''
@@ -271,7 +228,17 @@ class Schema extends Component {
     return () => {
       this.setState({
         currentSchema: schema
-      })
+      });
+      let tables = this.state.schemas.find(obj => obj.name === schema).tables;
+      if (tables.length !== 0) {
+        this.setState({
+          currentTable: tables[0].name
+        })
+      } else {
+        this.setState({
+          currentTable: ''
+        })
+      }
     }
   };
 
@@ -305,26 +272,7 @@ class Schema extends Component {
           <Col span={6}>
             <div className='wrapper'>
               <div className='current'>{this.state.currentSchema}</div>
-              {
-                this.state.switch ?
-                  <Button className='add' type='dashed' icon="plus" onClick={() => {
-                    this.setState({switch: false})
-                  }}/> :
-                  <Search
-                    className='add-input'
-                    placeholder="input schema_name"
-                    enterButton="Confirm"
-                    onSearch={value => {
-                      this.setState({
-                        switch: true,
-                        currentSchema: value,
-                        currentTable: ''
-                      });
-                      this.addSchema(value);
-                    }}
-                    disabled={this.state.switch}
-                  />
-              }
+              <AddSchema userID={this.props.userID} addSchema={this.addSchema}/>
             </div>
 
             {
@@ -343,11 +291,9 @@ class Schema extends Component {
 
                   {
                     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>
                     )
                   }
@@ -375,4 +321,69 @@ class Schema extends Component {
 
 export default Schema;
 
+class AddSchema 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>
+    )
+
+  }
+}
+