ok

.idea/workspace.xml

@@ -2,20 +2,19 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="93d86d6a-0860-401c-996e-30fc26553ffc" name="Default Changelist" comment="">
-      <change afterPath="$PROJECT_DIR$/.idea/codeStyles/codeStyleConfig.xml" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/.idea/dictionaries/ioobot.xml" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/config.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/graphiql.css" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/logo.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/schema.css" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/schema.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/App.css" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/App.test.js" beforeDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/app/index.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/config/index.css" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/config/index.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/schema/change/index.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/schema/index.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/App.js" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/config.js" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/graphiql.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/graphiql/index.css" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/logo.svg" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/yarn.lock" beforeDir="false" afterPath="$PROJECT_DIR$/yarn.lock" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/logo.png" beforeDir="false" afterPath="$PROJECT_DIR$/public/logo.png" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/schema.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/schema/index.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/schema.js" beforeDir="false" />
     </list>
     <ignored path="$PROJECT_DIR$/.tmp/" />
     <ignored path="$PROJECT_DIR$/temp/" />
@@ -36,18 +35,23 @@
       </usages-collector>
       <usages-collector id="statistics.file.extensions.open">
         <counts>
-          <entry key="css" value="6" />
-          <entry key="js" value="12" />
-          <entry key="json" value="1" />
+          <entry key="css" value="10" />
+          <entry key="html" value="1" />
+          <entry key="ico" value="1" />
+          <entry key="js" value="17" />
+          <entry key="json" value="4" />
+          <entry key="lock" value="2" />
           <entry key="png" value="1" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.open">
         <counts>
-          <entry key="CSS" value="6" />
-          <entry key="Image" value="1" />
-          <entry key="JSON" value="1" />
-          <entry key="JavaScript" value="12" />
+          <entry key="CSS" value="10" />
+          <entry key="HTML" value="1" />
+          <entry key="Image" value="2" />
+          <entry key="JSON" value="4" />
+          <entry key="JavaScript" value="17" />
+          <entry key="yarn.lock" value="2" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.js.language.service.starts">
@@ -57,14 +61,14 @@
       </usages-collector>
       <usages-collector id="statistics.file.extensions.edit">
         <counts>
-          <entry key="css" value="239" />
-          <entry key="js" value="3618" />
+          <entry key="css" value="307" />
+          <entry key="js" value="8650" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.edit">
         <counts>
-          <entry key="CSS" value="239" />
-          <entry key="JavaScript" value="3618" />
+          <entry key="CSS" value="307" />
+          <entry key="JavaScript" value="8650" />
         </counts>
       </usages-collector>
     </session>
@@ -72,42 +76,48 @@
   <component name="FileEditorManager">
     <leaf>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/App.js">
+        <entry file="file://$PROJECT_DIR$/src/app/index.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="95">
-              <caret line="5" column="24" selection-start-line="5" selection-start-column="24" selection-end-line="5" selection-end-column="24" />
+            <state relative-caret-position="2734">
+              <caret line="164" column="78" selection-start-line="164" selection-start-column="78" selection-end-line="164" selection-end-column="78" />
+              <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/logo.png">
-          <provider selected="true" editor-type-id="images" />
+        <entry file="file://$PROJECT_DIR$/src/schema/index.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="-1528">
+              <caret line="30" column="27" lean-forward="true" selection-start-line="30" selection-start-column="27" selection-end-line="30" selection-end-column="27" />
+              <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/graphiql.css">
+        <entry file="file://$PROJECT_DIR$/src/graphiql/index.css">
           <provider selected="true" editor-type-id="text-editor">
             <state relative-caret-position="399">
-              <caret line="21" column="25" lean-forward="true" selection-start-line="21" selection-start-column="25" selection-end-line="21" selection-end-column="25" />
+              <caret line="21" column="25" selection-start-line="21" selection-start-column="25" selection-end-line="21" selection-end-column="25" />
             </state>
           </provider>
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/config.js">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="38">
-              <caret line="2" selection-start-line="2" selection-end-line="2" selection-end-column="32" />
-            </state>
-          </provider>
+        <entry file="file://$PROJECT_DIR$/public/manifest.json">
+          <provider selected="true" editor-type-id="text-editor" />
         </entry>
       </file>
       <file pinned="false" current-in-tab="true">
