add style, autoFill

.idea/workspace.xml

@@ -2,7 +2,16 @@
 <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/" />
     <ignored path="$PROJECT_DIR$/temp/" />
@@ -26,23 +35,23 @@
       </usages-collector>
       <usages-collector id="statistics.file.extensions.open">
         <counts>
-          <entry key="css" value="11" />
-          <entry key="html" value="1" />
+          <entry key="css" value="12" />
+          <entry key="html" value="2" />
           <entry key="ico" value="1" />
-          <entry key="js" value="23" />
+          <entry key="js" value="26" />
           <entry key="json" value="5" />
           <entry key="lock" value="3" />
-          <entry key="png" value="3" />
+          <entry key="png" value="4" />
           <entry key="ts" value="2" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.open">
         <counts>
-          <entry key="CSS" value="11" />
-          <entry key="HTML" value="1" />
-          <entry key="Image" value="4" />
+          <entry key="CSS" value="12" />
+          <entry key="HTML" value="2" />
+          <entry key="Image" value="5" />
           <entry key="JSON" value="5" />
-          <entry key="JavaScript" value="23" />
+          <entry key="JavaScript" value="26" />
           <entry key="TypeScript" value="2" />
           <entry key="yarn.lock" value="3" />
         </counts>
@@ -55,15 +64,17 @@
       </usages-collector>
       <usages-collector id="statistics.file.extensions.edit">
         <counts>
-          <entry key="css" value="482" />
-          <entry key="js" value="16735" />
+          <entry key="css" value="766" />
+          <entry key="html" value="24" />
+          <entry key="js" value="18833" />
           <entry key="ts" value="14" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.edit">
         <counts>
-          <entry key="CSS" value="482" />
-          <entry key="JavaScript" value="16735" />
+          <entry key="CSS" value="766" />
+          <entry key="HTML" value="24" />
+          <entry key="JavaScript" value="18833" />
           <entry key="TypeScript" value="14" />
         </counts>
       </usages-collector>
@@ -71,66 +82,56 @@
   </component>
   <component name="FileEditorManager">
     <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
-      <file pinned="false" current-in-tab="true">
+      <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="654">
-              <caret line="430" column="27" lean-forward="true" selection-start-line="430" selection-start-column="27" selection-end-line="430" selection-end-column="27" />
+            <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" />
               <folding>
                 <element signature="e#0#39#0" expanded="true" />
-                <element signature="e#648#757#0" />
-                <element signature="e#775#895#0" />
-                <element signature="e#913#1044#0" />
-                <element signature="e#1062#1188#0" />
-                <element signature="e#1206#1338#0" />
-                <element signature="e#1356#1483#0" />
-                <element signature="e#1501#1619#0" />
-                <element signature="e#1736#1845#0" />
-                <element signature="e#1863#1992#0" />
-                <element signature="e#2010#2136#0" />
-                <element signature="e#2243#2622#0" />
-                <element signature="e#2688#3897#0" />
-                <element signature="e#3932#4726#0" />
               </folding>
             </state>
           </provider>
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/node_modules/react-apollo/Mutation.d.ts">
+        <entry file="file://$PROJECT_DIR$/public/index.html">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="1178">
-              <caret line="67" column="25" selection-start-line="67" selection-start-column="25" selection-end-line="67" selection-end-column="25" />
+            <state relative-caret-position="380">
+              <caret line="20" lean-forward="true" selection-start-line="20" selection-end-line="20" />
+              <folding>
+                <element signature="n#style#0;n#div#0;n#body#0;n#html#0;n#!!top" expanded="true" />
+              </folding>
             </state>
           </provider>
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/node_modules/react-apollo/Query.d.ts">
+        <entry file="file://$PROJECT_DIR$/src/schema/index.css">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="1045">
-              <caret line="55" column="28" selection-start-line="55" selection-start-column="19" selection-end-line="55" selection-end-column="28" />
-              <folding>
-                <element signature="e#0#31#0" expanded="true" />
-              </folding>
+            <state relative-caret-position="190">
+              <caret line="10" column="23" selection-start-line="10" selection-start-column="23" selection-end-line="10" selection-end-column="23" />
             </state>
           </provider>
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/graphiql/index.css">
+        <entry file="file://$PROJECT_DIR$/src/config/diff/index.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="304">
-              <caret line="16" column="23" selection-start-line="16" selection-start-column="23" selection-end-line="16" selection-end-column="23" />
+            <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" />
+              <folding>
+                <element signature="e#0#39#0" expanded="true" />
+              </folding>
             </state>
           </provider>
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <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="380">
-              <caret line="20" column="10" selection-start-line="20" selection-start-column="10" selection-end-line="20" selection-end-column="10" />
+            <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>
@@ -138,8 +139,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="508">
-              <caret line="108" column="38" lean-forward="true" selection-start-line="108" selection-start-column="38" selection-end-line="108" selection-end-column="38" />
+            <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>
@@ -148,12 +149,14 @@
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/index.js">
+        <entry file="file://$PROJECT_DIR$/src/config/index.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="323">
-              <caret line="17" lean-forward="true" selection-start-line="17" selection-end-line="17" />
+            <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" />
               <folding>
