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

ready for launch

Author: stephenkim612

app/electron/main.js

@@ -52,7 +52,6 @@ async function createWindow() {
     // await installExtension([REACT_DEVELOPER_TOOLS])
     //   .then(name => console.log(`Added Extension:  ${name}`))
     //   .catch(err => console.log('An error occurred: ', err));
-    console.log("install extention");
   } else {
     // this will happen before creating the browser window. it returns a Boolean whether the protocol of scheme 'app://' was successfully registered and a file (index-prod.html) was sent as the response
     protocol.registerBufferProtocol(Protocol.scheme, Protocol.requestHandler);

app/src/components/bottom/CodePreview.tsx

@@ -11,13 +11,10 @@ import 'ace-builds/src-noconflict/theme-monokai';
 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;
@@ -35,25 +32,21 @@ const CodePreview: React.FC<{
     })
   }
 
+  
+
   const wrapper = useRef();
   const dimensions = useResizeObserver(wrapper);
   const { width, height } =
     dimensions || 0;
 
   const [state, dispatch] = useContext(StateContext);
   const [divHeight, setDivHeight] = useState(0);
-  const currentComponent = state.components.find(
+  let 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 [input, setInput] = useState();
 
-  const handleCodeSnipChange = (val) => {
-    currentComponent.code = val;
-  };
 
   useEffect(() => {
     startService();
@@ -64,36 +57,37 @@ const CodePreview: React.FC<{
   }, [height])
 
   useEffect(() => {
-    setInput(currentComponent.code)
-  }, [state])
+
+ setInput(currentComponent.code);
+  store.dispatch({type: "INPUT", payload: currentComponent.code});
+  }, [state.components])
 
 
-  const handleChange = (data) => {
-   setInput(data)
-   console.log('line 69',input)
-  };
 
-  const handleClick = async () => {
-    // setInput(currentComponent.code)  
-    // console.log('currentComponent.code', currentComponent.code)
+
+  const handleChange = async (data) => {
+    setInput(data);
+
+    store.dispatch({type: "INPUT", payload: data});
     if(!ref.current) {
       return;
     }
-    const result = await ref.current.build({
+    let result = await ref.current.build({
       entryPoints: ['index.js'],
       bundle: true,
       write: false,
+      incremental:true,
+      minify: true,
       plugins: [
         unpkgPathPlugin(),
-        fetchPlugin(input)
+        fetchPlugin(data)
       ],
       define: {
-        'process.env.NODE_ENV': '"development"',
+        'process.env.NODE_ENV': '"production"',
         global: 'window'
       }
     })
-    console.log('this is input',input)
-    store.dispatch({type: "SAVE", payload: result.outputFiles[0].text});
+     store.dispatch({type: "SAVE", payload: result.outputFiles[0].text});
   }
 
 
@@ -110,16 +104,15 @@ const CodePreview: React.FC<{
         mode="javascript"
         theme="monokai"
         width="100%"
-        height="70%"
+        height="100%"
         onChange={handleChange}
-        // value={currentComponent.code}
         value={input}
         name="Code_div"
         readOnly={false}
         fontSize={16}
         tabSize={2}
       />
-      <button onClick={() => handleClick()}>Fetch</button>
+
     </div>
   );
 };
@@ -128,3 +121,4 @@ export default CodePreview;
 
 
 
+

app/src/components/login/FBPassWord.tsx

@@ -133,7 +133,7 @@ const SignUp: React.FC<LoginInt & RouteComponentProps> = props => {
       if (userCreated === 'Success') {
         props.history.push('/');
       } else {
-        console.log(userCreated);
+    
       }
     });
   };

app/src/components/main/DemoRender.tsx