-        <entry file="file://$PROJECT_DIR$/src/schema.js">
+        <entry file="file://$PROJECT_DIR$/src/config/index.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="472">
-              <caret line="86" column="31" lean-forward="true" selection-start-line="86" selection-start-column="31" selection-end-line="86" selection-end-column="31" />
+            <state relative-caret-position="453">
+              <caret line="68" column="14" selection-start-line="68" selection-start-column="14" selection-end-line="68" selection-end-column="14" />
               <folding>
                 <element signature="e#0#39#0" expanded="true" />
               </folding>
@@ -116,37 +126,51 @@
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/schema.css">
+        <entry file="file://$PROJECT_DIR$/src/config/index.css">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="323">
-              <caret line="17" column="16" selection-start-line="17" selection-start-column="16" selection-end-line="17" selection-end-column="16" />
+            <state relative-caret-position="247">
+              <caret line="13" column="1" selection-start-line="13" selection-start-column="1" selection-end-line="13" selection-end-column="1" />
             </state>
           </provider>
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/index.css">
-          <provider selected="true" editor-type-id="text-editor" />
+        <entry file="file://$PROJECT_DIR$/src/schema/index.css">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="513">
+              <caret line="27" column="11" selection-start-line="27" selection-start-column="11" selection-end-line="27" selection-end-column="11" />
+            </state>
+          </provider>
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/index.js">
+        <entry file="file://$PROJECT_DIR$/src/schema/change/index.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="114">
-              <caret line="6" selection-start-line="6" selection-end-line="6" />
+            <state relative-caret-position="551">
+              <caret line="29" column="26" lean-forward="true" selection-start-line="29" selection-start-column="26" selection-end-line="29" selection-end-column="26" />
               <folding>
-                <element signature="e#0#26#0" expanded="true" />
+                <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/serviceWorker.js">
+        <entry file="file://$PROJECT_DIR$/src/index.css">
           <provider selected="true" editor-type-id="text-editor">
-            <state>
+            <state relative-caret-position="266">
+              <caret line="14" lean-forward="true" selection-start-line="14" selection-end-line="14" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/index.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="171">
+              <caret line="9" lean-forward="true" selection-start-line="9" selection-end-line="9" />
               <folding>
-                <element signature="n#!!doc" expanded="true" />
+                <element signature="e#0#26#0" expanded="true" />
               </folding>
             </state>
           </provider>
@@ -157,8 +181,8 @@
   <component name="FileTemplateManagerImpl">
     <option name="RECENT_TEMPLATES">
       <list>
-        <option value="JavaScript File" />
         <option value="CSS File" />
+        <option value="JavaScript File" />
       </list>
     </option>
   </component>
@@ -166,6 +190,13 @@
     <findStrings>
       <find>top</find>
       <find>topbar</find>
+      <find>databa</find>
+      <find>this.state.schemas</find>
+      <find>this.</find>
+      <find>c',</find>
+      <find>props</find>
+      <find>none</find>
+      <find>addS</find>
     </findStrings>
   </component>
   <component name="Git.Settings">
@@ -175,13 +206,23 @@
     <option name="CHANGED_PATHS">
       <list>
         <option value="$PROJECT_DIR$/config/webpack.config.dev.js" />
-        <option value="$PROJECT_DIR$/src/index.js" />
         <option value="$PROJECT_DIR$/src/graphiql.css" />
         <option value="$PROJECT_DIR$/src/config.js" />
         <option value="$PROJECT_DIR$/src/schema.css" />
         <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/index.js" />
+        <option value="$PROJECT_DIR$/src/schema/index.css" />
+        <option value="$PROJECT_DIR$/src/app/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" />
       </list>
     </option>
   </component>
@@ -201,11 +242,14 @@
       <path value="$PROJECT_DIR$/package.json" />
     </packageJsonPaths>
   </component>
-  <component name="ProjectFrameBounds" extendedState="6" fullScreen="true">
-    <option name="x" value="635" />
-    <option name="y" value="47" />
-    <option name="width" value="1827" />
-    <option name="height" value="1230" />
+  <component name="ProjectFrameBounds">
+    <option name="x" value="963" />
+    <option name="y" value="115" />
+    <option name="width" value="1847" />
+    <option name="height" value="1341" />
+  </component>
+  <component name="ProjectLevelVcsManager">
+    <ConfirmationsSetting value="2" id="Add" />
   </component>
   <component name="ProjectView">
     <navigator proportions="" version="1">
@@ -223,17 +267,43 @@
             <path>
               <item name="online" type="b2602c69:ProjectViewProjectNode" />
               <item name="online" type="462c0819:PsiDirectoryNode" />
