Completed Framework for Sandbox Render & State

Co-authored-by: jonocr <[email protected]>
Co-authored-by: buddhajjigae <[email protected]>
Co-authored-by: xkevinpark <[email protected]>
Co-authored-by: williamdyoon <[email protected]>

Author: 5 people

app/src/components/main/DemoRender.tsx

@@ -0,0 +1,28 @@
+import React, {
+  useState, useCallback, useContext, useEffect,
+} from 'react';
+
+const DemoRender = (props): JSX.Element => {
+  const [components, setComponents] = useState([]);
+  const demoContainerStyle = {
+    width: '100%',
+    backgroundColor: 'lightgrey',
+    border: '2px Solid grey',
+  };
+
+  useEffect(() => {
+    console.log('props', props.demo);
+    setComponents(props.demo);
+  }, [props.demo]);
+  return (
+    <div id={'renderFocus'} style={demoContainerStyle}>
+      {console.log('Props Boxes has reached DemoContainer', props.demo)}
+      {components.map((component, index) => {
+        console.log('Found a component', component);
+        return component;
+      })}
+    </div>
+  );
+};
+
+export default DemoRender;

app/src/containers/MainContainer.tsx

@@ -1,14 +1,43 @@
-import React, { useContext } from 'react';
+import React, { useState, useContext, useEffect } from 'react';
+import Button from '@material-ui/core/Button';
+import Box from '@material-ui/core/Box';
 import BottomPanel from '../components/bottom/BottomPanel';
 import CanvasContainer from '../components/main/CanvasContainer';
 import { styleContext } from './AppContainer';
+import StateContext from '../context/context';
+import DemoRender from '../components/main/DemoRender';
 
 const MainContainer = () => {
   const { style } = useContext(styleContext);
+  const [state, dispatch] = useContext(StateContext);
+  const componentsToRender = [];
+  useEffect(() => {
+    const childrenArray = state.components[0].children;
+    console.log('Refrenced Children in State!!!', childrenArray);
+    const codePreviewView = state.components[0].code;
+    console.log('This is the framework for CodePreview', codePreviewView);
+    let key = 0;
+    for (const element of childrenArray) {
+      if (element.name !== 'separator') {
+        console.log('detail from children array', element);
+        const elementType = element.name;
+        const childId = element.childId;
+        const elementStyle = element.style;
+        const innerText = element.attributes.compText;
+        if (elementType !== 'button') {
+          componentsToRender.push(<Box component={elementType} key={key} id={childId}>{innerText}</Box>);
+        } else componentsToRender.push(<Button key={key} id={childId} color={'primary'}>{innerText}</Button>);
+        key += 1;
+      }
+    }
+  }, [state.components]);
+
   return (
     <div className="main-container" style={style} >
       <div className="main">
         <CanvasContainer />
+        {console.log('Completed Components to Render', componentsToRender)}
+        <DemoRender demo={componentsToRender}/>
       </div>
       <BottomPanel />
     </div>