<ProjectExplorer /> and State-driven editors

Composer/packages/client/src/App.js

@@ -14,10 +14,28 @@ import httpClient from "./utils/http";
 import ExtensionContainerWrapper from "./ExtensionContainerWrapper";
 
 import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
+import { ProjectExplorer } from "./components/ProjectExplorer";
 
 initializeIcons(/* optional base url */);
 
 function App() {
+  // central state for all editors\extensions
+  // this would serve as the fundation of layout\data exchange\message routing
+  const [editors, setEditors] = useState([
+    /* 
+    {
+      col: 1,
+      row: 1,
+      data: { 
+        name: "main.dialog",
+        content: "blabla"
+      },
+      name: "window1",
+      parent: "window0(shell)"
+    }
+    */
+  ]);
+
   const [files, setFiles] = useState([]);
   const [openFileIndex, setOpenFileIndex] = useState(-1);
   const [botStatus, setBotStatus] = useState("stopped");
@@ -59,9 +77,27 @@ function App() {
   }
 
   function handleFileClick(file, index) {
+
+    // keep a ref because we want to read that from outside
     setOpenFileIndex(index);
+
+    var data = files[index];
+    // open or set editor
+    setEditors([
+      {
+        col: 1,
+        row: 1,
+        data: data,
+        name: "window1",
+        parent: "window0(shell)"
+      }
+    ])
+
+
   }
 
+  console.log(editors);
+
   return (
     <Fragment>
       <header className="App-header">
@@ -108,43 +144,21 @@ function App() {
         >
           <div style={{ flex: 1, marginLeft: "30px", marginTop: "20px" }}>
             <div>
-              <Tree variant="large" />
+              <Tree variant="large">
+                <ProjectExplorer files={files} onClick={handleFileClick} />
+              </Tree>
               <div style={{ height: "20px" }} />
               <Tree />
             </div>
           </div>
           <div style={{ flex: 4, marginTop: "20px", marginLeft: "20px" }}>
-            <Conversation />
+            <Conversation>
+              { editors.length > 0 && editors.map(item => {
+                 return ( <ExtensionContainerWrapper name={item.name} data={item.data} onChange={handleValueChange} /> )
+              })}
+            </Conversation>
           </div>
         </div>
-
-        {/* <aside className="App-sidebar">
-        <nav>
-          <ul>
-            {files.length > 0 &&
-              files.map((item, index) => {
-                return (
-                  <li
-                    key={item.name}
-                    onClick={() => {
-                      handleFileClick(item, index);
-                    }}
-                  >
-                    {item.name}
-                  </li>
-                );
-              })}
-          </ul>
-        </nav>
-      </aside> */}
-        {/* <main className="App-main">
-          {openFileIndex > -1 && (
-            <ExtensionContainerWrapper
-              data={files[openFileIndex]}
-              onChange={handleValueChange}
-            />
-          )}
-        </main> */}
       </div>
     </Fragment>
   );

Composer/packages/client/src/components/Conversation/index.js

@@ -2,8 +2,9 @@
 import { jsx } from "@emotion/core";
 import { container, top } from "./styles";
 
-export const Conversation = () => (
+export const Conversation = (props) => (
   <div css={container}>
     <div css={top} />
+    {props.children}
   </div>
 );

Composer/packages/client/src/components/ProjectExplorer/index.js

@@ -0,0 +1,25 @@
+import React, { Fragment } from "react"
+/** @jsx jsx */
+import { jsx } from "@emotion/core";
+import { ul } from "./styles";
+
+export const ProjectExplorer = props => (
+  <Fragment>
+    <div>Project Explorer </div>
+    <ul css={ul} >
+        {props.files.length > 0 &&
+         props.files.map((item, index) => {
+            return (
+            <li
+                key={item.name}
+                onClick={() => {
+                props.onClick(item, index);
+                }}
+            >
+                {item.name}
+            </li>
+            );
+        })}
+    </ul>
+  </Fragment>
+);

Composer/packages/client/src/components/ProjectExplorer/styles.js

@@ -0,0 +1,5 @@
+import { css } from "@emotion/core";
+
+export const ul = css`
+    list-style: none;
+`;

Composer/packages/client/src/components/Tree/index.js

@@ -5,5 +5,6 @@ import { container, top } from "./styles";
 export const Tree = props => (
   <div css={container(props.variant)}>
     <div css={top} />
+    {props.children}
   </div>
 );