-                <element signature="e#0#26#0" expanded="true" />
+                <element signature="e#0#39#0" expanded="true" />
+                <element signature="e#353#442#0" />
+                <element signature="e#480#911#0" />
               </folding>
             </state>
           </provider>
@@ -164,20 +167,37 @@
           <provider selected="true" editor-type-id="images" />
         </entry>
       </file>
-      <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/index.css">
+      <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="608">
-              <caret line="32" column="19" selection-start-line="32" selection-start-column="19" selection-end-line="32" selection-end-column="19" />
+            <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" />
+              <folding>
+                <element signature="e#0#39#0" expanded="true" />
+                <element signature="e#496#1501#0" />
+                <element signature="e#514#623#0" />
+                <element signature="e#641#761#0" />
+                <element signature="e#779#910#0" />
+                <element signature="e#928#1054#0" />
+                <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#4863#4952#0" />
+                <element signature="e#5438#6563#0" />
+                <element signature="e#6541#6632#0" />
+                <element signature="e#6657#7170#0" />
+                <element signature="e#6579#7092#0" />
+              </folding>
             </state>
           </provider>
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/schema/index.js">
+        <entry file="file://$PROJECT_DIR$/src/graphiql/index.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="618">
-              <caret line="65" column="33" lean-forward="true" selection-start-line="65" selection-start-column="33" selection-end-line="65" selection-end-column="33" />
+            <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" />
               <folding>
                 <element signature="e#0#39#0" expanded="true" />
               </folding>
@@ -217,8 +237,12 @@
       <find>add</find>
       <find>console.log</find>
       <find>api</find>
-      <find>style</find>
       <find>login</find>
+      <find>hand</find>
+      <find>style</find>
+      <find>change</find>
+      <find>this.props</find>
+      <find>schemas</find>
     </findStrings>
   </component>
   <component name="Git.Settings">
@@ -234,23 +258,24 @@
         <option value="$PROJECT_DIR$/src/app.css" />
         <option value="$PROJECT_DIR$/src/App.js" />
         <option value="$PROJECT_DIR$/src/schema.js" />
-        <option value="$PROJECT_DIR$/src/graphiql/index.js" />
         <option value="$PROJECT_DIR$/src/config/config.css" />
         <option value="$PROJECT_DIR$/src/config/config.js" />
         <option value="$PROJECT_DIR$/src/schema/schema.js" />
         <option value="$PROJECT_DIR$/src/app/App.js" />
-        <option value="$PROJECT_DIR$/src/schema/index.css" />
-        <option value="$PROJECT_DIR$/src/config/index.css" />
         <option value="$PROJECT_DIR$/src/config/change/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/config/diff/index.js" />
         <option value="$PROJECT_DIR$/package.json" />
         <option value="$PROJECT_DIR$/src/index.js" />
         <option value="$PROJECT_DIR$/src/index.css" />
         <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/index.js" />
       </list>
     </option>
   </component>
@@ -271,8 +296,8 @@
     </packageJsonPaths>
   </component>
   <component name="ProjectFrameBounds">
-    <option name="x" value="216" />
-    <option name="y" value="65" />
+    <option name="x" value="474" />
+    <option name="y" value="76" />
     <option name="width" value="2063" />
     <option name="height" value="1341" />
   </component>
@@ -308,11 +333,31 @@
               <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" />
+              <item name="src" type="462c0819:PsiDirectoryNode" />
+              <item name="config" type="462c0819:PsiDirectoryNode" />
+              <item name="diff" 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="schema" 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="schema" type="462c0819:PsiDirectoryNode" />
+              <item name="change" type="462c0819:PsiDirectoryNode" />
             </path>
           </expand>
           <select />
@@ -367,18 +412,17 @@
       <updated>1540954591627</updated>
       <workItem from="1540954593719" duration="75927000" />
       <workItem from="1541378899580" duration="1667000" />
-      <workItem from="1541395110197" duration="23076000" />
+      <workItem from="1541395110197" duration="39348000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="100670000" />
+    <option name="totallyTimeSpent" value="116942000" />
   </component>
   <component name="ToolWindowManager">
-    <frame x="216" y="65" width="2063" height="1341" extended-state="0" />
-    <editor active="true" />
+    <frame x="474" y="76" width="2063" height="1341" extended-state="0" />
     <layout>
-      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.12340842" />
+      <window_info 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" />
@@ -393,7 +437,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 anchor="bottom" id="Terminal" order="10" visible="true" weight="0.26421136" />
+      <window_info active="true" anchor="bottom" id="Terminal" order="10" visible="true" weight="0.26421136" />
       <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" />
@@ -429,23 +473,9 @@
     <entry file="file://$PROJECT_DIR$/public/favicon.ico">
       <provider selected="true" editor-type-id="images" />
     </entry>