+              <item name="public" type="462c0819:PsiDirectoryNode" />
+            </path>
+            <path>
+              <item name="online" type="b2602c69:ProjectViewProjectNode" />
+              <item name="online" type="462c0819:PsiDirectoryNode" />
+              <item name="src" 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="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="public" type="462c0819:PsiDirectoryNode" />
+              <item name="src" type="462c0819:PsiDirectoryNode" />
+              <item name="graphiql" 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 />
@@ -256,7 +326,11 @@
   </component>
   <component name="RecentsManager">
     <key name="MoveFile.RECENT_KEYS">
-      <recent name="$PROJECT_DIR$/src" />
+      <recent name="$PROJECT_DIR$/src/config" />
+      <recent name="$PROJECT_DIR$/public" />
+      <recent name="$PROJECT_DIR$/src/schema" />
+      <recent name="$PROJECT_DIR$/src/graphiql" />
+      <recent name="$PROJECT_DIR$/src/app" />
     </key>
   </component>
   <component name="RunDashboard">
@@ -281,24 +355,24 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1540954591627</updated>
-      <workItem from="1540954593719" duration="20837000" />
+      <workItem from="1540954593719" duration="45983000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="20837000" />
+    <option name="totallyTimeSpent" value="45983000" />
   </component>
   <component name="ToolWindowManager">
-    <frame x="988" y="0" width="1572" height="1440" extended-state="6" />
+    <frame x="963" y="115" width="1847" height="1341" extended-state="0" />
     <editor active="true" />
     <layout>
       <window_info id="npm" side_tool="true" />
       <window_info id="Favorites" side_tool="true" />
-      <window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.29078013" />
+      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.13800657" />
       <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
       <window_info anchor="bottom" id="Docker" show_stripe_button="false" />
       <window_info anchor="bottom" id="Version Control" show_stripe_button="false" />
-      <window_info active="true" anchor="bottom" id="Terminal" visible="true" weight="0.099270076" />
+      <window_info anchor="bottom" id="Terminal" visible="true" weight="0.20176141" />
       <window_info anchor="bottom" id="Event Log" side_tool="true" />
       <window_info anchor="bottom" id="Message" order="0" />
       <window_info anchor="bottom" id="Find" order="1" weight="0.32952547" />
@@ -319,13 +393,6 @@
     <option name="myLimit" value="2678400000" />
   </component>
   <component name="editorHistoryManager">
-    <entry file="file://$PROJECT_DIR$/package.json">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="202">
-          <caret line="66" column="4" selection-start-line="66" selection-start-column="4" selection-end-line="66" selection-end-column="4" />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/config/webpackDevServer.config.js">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="-7" />
@@ -353,66 +420,125 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/index.css">
+    <entry file="file://$PROJECT_DIR$/src/app.css">
       <provider selected="true" editor-type-id="text-editor" />
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/graphiql.css">
+    <entry file="file://$PROJECT_DIR$/package.json">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="399">
-          <caret line="21" column="25" lean-forward="true" selection-start-line="21" selection-start-column="25" selection-end-line="21" selection-end-column="25" />
+        <state relative-caret-position="1254">
+          <caret line="66" column="4" selection-start-line="66" selection-start-column="4" selection-end-line="66" selection-end-column="4" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/app.css">
+    <entry file="file://$PROJECT_DIR$/yarn.lock">
+      <provider selected="true" editor-type-id="text-editor" />
+    </entry>
+    <entry file="file://$PROJECT_DIR$/package-lock.json">
       <provider selected="true" editor-type-id="text-editor" />
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/config.js">
+    <entry file="file://$PROJECT_DIR$/src/serviceWorker.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="38">
-          <caret line="2" selection-start-line="2" selection-end-line="2" selection-end-column="32" />
+        <state relative-caret-position="418">
+          <caret line="22" column="34" lean-forward="true" selection-start-line="22" selection-start-column="34" selection-end-line="22" selection-end-column="34" />
+          <folding>
+            <element signature="n#!!doc" expanded="true" />
+          </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/logo.png">
+    <entry file="file://$PROJECT_DIR$/public/logo.png">
       <provider selected="true" editor-type-id="images" />
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/serviceWorker.js">
+    <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/config/index.js">
+      <provider selected="true" editor-type-id="text-editor" />
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/graphiql/index.js">
+      <provider selected="true" editor-type-id="text-editor" />
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/schema/index.js">
+      <provider selected="true" editor-type-id="text-editor" />
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/index.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state>
-          <folding>
-            <element signature="n#!!doc" expanded="true" />
-          </folding>
+        <state relative-caret-position="266">
+          <caret line="14" lean-forward="true" selection-start-line="14" selection-end-line="14" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/App.js">
+    <entry file="file://$PROJECT_DIR$/src/graphiql/index.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="95">
-          <caret line="5" column="24" selection-start-line="5" selection-start-column="24" selection-end-line="5" selection-end-column="24" />
+        <state relative-caret-position="399">
+          <caret line="21" column="25" selection-start-line="21" selection-start-column="25" selection-end-line="21" selection-end-column="25" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/schema.css">
+    <entry file="file://$PROJECT_DIR$/src/schema/index.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="323">
-          <caret line="17" column="16" selection-start-line="17" selection-start-column="16" selection-end-line="17" selection-end-column="16" />
+        <state relative-caret-position="513">
+          <caret line="27" column="11" selection-start-line="27" selection-start-column="11" selection-end-line="27" selection-end-column="11" />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="114">
-          <caret line="6" selection-start-line="6" selection-end-line="6" />
+        <state relative-caret-position="171">
+          <caret line="9" lean-forward="true" selection-start-line="9" selection-end-line="9" />
           <folding>
             <element signature="e#0#26#0" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/schema.js">
