Merge pull request #5 from oslabs-beta/stephen-feature

Code preview functional

Author: stephenkim612

app/electron/main.js

@@ -80,7 +80,7 @@ async function createWindow() {
       // web workers will not have access to node
       nodeIntegrationInWorker: false,
       // disallow experimental feature to allow node.js support in sub-frames (i-frames/child windows)
-      nodeIntegrationInSubFrames: false,
+      nodeIntegrationInSubFrames: true,
       // runs electron apis and preload script in a separate JS context
       // separate context has access to document/window but has it's own built-ins and is isolate from changes to global environment by located page
       // Electron API only available from preload, not loaded page

app/src/components/bottom/CodePreview.tsx

@@ -12,11 +12,29 @@ import 'ace-builds/src-noconflict/theme-terminal';
 import { Component } from '../../interfaces/Interfaces';
 import useResizeObserver from '../../tree/useResizeObserver';
 import { string } from 'prop-types';
+import { unpkgPathPlugin } from '../../plugins/unpkg-path-plugin';
+import { fetchPlugin } from '../../plugins/fetch-plugin';
+import * as esbuild from 'esbuild-wasm';
+import { useSelector, useDispatch } from 'react-redux';
+import { store } from './../../index';
 
 const CodePreview: React.FC<{
   theme: string | null;
   setTheme: any | null;
   }> = ({ theme, setTheme }) => {
+
+
+  const ref = useRef<any>();
+  const iframe = useRef<any>();
+  
+
+  const startService = async () => {
+    ref.current = await esbuild.startService({
+      worker: true,
+      wasmURL: 'https://unpkg.com/[email protected]/esbuild.wasm',
+    })
+  }
+
   const wrapper = useRef();
   const dimensions = useResizeObserver(wrapper);
   const { width, height } =
@@ -27,14 +45,58 @@ const CodePreview: React.FC<{
   const currentComponent = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId
   );
+  const [input, setInput] = useState(currentComponent.code);
+  
+  console.log('this is state', state.components)
+  console.log('currentcomponent.code', currentComponent.code)
+
 
   const handleCodeSnipChange = (val) => {
     currentComponent.code = val;
   };
 
+  useEffect(() => {
+    startService();
+  }, []);
+
   useEffect(() => {
     setDivHeight(height);
   }, [height])
+
+  useEffect(() => {
+    setInput(currentComponent.code)
+  }, [state])
+
+
+  const handleChange = (data) => {
+   setInput(data)
+   console.log('line 69',input)
+  };
+
+  const handleClick = async () => {
+    // setInput(currentComponent.code)  
+    // console.log('currentComponent.code', currentComponent.code)
+    if(!ref.current) {
+      return;
+    }
+    const result = await ref.current.build({
+      entryPoints: ['index.js'],
+      bundle: true,
+      write: false,
+      plugins: [
+        unpkgPathPlugin(),
+        fetchPlugin(input)
+      ],
+      define: {
+        'process.env.NODE_ENV': '"development"',
+        global: 'window'
+      }
+    })
+    console.log('this is input',input)
+    store.dispatch({type: "SAVE", payload: result.outputFiles[0].text});
+  }
+
+
   return (
     <div
     ref={wrapper}
@@ -48,16 +110,21 @@ const CodePreview: React.FC<{
         mode="javascript"
         theme="monokai"
         width="100%"
-        height="100%"
-        onChange={handleCodeSnipChange}
-        value={currentComponent.code}
+        height="70%"
+        onChange={handleChange}
+        // value={currentComponent.code}
+        value={input}
         name="Code_div"
         readOnly={false}
         fontSize={16}
         tabSize={2}
       />
+      <button onClick={() => handleClick()}>Fetch</button>
     </div>
   );
 };
 
 export default CodePreview;
+
+
+

app/src/components/form/Selector.tsx

@@ -13,6 +13,7 @@ const FormSelector = (props): JSX.Element => {
   })
   return (
     <div className={props.classes.configRow}>
+        
       <div className={props.isThemeLight ? `${props.classes.configType} ${props.classes.lightThemeFontColor}` : `${props.classes.configType} ${props.classes.darkThemeFontColor}`}>
         <h3>{props.title}</h3>
       </div>

app/src/components/left/HTMLItem.tsx

@@ -122,6 +122,7 @@ const HTMLItem : React.FC<{
   // updated the id's to reflect the new element types input and label
   return ( // HTML Elements
     <Grid item xs={5} key={`html-g${name}`}>
+  
       { id <= 18 &&
       <div ref={drag} className={isThemeLight ? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}` : `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`} id="HTMLItem">
         <h3>{name}</h3>

app/src/components/main/Canvas.tsx

@@ -80,8 +80,8 @@ function Canvas() {
   const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
   return (
     <div ref={drop} style={canvasStyle} onClick={onClickHandler}>
-      {/* currentComponent is the selected component on Left Panel (eg: App or Index with green dot to the left)  */}
-      {renderChildren(currentComponent.children)}
+       
+       {renderChildren(currentComponent.children)}
     </div>
   );
 }

app/src/components/main/CanvasContainer.tsx

@@ -11,6 +11,7 @@ function CanvasContainer() {
 
   return (
     <div style={canvasContainerStyle}>
+      
       <Canvas />
     </div>
   );

app/src/components/main/DemoRender.tsx

@@ -1,26 +1,48 @@
 
 import React, {
-  useState, useCallback, useContext, useEffect,
+  useState, useCallback, useContext, useEffect, useRef
 } from 'react';
+import ReactDOM from 'react-dom';
 import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
 import Button from '@material-ui/core/Button';
 import Box from '@material-ui/core/Box';
 import StateContext from '../../context/context';
 import cssRefresher from '../../helperFunctions/cssRefresh';
-
+import {store} from '../../../src/index';
+import { useSelector } from 'react-redux';
 // DemoRender is the full sandbox demo of our user's custom built React components. DemoRender references the design specifications stored in state to construct
 // real react components that utilize hot module reloading to depict the user's prototype application.
 const DemoRender = (props): JSX.Element => {
+
+  const iframe = useRef<any>();
   const [components, setComponents] = useState([]);
   const [state, dispatch] = useContext(StateContext);
+  const [codeRender, setCodeRender] = useState('')
   const demoContainerStyle = {
     width: '100%',
     backgroundColor: '#FBFBFB',
     border: '2px Solid grey',
   };
 
-  // This function is the heart of DemoRender it will take the array of components stored in state and dynamically construct the desired React component for the live demo
-  // Material UI is utilized to incorporate the apporpriate tags with specific configuration designs as necessitated by HTML standards.
+  let code = useSelector((state) => state.code);
+
+  const html = `
+    <html>
+      <head></head>
+      <body>
+        <div id='app'></div>
+        <script>
+          window.addEventListener('message', (e) => {
+            console.log(e)
+            eval(e.data);
+          }, false);
+        </script>
+      </body>
+    </html>
+  `;
+
+//  This function is the heart of DemoRender it will take the array of components stored in state and dynamically construct the desired React component for the live demo
+//   Material UI is utilized to incorporate the apporpriate tags with specific configuration designs as necessitated by HTML standards.
   const componentBuilder = (array: object, key: number = 0) => {
     const componentsToRender = [];
     for (const element of array) {
@@ -48,7 +70,7 @@ const DemoRender = (props): JSX.Element => {
     }
     return componentsToRender;
   };
-
+ 
   useEffect(() => {
     const focusIndex = state.canvasFocus.componentId - 1;
     const childrenArray = state.components[focusIndex].children;
@@ -61,14 +83,23 @@ const DemoRender = (props): JSX.Element => {
   }, [])
 
 
+  useEffect(() => {
+
+  console.log("code changed", code);
+  setCodeRender(code)
+  iframe.current.contentWindow.postMessage(code, '*');
+
+  }, [code])
+ 
   return (
-    <Router>
       <div id={'renderFocus'} style={demoContainerStyle}>
-        {components.map((component, index) => component)}
-      </div>
-    </Router>
+        
+     
+        <iframe ref={iframe} sandbox='allow-scripts' srcDoc={html} width='500px' height='500px'/>
+       
 
+      </div>
   );
 };
 
-export default DemoRender;
+export default DemoRender;

app/src/helperFunctions/generateCode.ts

@@ -49,7 +49,7 @@ const generateUnformattedCode = (
   let links: boolean = false;
 
   const isRoot = rootComponents.includes(componentId);
-  let importReactRouter = false;;
+  let importReactRouter = false;
 
   // returns an array of objects which may include components, html elements, and/or route links
   const getEnrichedChildren = (currentComponent: Component | ChildElement) => {
@@ -287,38 +287,31 @@ const generateUnformattedCode = (
   // classic react code
   if (projectType === 'Classic React') {
     return `
-    ${`import React, { useState, createContext, useContext } from 'react';`}
+    ${`import React, { useState, useEffect} from 'react';`}
+    ${`import ReactDOM from 'react-dom';`}
     ${importReactRouter ? `import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';`: ``}
     ${importsMapped}
     ${importContext}
     ${providers}
     ${context}
-    ${`const ${currComponent.name} = (props: any): JSX.Element => {`}
-    ${`  const [value, setValue] = useState<any | undefined>("INITIAL VALUE");${writeStateProps(currComponent.useStateCodes)}`}
-    ${
-      isRoot  && currComponent.stateProps.length !== 0
-      ? `  const ${currComponent.name}Context = createContext(${createState(currComponent.stateProps)});`
-      : ``
-    }
+    ${`const ${currComponent.name} = (props) => {`}
+    ${`  const [value, setValue] = useState("");${writeStateProps(currComponent.useStateCodes)}`}
+
     ${!importReactRouter
       ? `  return (
-        <${currComponent.name}Context.Provider value="">
           <div className="${currComponent.name}" ${formatStyles(currComponent)}>
           \t${writeNestedElements(enrichedChildren)}
           </div>
-        </${currComponent.name}Context.Provider>
       );`
       : `  return (
-        <${currComponent.name}Context.Provider value="">
           <Router>
             <div className="${currComponent.name}" ${formatStyles(currComponent)}>
             \t${writeNestedElements(enrichedChildren)}
             </div>
           </Router>
-        </${currComponent.name}Context.Provider>
       );`}
     ${`}\n`}
-    export default ${currComponent.name};
+    ReactDOM.render(<${currComponent.name} />, document.querySelector('#app'));
     `;
   }
   // next.js component code

app/src/index.js

@@ -7,6 +7,8 @@ import {
 } from 'react-router-dom';
 import 'babel-polyfill';
 import React from 'react';
+import { createStore } from 'redux';
+import { Provider } from 'react-redux';
 import ReactDOM from 'react-dom';
 import Cookies from 'js-cookie';
 import App from './components/App.tsx';
@@ -22,6 +24,24 @@ const client = new ApolloClient({
   uri: 'https://reactype-caret.herokuapp.com/graphql',
   cache: new InMemoryCache()
 });
+const initialState = {code: `
+  import React from 'react';
+  import ReactDOM from 'react-dom';
+  const App = () => <h1>Hello World!</h1>
+
+  ReactDOM.render(<App />, document.querySelector('#app'));`}
+const rootReducer = (state = initialState, action) => {
+  console.log('action', action);
+  switch (action.type) {
+    case 'SAVE':
+      return {...state, code:action.payload};
+    default:
+        return state;
+  }
+ 
+}
+
+export const store = createStore(rootReducer)
 
 const PrivateRoute = ({ component: Component, ...rest }) => (
   <Route
@@ -38,17 +58,19 @@ const PrivateRoute = ({ component: Component, ...rest }) => (
 
 ReactDOM.render(
   <ApolloProvider client={client}>
-    <Router>
-      <Switch>
-        <Route exact path="/login" component={SignIn} />
-        <Route exact path="/signup" component={SignUp} />
-        <Route exact path="/password" component={FBPassWord} />
-        <PrivateRoute exact path="/" component={App} />
-        <Route exact path="/dashboard" component={ProjectDashboard} />
-        <Route exact path="/tutorial" component={Tutorial} />
-        <Route exact path="/tutorialPage/:learn" component={TutorialPage} />
-      </Switch>
-    </Router>
+    <Provider store={store}>
+      <Router>
+        <Switch>
+          <Route exact path="/login" component={SignIn} />
+          <Route exact path="/signup" component={SignUp} />
+          <Route exact path="/password" component={FBPassWord} />
+          <PrivateRoute exact path="/" component={App} />
+          <Route exact path="/dashboard" component={ProjectDashboard} />
+          <Route exact path="/tutorial" component={Tutorial} />
+          <Route exact path="/tutorialPage/:learn" component={TutorialPage} />
+        </Switch>
+      </Router>
+    </Provider>
   </ ApolloProvider>,
   document.getElementById('app'),
 );