-    <entry file="file://$PROJECT_DIR$/public/index.html">
-      <provider selected="true" editor-type-id="text-editor" />
-    </entry>
     <entry file="file://$PROJECT_DIR$/public/manifest.json">
       <provider selected="true" editor-type-id="text-editor" />
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/graphiql/index.js" />
-    <entry file="file://$PROJECT_DIR$/src/config/index.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="260">
-          <caret line="58" column="44" selection-start-line="58" selection-start-column="33" selection-end-line="58" selection-end-column="44" />
-          <folding>
-            <element signature="e#0#39#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/package.json">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="627">
@@ -463,23 +493,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/config/diff/index.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="247">
-          <caret line="15" column="23" selection-start-line="15" selection-start-column="23" selection-end-line="15" selection-end-column="23" />
-          <folding>
-            <element signature="e#0#39#0" expanded="true" />
-          </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="361">
-          <caret line="19" selection-start-line="19" selection-end-line="19" />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/yarn.lock">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="589">
@@ -494,9 +507,6 @@
         </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$/node_modules/react-apollo/Query.d.ts">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="1045">
@@ -507,17 +517,17 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/schema/index.css">
+    <entry file="file://$PROJECT_DIR$/src/index.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="380">
-          <caret line="20" column="10" selection-start-line="20" selection-start-column="10" selection-end-line="20" selection-end-column="10" />
+        <state relative-caret-position="608">
+          <caret line="32" column="19" selection-start-line="32" selection-start-column="19" selection-end-line="32" selection-end-column="19" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/index.css">
+    <entry file="file://$PROJECT_DIR$/node_modules/react-apollo/Mutation.d.ts">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="608">
-          <caret line="32" column="19" selection-start-line="32" selection-start-column="19" selection-end-line="32" selection-end-column="19" />
+        <state relative-caret-position="1178">
+          <caret line="67" column="25" selection-start-line="67" selection-start-column="25" selection-end-line="67" selection-end-column="25" />
         </state>
       </provider>
     </entry>
@@ -531,52 +541,105 @@
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/public/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="380">
+          <caret line="20" lean-forward="true" selection-start-line="20" selection-end-line="20" />
+          <folding>
+            <element signature="n#style#0;n#div#0;n#body#0;n#html#0;n#!!top" expanded="true" />
+          </folding>
+        </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" />
+          <folding>
+            <element signature="e#0#39#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </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" />
+          <folding>
+            <element signature="e#0#39#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/schema/index.css">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="190">
+          <caret line="10" column="23" selection-start-line="10" selection-start-column="23" selection-end-line="10" selection-end-column="23" />
+        </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="508">
-          <caret line="108" column="38" lean-forward="true" selection-start-line="108" selection-start-column="38" selection-end-line="108" selection-end-column="38" />
+        <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/schema/index.js">
+    <entry file="file://$PROJECT_DIR$/src/config/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="618">
-          <caret line="65" column="33" lean-forward="true" selection-start-line="65" selection-start-column="33" selection-end-line="65" selection-end-column="33" />
+        <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" />
           <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>
-    <entry file="file://$PROJECT_DIR$/node_modules/react-apollo/Mutation.d.ts">
+    <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">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="1178">
-          <caret line="67" column="25" selection-start-line="67" selection-start-column="25" selection-end-line="67" selection-end-column="25" />
+        <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" />
+          <folding>
+            <element signature="e#0#39#0" expanded="true" />
+          </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/app/index.js">
+    <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="654">
-          <caret line="430" column="27" lean-forward="true" selection-start-line="430" selection-start-column="27" selection-end-line="430" selection-end-column="27" />
+        <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" />
           <folding>
             <element signature="e#0#39#0" expanded="true" />
-            <element signature="e#648#757#0" />
-            <element signature="e#775#895#0" />
-            <element signature="e#913#1044#0" />
-            <element signature="e#1062#1188#0" />
-            <element signature="e#1206#1338#0" />
-            <element signature="e#1356#1483#0" />
-            <element signature="e#1501#1619#0" />
-            <element signature="e#1736#1845#0" />
-            <element signature="e#1863#1992#0" />
-            <element signature="e#2010#2136#0" />
-            <element signature="e#2243#2622#0" />
-            <element signature="e#2688#3897#0" />
-            <element signature="e#3932#4726#0" />
+            <element signature="e#496#1501#0" />
+            <element signature="e#514#623#0" />
+            <element signature="e#641#761#0" />
+            <element signature="e#779#910#0" />
+            <element signature="e#928#1054#0" />
+            <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#4863#4952#0" />
+            <element signature="e#5438#6563#0" />
+            <element signature="e#6541#6632#0" />
+            <element signature="e#6657#7170#0" />
+            <element signature="e#6579#7092#0" />
           </folding>
         </state>
       </provider>

public/index.html

@@ -5,36 +5,16 @@
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>React App</title>
   </head>
   <body>
+
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
+    <div id="root" style="height: 100%"></div>
 
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>

src/app/index.js

@@ -1,13 +1,12 @@
 import React, {Component} from 'react';
 import Config from '../config';
 import Schema from '../schema';