+    <entry file="file://$PROJECT_DIR$/src/schema/index.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="-1528">
+          <caret line="30" column="27" lean-forward="true" selection-start-line="30" selection-start-column="27" selection-end-line="30" selection-end-column="27" />
+          <folding>
+            <element signature="e#0#39#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/schema/change/index.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="551">
+          <caret line="29" column="26" lean-forward="true" selection-start-line="29" selection-start-column="26" selection-end-line="29" selection-end-column="26" />
+          <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="2734">
+          <caret line="164" column="78" selection-start-line="164" selection-start-column="78" selection-end-line="164" selection-end-column="78" />
+          <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="247">
+          <caret line="13" column="1" selection-start-line="13" selection-start-column="1" selection-end-line="13" selection-end-column="1" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/config/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="472">
-          <caret line="86" column="31" lean-forward="true" selection-start-line="86" selection-start-column="31" selection-end-line="86" selection-end-column="31" />
+        <state relative-caret-position="453">
+          <caret line="68" column="14" selection-start-line="68" selection-start-column="14" selection-end-line="68" selection-end-column="14" />
           <folding>
             <element signature="e#0#39#0" expanded="true" />
           </folding>

src/App.js

@@ -1,78 +0,0 @@
-import React, {Component} from 'react';
-import Config from './config';
-import Schema from './schema';
-import {Menu, Row, Col} from 'antd';
-
-import './graphiql.css';
-
-import GraphiQL from 'graphiql';
-import fetch from 'isomorphic-fetch';
-
-class App extends Component {
-  constructor() {
-    super();
-    this.state = {
-      current: 'schema'
-    }
-  }
-
-  handleClick = (e) => {
-    this.setState({
-      current: e.key,
-    });
-  };
-
-  graphQLFetcher = (graphQLParams) => {
-    return fetch('http://service-eucrnpse-1254337200.ap-guangzhou.apigateway.myqcloud.com/release/graphql', {
-      method: 'post',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(graphQLParams),
-    }).then(response => response.json());
-  };
-
-
-  render() {
-    return (
-      <div>
-        <Row>
-          <Col span={6}>
-            <div className='logo'>ioobot</div>
-          </Col>
-          <Col span={18}>
-            <Menu
-              onClick={this.handleClick}
-              selectedKeys={[this.state.current]}
-              mode="horizontal"
-            >
-              <Menu.Item key="schema">
-                SCHEMA
-              </Menu.Item>
-              <Menu.Item key="config">
-                CONFIG
-              </Menu.Item>
-              <Menu.Item key="graphiql">
-                GRAPHIQL
-              </Menu.Item>
-            </Menu>
-          </Col>
-        </Row>
-        <div>
-          {
-            (() => {
-              switch (this.state.current) {
-                case 'schema':
-                  return <Schema/>;
-                case 'config':
-                  return <Config/>;
-                default:
-                  return <GraphiQL fetcher={this.graphQLFetcher} />
-              }
-            })()
-          }
-        </div>
-      </div>
-    );
-  }
-}
-
-export default App;

src/app/index.js