@@ -2,13 +2,11 @@
 import React, {
   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.
@@ -17,7 +15,6 @@ 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',
@@ -30,11 +27,16 @@ const DemoRender = (props): JSX.Element => {
     <html>
       <head></head>
       <body>
-        <div id='app'></div>
+        <div id="app"></div>
         <script>
-          window.addEventListener('message', (e) => {
-            console.log(e)
-            eval(e.data);
+          window.addEventListener('message', (event) => {
+            try {
+              eval(event.data);
+            } catch (err) {
+              const app = document.querySelector('#app');
+              app.innerHTML = '<div style="color: red;"><h4>Runtime Error</h4>' + err + '</div>';
+              console.error(err);
+            }
           }, false);
         </script>
       </body>
@@ -82,20 +84,16 @@ const DemoRender = (props): JSX.Element => {
     cssRefresher();
   }, [])
 
-
+  
   useEffect(() => {
-
-  console.log("code changed", code);
-  setCodeRender(code)
   iframe.current.contentWindow.postMessage(code, '*');
-
   }, [code])
 
   return (
       <div id={'renderFocus'} style={demoContainerStyle}>
 
 
-        <iframe ref={iframe} sandbox='allow-scripts' srcDoc={html} width='500px' height='500px'/>
+        <iframe ref={iframe} sandbox='allow-scripts allow-popups allow-popups-to-escape-sandbox' srcDoc={html} width='100%' height='100%'/>
 
 
       </div>

app/src/helperFunctions/generateCode.ts

@@ -291,9 +291,6 @@ const generateUnformattedCode = (
     ${`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) => {`}
     ${`  const [value, setValue] = useState("");${writeStateProps(currComponent.useStateCodes)}`}
 

app/src/index.js

@@ -3,7 +3,7 @@ import {
   HashRouter as Router,
   Route,
   Redirect,
-  Switch,
+  Switch
 } from 'react-router-dom';
 import 'babel-polyfill';
 import React from 'react';
@@ -24,29 +24,27 @@ 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 initialState = { code: ``, input: `` };
 const rootReducer = (state = initialState, action) => {
-  console.log('action', action);
   switch (action.type) {
     case 'SAVE':
-      return {...state, code:action.payload};
+      return { ...state, code: action.payload };
+    case 'INPUT':
+      return { ...state, input: action.payload };
     default:
-        return state;
+      return state;
   }
- 
-}
+};
 
-export const store = createStore(rootReducer)
+export const store = createStore(
+  rootReducer,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
 
 const PrivateRoute = ({ component: Component, ...rest }) => (
   <Route
     {...rest}
-    render={ (props) => {
+    render={props => {
       return Cookies.get('ssid') || window.localStorage.getItem('ssid') ? (
         <Component {...props} />
       ) : (
@@ -71,6 +69,6 @@ ReactDOM.render(
         </Switch>
       </Router>
     </Provider>
-  </ ApolloProvider>,
-  document.getElementById('app'),
+  </ApolloProvider>,
+  document.getElementById('app')
 );

app/src/plugins/fetch-plugin.ts

@@ -49,7 +49,7 @@ export const fetchPlugin = (inputCode: string) => {
 
 
       build.onLoad({ filter: /.*/ }, async (args: any) => {
-        console.log('line 55 of fetch', args)
+   
         const cachedResult = await fileCache.getItem<esbuild.OnLoadResult>(args.path);
         if(cachedResult) {
           return cachedResult;

app/src/reducers.js

@@ -0,0 +1,15 @@
+const initialState = {code: ``}
+const rootReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case 'CODE':
+      return { ...state, code: action.payload };
+    case 'ADD_CHILD':
+      return { ...state, child: action.payload };
+      case 'CHANGE_FOCUS':
+        return { ...state, focus: action.payload };
+    default:
+      return state;
+  }
+};
+
+export default rootReducer;

app/src/reducers/componentReducer.ts

@@ -266,7 +266,7 @@ const reducer = (state: State, action: Action) => {
         typeId,
         childId
       }: { type: string; typeId: number; childId: any } = action.payload;
-console.log("action.payload", action.payload);
+
       const parentComponentId: number = state.canvasFocus.componentId;
       const components = [...state.components];
 

package.json

@@ -158,6 +158,7 @@
     "source-map-support": "^0.5.19",
     "spectron": "^15.0.0",
     "uniqid": "^5.3.0",
+    "use-debounce": "^7.0.1",
     "uuid": "^8.2.0"
   },
   "devDependencies": {