-import {Layout, Menu, Input, Button, Alert} from 'antd';
+import Graphql from "../graphiql";
+import {Layout, Menu, Input, Button} from 'antd';
 
 import '../graphiql/index.css';
 import logo from './logo.png';
 
-import GraphiQL from 'graphiql';
-import fetch from 'isomorphic-fetch';
 import gql from "graphql-tag";
 import {Query, Mutation} from "react-apollo";
 
@@ -24,298 +23,17 @@ class App extends Component {
       user: {
         nickname: '',
         avatar: ''
-      },
-      schemas: [
-        {
-          name: 'magazineApp',
-          tables: [
-            {
-              name: 'magazine',
-              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',
-              cols: [
-                {
-                  name: 'id',
-                  type: 'ID',
-                  desc: 'key'
-                },
-                {
-                  name: 'briefIntro',
-                  type: 'string',
-                  desc: 'description'
-                },
-                {
-                  name: 'picture',
-                  type: 'string',
-                  desc: 'description'
-                }
-              ]
-            }
-          ]
-        },
-        {
-          name: 'store',
-          tables: [
-            {
-              name: 'custom',
-              cols: [
-                {
-                  name: 'id',
-                  type: 'string',
-                  desc: 'key'
-                },
-                {
-                  name: 'wealth',
-                  type: 'int',
-                  desc: 'description'
-                }
-              ]
-            }
-          ]
-        },
-        {
-          name: 'online',
-          tables: [
-            {
-              name: 'database',
-              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',
-              cols: [
-                {
-                  name: 'cloud_id',
-                  type: 'string',
-                  desc: 'non-null'
-                },
-                {
-                  name: 'schema_id',
-                  type: 'string',
-                  desc: 'non-null'
-                },
-                {
-                  name: 'user_id',
-                  type: 'string',
-                  desc: 'description'
-                }
-              ]
-            }
-          ]
-        }
-      ],
-      configs: [
-        {
-          name: 'Tenc and Mongo',
-          schemas: ['magazineApp', 'store'],
-          cloudServer: 'tencent',
-          database: 'mongodb',
-          configLocal: {
-            SCF_secretID: 'scfscfscfididididiid',
-            SCF_secretKey: 'i_am_a_key',
-            API_secretID: 'apiapiapiididididiid',
-            API_secretKey: 'apiapipaikeykeykey'
-          }
-        },
-        {
-          name: 'Ali but nedb',
-          schemas: ['online'],
-          cloudServer: 'Aliyun',
-          database: 'nedb',
-          configLocal: {
-            SCF_secretID: 'sididid34idiid',
-            SCF_secretKey: 'scfkeyk243weeykkeykey',
-            API_secretID: 'iidididdapi3eapiapidiid',
-            API_secretKey: 'apiapipav_ikeykeykey'
-          }
-        }
-      ],
-      //api: 'http://service-ci2tk8iu-1254337200.ap-guangzhou.apigateway.myqcloud.com/release/graphql',
-      // 便于开发调试，请删除并换成上面
-      api: 'http://service-eucrnpse-1254337200.ap-guangzhou.apigateway.myqcloud.com/release/graphql'
+      }
     };
 
   }
 