@@ -0,0 +1,179 @@
+import React, {Component} from 'react';
+import Config from '../config';
+import Schema from '../schema';
+import {Menu, Row, Col} from 'antd';
+
+import '../graphiql/index.css';
+
+import GraphiQL from 'graphiql';
+import fetch from 'isomorphic-fetch';
+
+class App extends Component {
+  constructor() {
+    super();
+    this.state = {
+      current: 'schema',
+      schemas: [
+        {
+          name: 'magazine',
+          tables: [
+            {
+              name: 'user',
+              cols: [
+                {
+                  name: 'nickname',
+                  type: 'string',
+                  desc: 'non-null'
+                },
+                {
+                  name: 'id',
+                  type: 'string',
+                  desc: 'key'
+                },
+                {
+                  name: 'avatar',
+                  type: 'string',
+                  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'
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  }
+
+  addSchema = (name) => {
+    this.setState({
+      schemas: [...this.state.schemas, {
+        name,
+        tables: []
+      }]
+    })
+  };
+
+  addTable = (columns, tableName, schemaName) => {
+    let schemas = this.state.schemas;
+    console.log(columns, tableName, schemaName, schemas);
+    let targetSchema = schemas.find(obj => obj.name === schemaName);
+    let targetTable = targetSchema.tables.find(obj => obj.name === tableName);
+    if(targetTable === undefined) {
+      targetSchema.tables.push({name: tableName, cols: columns})
+    } else {
+      targetTable.cols = columns
+    }
+    this.setState({
+      schemas
+    })
+  };
+
+  handleClick = (e) => {
+    this.setState({
+      current: e.key,
+    });
+  };
+
+  graphQLFetcher = (graphQLParams) => {
+    return fetch('http://service-eucrnpse-1254337200.ap-guangzhou.apigateway.myqcloud.com/release/graphql', {
+      method: 'post',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify(graphQLParams),
+    }).then(response => response.json());
+  };
+
+
+  render() {
+    return (
+      <div>
+        <Row>
+          <Col span={6}>
+            <div className='logo'>ioobot</div>
+          </Col>
+          <Col span={18}>
+            <Menu
+              onClick={this.handleClick}
+              selectedKeys={[this.state.current]}
+              mode="horizontal"
+            >
+              <Menu.Item key="schema">
+                SCHEMA
+              </Menu.Item>
+              <Menu.Item key="config">
+                CONFIG
+              </Menu.Item>
+              <Menu.Item key="graphiql">
+                GRAPHIQL
+              </Menu.Item>
+            </Menu>
+          </Col>
+        </Row>
+        <div>
+          {
+            (() => {
+              switch (this.state.current) {
+                case 'schema':
+                  return <Schema addSchema={this.addSchema} addTable={this.addTable} schemas={this.state.schemas}/>;
+                case 'config':
+                  return <Config schemas={this.state.schemas}/>;
+                default:
+                  return <GraphiQL fetcher={this.graphQLFetcher}/>
+              }
+            })()
+          }
+        </div>
+      </div>
+    );
+  }
+}
+
+export default App;

src/config.js

@@ -1,22 +0,0 @@
-import React, {Component} from 'react';
-
-import { Row, Col } from 'antd';
-
-class Config extends Component {
-  constructor() {
-    super();
-  }
-
-  render() {
-    return (
-      <div>
-        <Row>
-          <Col span={6}>col-6</Col>
-          <Col span={18}>col-18</Col>
-        </Row>
-      </div>
-    )
-  }
-
-}
-export default Config;

src/schema.css → src/config/index.css

@@ -11,9 +11,4 @@
     font-weight: bold;
     font-size: 16px;
     margin: 10px 0 0 5px;
-}
-
-p.show {
-    margin: 5px 0 3px 10px;
-    cursor: pointer;
 }

src/config/index.js

@@ -0,0 +1,116 @@
+import React, {Component} from 'react';
+
+import {Row, Col, Input, Select, Button} from 'antd';
+
+import './index.css';
+
+const Search = Input.Search;
+const Option = Select.Option;
+
+
+class Index extends Component {
+  constructor(props) {
+    super();
+    this.state = {
+      currentSchema: 'magazine',
+    }
+  }
+
+  changeSchema = (schema) => {
+    return () => {
+      this.setState({
+        currentSchema: schema
+      })
+    }
+  };
+
+  handleCSChange = () => {
+
+  };
+
+  render() {
+    return (
+      <div>
+        <Row>
+          <Col span={6}>
+
+            <div className='current'>{this.state.currentSchema}</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'>
+                  <Row>
+                    <Col span={22}>Schemas: ({schema.name})</Col>
+                  </Row>
+                </div>
+              })
+            }
+
+          </Col>
+          <Col span={18}>
+            You are in config of <b>{this.state.currentSchema}</b>
+            <div>
+              <p>云服务器商选择配置</p>
+              <p>云服务器商</p>
+              <Select defaultValue="tencent" style={{ width: 120 }} onChange={this.handleCSChange}>
+                <Option value="tencent">Tencent</Option>
+                <Option disabled value="aliyun">Aliyun</Option>
+                <Option disabled value="huawei">Huawei</Option>
+              </Select>
+            </div>
+
+
+            <div>
+
+              <div>
+                <p><b>Serverless Cloud Function</b></p>
+                <div>
+                  <div>
+                    secretID: <Input style={{width: 200}}/>
+                  </div>
+                  <div>
+                    secretKey: <Input style={{width: 200}}/>
+                  </div>
+                </div>
+              </div>
+
+              <div>
+                <p><b>API</b></p>
+                <div>
+                  <div>
+                    secretID: <Input style={{width: 200}}/>
+                  </div>
+                  <div>
+                    secretKey: <Input style={{width: 200}}/>
+                  </div>
+                </div>
+              </div>
+
+            </div>
+
+            <div>
+              <p><b>Database</b></p>
+              <Select defaultValue="mongodb" style={{ width: 120 }} onChange={this.handleCSChange}>
+                <Option value="mongodb">MongoDB</Option>
+                <Option disabled value="nedb">nedb</Option>
+                <Option disabled value="postgres">postgres</Option>
+              </Select>
+            </div>
+
+            <Button type="primary">
+              submit
+            </Button>
+          </Col>
+        </Row>
+      </div>
+    )
+  }
+
+}
+
+export default Index;

src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import App from './app';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(<App />, document.getElementById('root'));

src/schema.js

@@ -1,167 +0,0 @@
-import React, {Component} from 'react';
-
-import { Row, Col, Input, Icon, Button, Select } from 'antd';
-import './schema.css';
-
-const Search = Input.Search;
-const Option = Select.Option;
-
-class Schema extends Component {
-  constructor() {
-    super();
-    this.state = {
-      schema: ['magazine', 'fruit', 'something else'],
-      currentSchema: 'add'
-    }
-  }
-
-  changeSchema = (e) => {
-    return ()=> {
-      this.setState({
-        currentSchema: e
-      })
-    }
-  };
-
-  render() {
-    return (
-      <div>
-        <Row>
-          <Col span={6} data-name='side'>
-            <div className='current'>{this.state.currentSchema}</div>
-            <Search
-              placeholder="search schema"
-              enterButton
-              onSearch={value => console.log(value)}
-              style={{marginTop: 10}}
-            />
-            <div className='title'>
-              <Row>
-                <Col span={22}>Schemas ({this.state.schema.length})</Col>
-                <Col span={2}><Button onClick={()=>this.setState({currentSchema: 'add'})} type="primary" shape="circle" icon="plus" size='small' /></Col>
-              </Row>
-            </div>
-            {
-              this.state.schema.map((value) =>
-                  <p onClick={this.changeSchema(value)} key={value} className='show'><Icon type="database" theme="filled" /> {value}</p>
-              )
-            }
-          </Col>
-          <Col span={18} data-name='new'>
-            {this.state.currentSchema === 'add'? <AddSchema /> : <OneSchema currentSchema={this.state.currentSchema}/>}
-          </Col>
-        </Row>
-      </div>
-    )
-  }
-
-}
-export default Schema;
-
-class AddSchema extends Component {
-  constructor() {
-    super();
-    this.state = {
-      tablename: '',
-      showNewColumn: true,
-      columns:[{name: 'id', type: 'string', desc: 'key'}, {name: 'nickname', type: 'string', desc: 'non-null'}],
-      // columns:[],
-      inputColName: '',
-      submit: false
-    }
-  }
-
-  handleNameChange = (e) => {
-    this.setState({
-      inputColName: e.target.value
-    }, ()=>{console.log(this.state.inputColName)});
-  };
-
-  handleTypeChange = (value) => {
-    // HERE --
-    // 1. modify type
-    // 2. merge to state
-    // 3. give a new col to input
-    console.log(`selected ${value}`);
-    this.setState({
-      columns: [...this.state.columns, {name: this.state.inputColName, type: value, desc: 'description'}],
-      showNewColumn: false
-    })
-
-
-  };
-
-  handleDescChange = (value) => {
-    // HERE --
-    // 1. modify desc
-    console.log(`selected ${value}`);
-    this.setState({
-
-      showNewColumn: true
-    })
-  };
-
-  render() {
-    return(
-      <div style={{margin: 10}}>
-        <div>Add a new table</div>
-        <div>
-          Table name:
-          <Input placeholder="table_name" style={{ width: 120 }} onChange={(e)=> {
-            this.setState({tablename: e.target.value})
-          }}/>
-        </div>
-        <div>
-          {
-            this.state.columns.map((col, index) =>
-              <div key={index}>
-                Columns ({index+1}):
-                <Input style={{ width: 120 }} value={col.name} onChange={this.handleNameChange} />
-                <Select defaultValue={col.type} style={{ width: 120 }} onChange={this.handleTypeChange}>
-                  <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}>
-                  <Option value="non-null">non-null</Option>
-                  <Option value="key">key</Option>
-                </Select>
-                <Icon type="close-circle" theme="twoTone" style={{cursor: 'pointer'}}/>
-              </div>
-            )
-          }
-          {
-            this.state.showNewColumn? <div>
-              Columns (NEW):
-              <Input placeholder="column_name" style={{ width: 120 }} onChange={this.handleNameChange}/>
-              <Select defaultValue="type" style={{ width: 120 }} onChange={this.handleTypeChange}>
-                <Option value="string">String</Option>
-                <Option value="int">Int</Option>
-                <Option value="float">Float</Option>
-              </Select>
-              <Select defaultValue="description" style={{ width: 120 }} onChange={this.handleDescChange}>
-                <Option value="non-null">non-null</Option>
-                <Option value="key">key</Option>
-              </Select>
-            </div> :  ''
-          }
-        </div>
-        <Button type="primary" loading={this.state.submit} onClick={()=> {this.setState({submit: true})}}>
-          Submit
-        </Button>
-      </div>
-
-    )
-  }
-}
-
-class OneSchema extends Component {
-  constructor(props) {
-    super(props)
-  }
-  render() {
-    return(
-      <div>{this.props.currentSchema}</div>
-    )
-  }
-}

src/schema/change/index.js

@@ -0,0 +1,144 @@
+import React, {Component} from 'react';
+
+import {Select, Input, Icon, Button, notification} from 'antd';
+
+const Option = Select.Option;
+
+class Change extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      schemaName: props.schemaName,
+      tableName: props.tableName,
+      columns: props.columns,
+      newColName: '',
+      newColType: 'type'
+    }
+  }
+
+
+  handleNameChange = (index) => {
+    return (e) => {
+      let columns = this.state.columns;
+      columns[index].name = e.target.value;
+      this.setState({
+        columns
+      })
+    };
+  };
+
+  handleNameNew = (e) => {
+    this.setState({
+      newColName: e.target.value,
+      showNewColumn: false
+    })
+  };
+
+  handleTypeChange = (index) => {
+    return (value) => {
+      let columns = this.state.columns;
+      columns[index].type = value;
+      this.setState({
+        columns
+      });
+    }
+  };
+
+  handleTypeNew = (value) => {
+    if (this.state.newColName !== '') {
+      let columns = this.state.columns;
+      columns.push({name: this.state.newColName, type: value, desc: 'description'});
+      this.setState({
+        columns,
+        newColName: '',
+        newColType: 'type'
+      })
+    } else {
+      notification['warning']({
+        message: 'Notification',
+        description: 'Input a name first.',
+      });
+    }
+  };
+
+  handleDescChange = (index) => {
+    return (value) => {
+      let columns = this.state.columns;
+      columns[index].desc = value;
+      this.setState({
+        columns
+      });
+    };
+  };
+
+  handleColDelete = (index) => {
+    return () => {
+      let columns = this.state.columns;
+      columns.splice(index, 1);
+      this.setState({
+        columns
+      });
+    }
+  };
+
+  componentWillReceiveProps(next) {
+    this.setState({
+      tableName: next.tableName,
+      schemaName: next.schemaName,
+      columns: next.columns
+    });
+  };
+
+  render() {
+    return (
+      <div>
+        <div>
+          Table name:
+          <Input value={this.state.tableName} placeholder="table_name" style={{width: 120}} onChange={(e) => {
+            this.setState({tableName: e.target.value})
+          }}/>
+        </div>
+        <div>
+          {
+            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)}>
+                  <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)}>
+                  <Option value="non-null">non-null</Option>
+                  <Option value="key">key</Option>
+                </Select>
+                <Icon type="close-circle" theme="twoTone" style={{cursor: 'pointer'}}
+                      onClick={this.handleColDelete(index)}/>
+              </div>
+            )
+          }
+          <div>
+            Column (NEW):
+            <Input placeholder="column_name" style={{width: 120}} onChange={this.handleNameNew}
+                   value={this.state.newColName}/>
+            <Select defaultValue="type" style={{width: 120}} onChange={this.handleTypeNew}
+                    value={this.state.newColType}>
+              <Option value="string">String</Option>
+              <Option value="int">Int</Option>
+              <Option value="float">Float</Option>
+            </Select>
+          </div>
+        </div>
+        <Button type="primary" onClick={() => {
+          this.setState({submit: true});
+          this.props.addTable(this.state.columns, this.state.tableName, this.state.schemaName);
+        }}>
+          Submit
+        </Button>
+      </div>
+    )
+  }
+}
+
+export default Change;