-  idGenSchema = () => {
-    return 'schema of ' + this.state.nickname + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
-  };
-
-  addSchema = (name) => {
-    let newSchema = {
-      name,
-      tables: []
-    };
-
-    this.setState({
-      schemas: [...this.state.schemas, newSchema]
-    });
-
-
-    let varobj = {
-      id: this.idGenSchema(),
-      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>
-    )
-  };
-
-  addTable = (columns, 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, cols: columns})
-    } else {
-      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
-    })
-  };
-
-  addConfig = (content, name) => {
-    if (content === 'new') {
-      this.setState({
-        configs: [...this.state.configs, {
-          name,
-          schemas: [],
-          cloudServer: '',
-          database: '',
-          configLocal: {}
-        }]
-      })
-    } else {
-      let configs = this.state.configs;
-      configs.splice(this.state.configs.findIndex(obj => obj.name === name), 1, content);
-      this.setState({
-        configs
-      })
-    }
-  };
-
-  deleteConfig = (name) => {
-    let configs = this.state.configs;
-    configs.splice(this.state.configs.findIndex(obj => obj.name === name), 1);
-    this.setState({
-      configs
-    });
-  };
-
-  handleClick = (e) => {
+  switchPage = (e) => {
     this.setState({
       current: e.key,
     });
   };
 
-  graphQLFetcher = (graphQLParams) => {
-    // 已经存在的 magazine api， 设想: 用户生成 schema，返回 api 自动替换这里
-    return fetch(this.state.api, {
-      method: 'post',
-      headers: {'Content-Type': 'application/json'},
-      body: JSON.stringify(graphQLParams),
-    }).then(response => response.json());
-  };
-
   login = (id) => {
     const GET_USER = gql`
         query USER($id: ID!) {
@@ -330,10 +48,10 @@ class App extends Component {
         {
           ({loading, error, data}) => {
             if (loading) {
-              return 'loading';
+              return 'loading...';
             }
             if (error) {
-              return 'error';
+              return 'error!';
             }
 
             if (data.user_by_id === null)
@@ -371,11 +89,11 @@ class App extends Component {
 
   render() {
     return (
-      <Layout>
+      <Layout style={{ height: '100%'}}>
         <Header className="header">
           <div className='logo'><img src={logo} alt="logo"/></div>
           <Menu
-            onClick={this.handleClick}
+            onClick={this.switchPage}
             selectedKeys={[this.state.current]}
             mode="horizontal"
             style={{lineHeight: '64px'}}
@@ -414,30 +132,18 @@ class App extends Component {
             }
           </div>
         </Header>
-        <Content style={{padding: '0 50px'}}>
+        <Content style={{padding: '0 50px', height: '100%'}}>
 
           <div>
             {
               (() => {
                 switch (this.state.current) {
                   case 'schema':
-                    return <Schema addSchema={this.addSchema} addTable={this.addTable} deleteTable={this.deleteTable}
-                                   schemas={this.state.schemas}/>;
+                    return <Schema />;
                   case 'config':
-                    return <Config addConfig={this.addConfig} deleteConfig={this.deleteConfig}
-                                   schemas={this.state.schemas} configs={this.state.configs}/>;
+                    return <Config />;
                   default:
-                    return (
-                      <div>
-                        <Alert style={{marginTop: 10}} message="下面的 graphql api 对应的是是 online 的数据库，请勿随便操作"
-                               type="warning"/>
-                        <Input style={{marginTop: 10}} addonBefore="POST" defaultValue={this.state.api}
-                               onChange={(e) => {
-                                 this.setState({api: e.target.value})
-                               }}/>
-                        <GraphiQL fetcher={this.graphQLFetcher}/>
-                      </div>
-                    )
+                    return <Graphql />
                 }
               })()
             }

src/config/diff/index.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 
-import {Input, Select, Button} from 'antd';
+import {Input, Select, Button, Row, Col} from 'antd';
 
 const Option = Select.Option;
 
@@ -79,79 +79,73 @@ class Diff extends Component {
 
   render() {
     return (
-      <div style={{margin: 10}}>
+      <div style={{margin: 20}}>
         <div style={{marginTop: 10}}>
-          <p style={{fontSize: 30}}>Local Config</p>
-
-          <div style={{marginBottom: 30}}>
-            <p><b>Name: {this.state.config.name || 'how about choose / create one in left <------ '}</b></p>
-            {/*<Input value={this.state.config.name} style={{width: 200}} onChange={this.changeName}/>*/}
-          </div>
-
-          <div style={{marginBottom: 30}}>
-            <p><b>Schemas:</b></p>
-
-            <Select
-              mode="tags"
-              placeholder="Please select"
-              value={this.state.config.schemas}
-              style={{width: 300}}
-              onChange={this.changeSchemas}
-            >
-              {
-                this.props.schemas.map((schema) => {
-                  return <Option key={schema.name} value={schema.name}>{schema.name}</Option>
-                })
-              }
-            </Select>
-          </div>
-
+          {
+            this.state.config.name ? '' :
+              <div style={{marginBottom: 30}}>
+                <p><b>how about create a new one</b></p>
+              </div>
+          }
         </div>
 
-        <div style={{marginTop: 30}}>
-          <p style={{fontSize: 30}}>Cloud Config</p>
 
-          <div style={{marginBottom: 30}}>
+        <div>
+          <span className='table-title'> Cloud Config</span>
+
+          <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}>
+            <Select defaultValue="tencent" value={this.state.config.cloudServer} style={{width: 120}}
+                    onChange={this.changeCS}>
               <Option value="tencent">Tencent</Option>
               <Option value="aliyun">Aliyun</Option>
               <Option value="huawei">Huawei</Option>
             </Select>
           </div>
 
-          <div style={{marginBottom: 30}}>
-            <p><b>Serverless Cloud Function</b></p>
-            <div>
-              <div>
-                secretID: <Input value={this.state.config.configLocal.SCF_secretID} style={{width: 200}}
-                                 onChange={this.changeConfigLocal('SCF_secretID')}/>
-              </div>
-              <div>
-                secretKey: <Input value={this.state.config.configLocal.SCF_secretKey} style={{width: 200}}
-                                  onChange={this.changeConfigLocal('SCF_secretKey')}/>
-              </div>
-            </div>
-          </div>
 
-          <div style={{marginBottom: 30}}>
-            <p><b>API</b></p>
-            <div>
-              <div>
-                secretID: <Input value={this.state.config.configLocal.API_secretID} style={{width: 200}}
-                                 onChange={this.changeConfigLocal('API_secretID')}/>
+          <Row>
+            <Col span={6}>
+              <div style={{marginBottom: 30}}>
+                <p><b>Serverless Cloud Function</b></p>
+                <div>
+                  <div>
+                    <span className='vice-title'>secretID: </span>
+                    <Input value={this.state.config.configLocal.SCF_secretID} style={{width: 200}}
+                           onChange={this.changeConfigLocal('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')}/>
+                  </div>
+                </div>
               </div>
-              <div>
-                secretKey: <Input value={this.state.config.configLocal.API_secretKey} style={{width: 200}}
-                                  onChange={this.changeConfigLocal('API_secretKey')}/>
+            </Col>
+
+            <Col span={6}>
+              <div style={{marginBottom: 30}}>
+                <p><b>API</b></p>
+                <div>
+                  <div>
+                    <span className='vice-title'>secretID: </span>
+                    <Input value={this.state.config.configLocal.API_secretID} style={{width: 200}}
+                           onChange={this.changeConfigLocal('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')}/>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
+            </Col>
+          </Row>
 
         </div>
 
         <div style={{marginBottom: 30}}>
-          <p><b>Database</b></p>
+          <span className='table-title'> Database Config</span>
           <Select defaultValue="mongodb" value={this.state.config.database} style={{width: 120}}
                   onChange={this.changeDataBase}>
             <Option value="mongodb">MongoDB</Option>
@@ -160,7 +154,7 @@ class Diff extends Component {
           </Select>
         </div>
 
-        <Button type="primary" onClick={()=>{
+        <Button type="primary" onClick={() => {
           this.props.addConfig(this.state.config, this.state.config.name);
         }}>SUBMIT</Button>
         <Button type="danger" onClick={() => {

src/config/index.css

@@ -17,3 +17,23 @@ p.show {
     margin: 5px 0 3px 10px;
     cursor: pointer;
 }
+
+.table-title {
+    font-weight: bold;
+    font-size: large;
+    display: block;
+    height: 35px;
+}
+
+.table-title::before {
+    content: '|';
+    display: inline-block;
+    font-weight: 900;
+    color: #0B7FC7;
+    /*border-right: */
+}
+
+.vice-title {
+    width: 80px;
+    display: inline-block;
+}

src/config/index.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 
-import {Row, Col, Input, Icon, Button} from 'antd';
+import {Row, Col, Input, Button} from 'antd';
 
 import './index.css';
 import Diff from './diff';
@@ -15,7 +15,34 @@ class Config extends Component {
     this.state = {
       currentConfig: '',
       switch: true,
+      configs: [
+        {
+          name: 'Tenc and Mongo',
+          cloudServer: 'tencent',
+          database: 'mongodb',
+          configLocal: {
+            SCF_secretID: 'scfscfscfididididiid',
+            SCF_secretKey: 'i_am_a_key',
+            API_secretID: 'apiapiapiididididiid',
+            API_secretKey: 'apiapipaikeykeykey'
+          }
+        },
+        {
+          name: 'Ali but nedb',
+          cloudServer: 'Aliyun',
+          database: 'nedb',
+          configLocal: {
+            SCF_secretID: 'sididid34idiid',
+            SCF_secretKey: 'scfkeyk243weeykkeykey',
+            API_secretID: 'iidididdapi3eapiapidiid',
+            API_secretKey: 'apiapipav_ikeykeykey'
+          }
+        }
+      ]
     };
+    if(this.state.configs.length !== 0) {
+      this.state.currentConfig = this.state.configs[0].name
+    }
   }
 
   switchConfig = (name) => {
@@ -26,6 +53,42 @@ class Config extends Component {
     }
   };
 
+  addConfig = (content, name) => {
+    if (content === 'new') {
+      this.setState({
+        configs: [...this.state.configs, {
+          name,
+          schemas: [],
+          cloudServer: '',
+          database: '',
+          configLocal: {}
+        }]
+      })
+    } else {
+      let configs = this.state.configs;
+      configs.splice(this.state.configs.findIndex(obj => obj.name === name), 1, content);
+      this.setState({
+        configs
+      })
+    }
+  };
+
+  deleteConfig = (name) => {
+    let configs = this.state.configs;
+    configs.splice(this.state.configs.findIndex(obj => obj.name === name), 1);
+    this.setState({
+      configs
+    });
+    if (this.state.configs.length !== 0) {
+      this.setState({
+        currentConfig: this.state.configs[0].name
+      });
+    } else {
+      this.setState({
+        currentConfig: ''
+      });
+    }
+  };
 
   render() {
     return (
@@ -36,47 +99,35 @@ class Config extends Component {
               <div className='current'>{this.state.currentConfig}</div>
               {
                 this.state.switch?
-                  <Button className='add' type='dashed' icon="plus" onClick={()=>{this.setState({switch: false})}}>Add Config</Button> :
+                  <Button className='add' type='dashed' icon="plus" onClick={()=>{this.setState({switch: false})}} /> :
                   <Search
-                    className='add'
+                    className='add-input'
                     placeholder="input config_name"
                     enterButton="Confirm"
                     onSearch={value => {
                       this.setState({
                         switch: true,
                       });
-                      this.props.addConfig('new', value);
+                      this.addConfig('new', value);
                     }}
                     disabled={this.state.switch}
                   />
               }
             </div>
 
-
-            <Search
-              placeholder="search configs"
-              enterButton
-              onSearch={value => console.log(value)}
-              style={{marginTop: 10}}
-            />
             {
-              this.props.configs.map((config) => {
+              this.state.configs.map((config) => {
                 return <div key={config.name} onClick={this.switchConfig(config.name)} className='title'>
                   <Row>
-                    <Col span={22}>Configs: ({config.name})({config.schemas.length})</Col>
+                    <Col span={22}>Config: ({config.name})</Col>
                   </Row>
-                    {
-                      config.schemas.map((schema)=>{
-                        return <p key={schema} className='show'><Icon type="database" theme="filled"/>{schema}</p>
-                      })
-                    }
                 </div>
               })
             }
 
           </Col>
           <Col span={18}>
-            <Diff addConfig={this.props.addConfig} deleteConfig={this.props.deleteConfig} currentConfig={this.state.currentConfig} configs={this.props.configs} schemas={this.props.schemas}/>
+            <Diff addConfig={this.addConfig} deleteConfig={this.deleteConfig} currentConfig={this.state.currentConfig} configs={this.state.configs} />
           </Col>
         </Row>
       </div>

src/graphiql/index.js

@@ -0,0 +1,43 @@
+import React, {Component} from 'react';
+import { Input, Alert} from 'antd';
+import GraphiQL from "graphiql";
+import fetch from "isomorphic-fetch";
+
+
+class Graphql extends Component {
+
+  constructor() {
+    super();
+    this.state = {
+      //api: 'http://service-ci2tk8iu-1254337200.ap-guangzhou.apigateway.myqcloud.com/release/graphql',
+      // 便于开发调试，请删除并换成上面
+      api: 'http://service-eucrnpse-1254337200.ap-guangzhou.apigateway.myqcloud.com/release/graphql'
+    }
+  };
+
+  graphQLFetcher = (graphQLParams) => {
+    // 已经存在的 magazine api， 设想: 用户生成 schema，返回 api 自动替换这里
+    return fetch(this.state.api, {
+      method: 'post',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify(graphQLParams),
+    }).then(response => response.json());
+  };
+
+  render() {
+    return (
+      <div>
+        <Alert style={{marginTop: 10}} message="下面的 graphql api 对应的是是 online 的数据库"
+               type="warning" banner closable/>
+        <Input style={{marginTop: 10}} addonBefore="POST" defaultValue={this.state.api}
+               onChange={(e) => {
+                 this.setState({api: e.target.value})
+               }}/>
+        <GraphiQL fetcher={this.graphQLFetcher}/>
+      </div>
+    )
+  }
+
+}
+
+export default Graphql;

src/schema/change/index.js

@@ -10,9 +10,10 @@ class Change extends Component {
     this.state = {
       currentSchema: props.currentSchema,
       currentTable: props.currentTable,
+      remark: props.remark,
       columns: props.columns,
       newColName: '',
-      newColType: 'type'
+      newColType: 'type',
     }
   }
 
@@ -85,44 +86,59 @@ class Change extends Component {
     this.setState({
       currentTable: next.currentTable,
       currentSchema: next.currentSchema,
-      columns: next.columns
+      columns: next.columns,
+      remark: next.remark
     });
   };
 
   render() {
     return (
-      <div>
-        <div>
-          Table name:
+      <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}>
-                Column ({index + 1}):
-                <Input style={{width: 120}} value={col.name} onChange={this.handleNameChange(index)}/>
-                <Select defaultValue={col.type} style={{width: 120}} onChange={this.handleTypeChange(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)}>
                   <Option value="string">String</Option>
                   <Option value="int">Int</Option>
                   <Option value="float">Float</Option>
                 </Select>
-                <Select defaultValue={col.desc} style={{width: 120}} onChange={this.handleDescChange(index)}>
+                <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>
                 </Select>
-                <Icon type="close-circle" theme="twoTone" style={{cursor: 'pointer'}}
+                <Icon type="delete" theme="outlined" style={{cursor: 'pointer'}}
                       onClick={this.handleColDelete(index)}/>
               </div>
             )
           }
           <div>
-            Column (NEW):
-            <Input placeholder="column_name" style={{width: 120}} onChange={this.handleNameNew}
+            <Input placeholder="column_name" style={{width: 120, marginRight: 10}} onChange={this.handleNameNew}
                    value={this.state.newColName}/>
-            <Select defaultValue="type" style={{width: 120}} onChange={this.handleTypeNew}
+            <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>
@@ -130,14 +146,16 @@ class Change extends Component {
             </Select>
           </div>
         </div>
-        <Button type="primary" onClick={() => {
-          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 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>
     )
   }

src/schema/index.css

@@ -8,14 +8,16 @@
 }
 
 .title {
-    font-weight: bold;
-    font-size: 16px;
+    font-weight: bolder;
+    font-size: 18px;
     margin: 10px 0 0 5px;
 }
 
 p.show {
     margin: 5px 0 3px 10px;
     cursor: pointer;
+    font-size: 16px;
+    font-weight: bold;
 }
 
 .wrapper {
@@ -27,4 +29,36 @@ p.show {
     right: 10px;
     top: 10px;
     z-index: 2;
+}
+
+.add-input {
+    margin-top: 10px;
+}
+
+.column-title {
+    /*padding-left: 10px;*/
+    font-weight: bolder;
+    font-size: larger;
+    display: inline-block;
+    width: 130px;
+    height: 35px;
+}
+
+.table-title {
+    font-weight: bold;
+    font-size: large;
+    display: block;
+    height: 35px;
+}
+
+.table-title::before {
+    content: '|';
+    display: inline-block;
+    font-weight: 900;
+    color: #0B7FC7;
+    /*border-right: */
+}
+.remark {
+    font-weight: lighter;
+    font-size: smaller;
 }

src/schema/index.js

@@ -3,6 +3,8 @@ 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;
 
@@ -11,21 +13,178 @@ class Schema extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      currentSchema: 'magazine',
-      currentTable: 'user',
-      switch: true
+      currentSchema: '',
+      currentTable: '',
+      switch: true,
+      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;
     }
   }
 
-  changeSchema = (schema) => {
-    return () => {
+  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);
+    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({
-        currentSchema: schema
+        currentTable: tables[0].name
+      })
+    } else {
+      this.setState({
+        currentTable: ''
       })
     }
   };
 
-  changeTable = (table) => {
+  switchTable = (table) => {
     return () => {
       this.setState({
         currentTable: table
@@ -33,19 +192,112 @@ class Schema extends Component {
     }
   };
 
+  addSchema = (name) => {
+    let newSchema = {
+      name,
+      tables: []
+    };
+
+    this.setState({
+      schemas: [...this.state.schemas, newSchema]
+    });
+
+
+    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) => {
+    return (e) => {
+      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
+      })
+    }
+  };
+
   findColumns = () => {
-    let schema = this.props.schemas.find(schema => schema.name === this.state.currentSchema);
-    if(schema === undefined) return [];
+    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 [];
+      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>
@@ -54,10 +306,12 @@ class Schema extends Component {
             <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})}}>Add Schema</Button> :
+                this.state.switch ?
+                  <Button className='add' type='dashed' icon="plus" onClick={() => {
+                    this.setState({switch: false})
+                  }}/> :
                   <Search
-                    className='add'
+                    className='add-input'
                     placeholder="input schema_name"
                     enterButton="Confirm"
                     onSearch={value => {
@@ -66,31 +320,34 @@ class Schema extends Component {
                         currentSchema: value,
                         currentTable: ''
                       });
-                      this.props.addSchema(value);
+                      this.addSchema(value);
                     }}
                     disabled={this.state.switch}
                   />
               }
             </div>
 
-            <Search
-              placeholder="search schema"
-              enterButton
-              onSearch={value => console.log(value)}
-              style={{marginTop: 10}}
-            />
-
             {
-              this.props.schemas.map((schema) => {
-                return <div key={schema.name} onClick={this.changeSchema(schema.name)} className='title'>
+              this.state.schemas.map((schema) => {
+                return <div key={schema.name} className='title' onClick={this.switchSchema(schema.name)}>
                   <Row>
-                    <Col span={22}>Schemas: ({schema.name}) ({schema.tables.length})</Col>
-                    <Col span={2}><Button onClick={() => this.setState({currentTable: 'add'})} type="primary"
-                                          shape="circle" icon="plus" size='small'/></Col>
+                    <Col span={20}>{schema.name}</Col>
+                    <Col span={4}>
+                      <Button onClick={() => this.setState({currentTable: 'add'})} type="primary"
+                              shape="circle" icon="plus" size='small'/>
+                      <Button onClick={this.deleteSchema(schema.name)} type="danger"
+                              shape="circle" icon="delete" size='small' style={{marginLeft: 3}}/>
+                    </Col>
                   </Row>
+
+
                   {
                     schema.tables.map((table) =>
-                      <p onClick={this.changeTable(table.name)} key={table.name} className='show'><Icon type="ordered-list" theme="outlined" /> {table.name}
+
+                      <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>
                     )
                   }
@@ -103,9 +360,11 @@ class Schema extends Component {
           <Col span={18}>
             {
               this.state.currentTable === 'add' ?
-                <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} deleteTable={this.props.deleteTable}/>
+                <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>
@@ -116,33 +375,4 @@ class Schema extends Component {
 
 export default Schema;
 
-class AddTable extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      columns: []
-    }
-  }
-
-  render() {
-    return (
-      <div style={{margin: 10}}>
-        <div style={{fontSize: 30}}>Add a new table to <b>{this.props.currentSchema}</b></div>
-        <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 {
-  render() {
-    return (
-      <div style={{margin: 10}}>
-        <div style={{fontSize: 30}}>{this.props.currentSchema} > {this.props.currentTable}</div>
-        <Change currentSchema={this.props.currentSchema} currentTable={this.props.currentTable} columns={this.props.columns} addTable={this.props.addTable} deleteTable={this.props.deleteTable}/>
-      </div>
-    )
-  }
-}
-