src/schema/index.css

@@ -0,0 +1,30 @@
+.current {
+    background-color: #0F83E8;
+    color: white;
+    text-align: center;
+    height: 50px;
+    line-height: 50px;
+    margin-top: 3px;
+}
+
+.title {
+    font-weight: bold;
+    font-size: 16px;
+    margin: 10px 0 0 5px;
+}
+
+p.show {
+    margin: 5px 0 3px 10px;
+    cursor: pointer;
+}
+
+.wrapper {
+    position: relative;
+}
+
+.add {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 2;
+}

src/schema/index.js

@@ -0,0 +1,152 @@
+import React, {Component} from 'react';
+
+import {Row, Col, Input, Icon, Button} from 'antd';
+import './index.css';
+import Change from './change';
+
+const Search = Input.Search;
+
+
+class Schema extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentSchema: 'magazine',
+      currentTable: 'user',
+      switch: true
+    }
+  }
+
+  changeSchema = (schema) => {
+    return () => {
+      this.setState({
+        currentSchema: schema
+      })
+    }
+  };
+
+  changeTable = (table) => {
+    return () => {
+      this.setState({
+        currentTable: table
+      })
+    }
+  };
+
+  findColumns = () => {
+    let schema = this.props.schemas.find(schema => schema.name === this.state.currentSchema);
+    if(schema === undefined) return [];
+    //  if user insert a new schema, after merge to schemas with a {name: 'xx', tables: []}
+    //  you can find the following table is undefined.
+    //  so give a state here if you want add a tip!
+    else {
+      let table = schema.tables.find(table => table.name === this.state.currentTable);
+      if(table === undefined) return [];
+      else return table.cols;
+    }
+  };
+
+  render() {
+    return (
+      <div>
+        <Row>
+          <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})}}>Add Schema</Button> :
+                  <Search
+                    className='add'
+                    placeholder="input schema_name"
+                    enterButton="Confirm"
+                    onSearch={value => {
+                      this.setState({
+                        switch: true,
+                        currentSchema: value,
+                        currentTable: ''
+                      });
+                      this.props.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'>
+                  <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>
+                  </Row>
+                  {
+                    schema.tables.map((table) =>
+                      <p onClick={this.changeTable(table.name)} key={table.name} className='show'><Icon type="database"
+                                                                                                        theme="filled"/> {table.name}
+                      </p>
+                    )
+                  }
+                </div>
+              })
+            }
+
+          </Col>
+
+          <Col span={18}>
+            {
+              this.state.currentTable === 'add' ?
+                <AddTable currentSchema={this.state.currentSchema} addTable={this.props.addTable}/> :
+                <ShowTable currentSchema={this.state.currentSchema} currentTable={this.state.currentTable}
+                           columns={this.findColumns()} addTable={this.props.addTable}/>
+            }
+          </Col>
+        </Row>
+      </div>
+    )
+  }
+}
+
+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 schemaName={this.props.currentSchema} tableName={this.props.currentTable} columns={this.state.columns} addTable={this.props.addTable}/>
+      </div>
+    )
+  }
+}
+
+class ShowTable extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div style={{margin: 10}}>
+        <div style={{fontSize: 30}}>{this.props.currentSchema} > {this.props.currentTable}</div>
+        <Change schemaName={this.props.currentSchema} tableName={this.props.currentTable} columns={this.props.columns} addTable={this.props.addTable}/>
+      </div>
+    )
+  }
+}
+