Merge pull request #30 from jinsoolim/tutorial

tutorial finished and console logs cleaned up

Author: brianjshan

app/electron/main.js

@@ -29,14 +29,14 @@ const isDev =
 const port = 8080;
 const selfHost = `http://localhost:${port}`;
 
-// main.js is what controls the lifecycle of the electron applicaton
+// main.js is what controls the lifecycle of the electron application
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let win;
 let menuBuilder;
 
-// function to create a new broswer window
+// function to create a new browser window
 // this function will be called when Electron has initialized itself
 async function createWindow() {
   if (isDev) {
@@ -58,22 +58,22 @@ async function createWindow() {
     minWidth: 980,
     // window title
     title: `ReacType`,
-    // the browser window will not display intiially as it's loading
+    // the browser window will not display initially as it's loading
     // once the browser window renders, a function is called below  that hides the splash screen and displays the browser window
     show: false,
     // icon: path.join(__dirname, '../src/public/icons/png/256x256.png'),
     webPreferences: {
       zoomFactor: 0.7,
       // enable devtools when in development mode
       devTools: isDev,
-      // crucial security feature - blocks rendering process from having access to node moduels
+      // crucial security feature - blocks rendering process from having access to node modules
       nodeIntegration: false,
       // web workers will not have access to node
       nodeIntegrationInWorker: false,
-      // disallow experimental feature to allow node.js suppport in subframes (iframes/child windows)
+      // disallow experimental feature to allow node.js support in sub-frames (i-frames/child windows)
       nodeIntegrationInSubFrames: false,
-      // runs electron apis and preload script in a seperate JS context
-      // sepearate context has access to document/window but has it's own built-ins and is isolate from chagnes to gloval environment by locaded page
+      // 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
       contextIsolation: true,
       // disables remote module. critical for ensuring that rendering process doesn't have access to node functionality
@@ -101,7 +101,7 @@ async function createWindow() {
 
   // Load app
   if (isDev) {
-    // load app from webdev server
+    // load app from web-dev server
     win.loadURL(selfHost);
   } else {
     // load local file if in production
@@ -226,6 +226,7 @@ app.on('web-contents-created', (event, contents) => {
       'https://reactype.herokuapp.com',
       'https://github.com/',
       'https://nextjs.org',
+      'https://developer.mozilla.org'
     ];
     console.log('parsed URL origin', parsedUrl.origin);
     // Log and prevent the app from navigating to a new page if that page's origin is not whitelisted
@@ -247,6 +248,7 @@ app.on('web-contents-created', (event, contents) => {
       'https://reactype.herokuapp.com',
       'https://github.com/',
       'https://nextjs.org',
+      'https://developer.mozilla.org'
     ];
 
     // Log and prevent the app from redirecting to a new page
@@ -260,12 +262,12 @@ app.on('web-contents-created', (event, contents) => {
 
       event.preventDefault();
       return;
-    } else console.log('Succesful link sent to browser');
+    } else console.log('Successful link sent to browser');
   });
 
   // https://electronjs.org/docs/tutorial/security#11-verify-webview-options-before-creation
   // The web-view is used to embed guest content in a page
-  // This event listener deletes webviews if they happen to occur in the app
+  // This event listener deletes web-views if they happen to occur in the app
   // https://www.electronjs.org/docs/api/web-contents#event-will-attach-webview
   contents.on('will-attach-webview', (event, webPreferences, params) => {
     // Strip away preload scripts if unused or verify their location is legitimate
@@ -286,6 +288,7 @@ app.on('web-contents-created', (event, contents) => {
       'https://reactype.herokuapp.com',
       'https://github.com/',
       'https://nextjs.org',
+      'https://developer.mozilla.org'
     ];
     console.log('parsed URL origin', parsedUrl.origin);
     // Log and prevent the app from navigating to a new page if that page's origin is not whitelisted
@@ -377,15 +380,15 @@ ipcMain.on('delete_cookie', event => {
     .catch(err => console.log('Error deleting cookie:', err));
 });
 
-// opens new window for github oauth when button on signin page is clicked
+// opens new window for github oauth when button on sign in page is clicked
 ipcMain.on('github', event => {
   // your github applications credentials
   const options = {
     client_id: 'your_client_id',
     client_secret: 'your_client_secret',
     scopes: ['user:email', 'notifications']
   };
-  // create new browserwindow object with size, title, security options
+  // create new browser window object with size, title, security options
   const github = new BrowserWindow({
     width: 800,
     height: 600,
@@ -425,7 +428,7 @@ ipcMain.on('github', event => {
 });
 
 ipcMain.on('tutorial', event => {
-  // create new browserwindow object with size, title, security options
+  // create new browser window object with size, title, security options
   const tutorial = new BrowserWindow({
     width: 800,
     height: 600,

app/electron/menu.js

@@ -16,8 +16,8 @@ var MenuBuilder = function(mainWindow, appName) {
 
   const openTutorial = () => {
     const tutorial = new BrowserWindow({
-      width: 1224,
-      height: 1024,
+      width: 800,
+      height: 900,
       minWidth: 661,
       title: 'Tutorial',
       webPreferences: {

app/src/components/bottom/CodePreview.tsx

@@ -1,7 +1,6 @@
 import React, { useContext, useState, useRef, useEffect } from 'react';
 import { StateContext } from '../../context/context';
 import AceEditor from 'react-ace';
-import { makeStyles } from '@material-ui/core/styles';
 import 'ace-builds/src-noconflict/mode-javascript';
 import 'ace-builds/src-noconflict/theme-monokai';
 import 'ace-builds/src-noconflict/theme-github';
@@ -13,14 +12,12 @@ import useResizeObserver from '../../tree/useResizeObserver';
 
 const CodePreview = ({ theme, setTheme }) => {
   const wrapper = useRef();
-  //console.log(wrapper.current);
   const dimensions = useResizeObserver(wrapper);
   const { width, height } =
     dimensions || 0;
 
   const [state, dispatch] = useContext(StateContext);
   const [divHeight, setDivHeight] = useState(0);
-  // const classes = useStyles();
   const currentComponent = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId
   );
@@ -35,7 +32,6 @@ const CodePreview = ({ theme, setTheme }) => {
 
   useEffect(() => {
     setDivHeight(height);
-    //console.log(divHeight);
   }, [height])
 
   return (
@@ -47,7 +43,6 @@ const CodePreview = ({ theme, setTheme }) => {
         justifyContent: 'center'
       }}
     >
-      {/* <h1>{divHeight}</h1> */}
       <AceEditor
         mode="javascript"
         theme={theme}
@@ -57,16 +52,9 @@ const CodePreview = ({ theme, setTheme }) => {
           border: '2px solid #33eb91',
           borderRadius: '8px'
         }}
-        // onChange={code =>
-        //   this.props.updateCode({
-        //     componentId: this.props.focusComponent.id,
-        //     code
-        //   })
-        // }
         onChange={handleCodeSnipChange}
         value={currentComponent.code}
         name="Code_div"
-        // readOnly={this.props.codeReadOnly}
         readOnly={false}
         editorProps={{ $blockScrolling: true }}
         fontSize={16}
@@ -76,6 +64,4 @@ const CodePreview = ({ theme, setTheme }) => {
   );
 };
 
-// const useStyles = makeStyles(theme => ({}));
-
 export default CodePreview;

app/src/components/left/ComponentPanel.tsx

@@ -162,7 +162,6 @@ const ComponentPanel = (): JSX.Element => {
           {state.components
             .filter(comp => state.rootComponents.includes(comp.id))
             .map(comp => {
-              //console.log('root comp', comp.name)
               return (
                 <ComponentPanelItem
                   isFocus={isFocus(comp.id)}
@@ -180,8 +179,6 @@ const ComponentPanel = (): JSX.Element => {
           {state.components
             .filter(comp => !state.rootComponents.includes(comp.id))
             .map(comp => {
-              //console.log('all root comps', state.rootComponents);
-              //console.log('all reusable comps', state.components);
               return (
                 <ComponentPanelItem
                   isFocus={isFocus(comp.id)}

app/src/components/left/HTMLItem.tsx

@@ -61,7 +61,8 @@ const HTMLItem: React.FC<{
         >
           {Icon && <Icon />}
         </span>
-        <button className={buttonClasses} onClick={() => { handleDelete(id) }} > X </button>
+        {id > 11 &&
+        <button className={buttonClasses} onClick={() => { handleDelete(id) }} > X </button> }
       </div>
     </Grid>
   );

app/src/components/left/HTMLPanel.tsx

@@ -74,8 +74,6 @@ const HTMLPanel = (): JSX.Element => {
     const formattedName =
       inputNameClean.charAt(0).toUpperCase() + inputNameClean.slice(1);
     // add new component to state
-    console.log(inputTag);
-    console.log(inputName);
     const newElement = {
       id: currentID,
       tag: inputTag,
@@ -89,7 +87,6 @@ const HTMLPanel = (): JSX.Element => {
       type: 'ADD ELEMENT',
       payload: newElement
     });
-
     setCurrentID(currentID + 1);
     setTag('');
     setName('');

app/src/components/main/Canvas.tsx

@@ -11,7 +11,7 @@ const findNestedChild = (curr, components) => {
     comp.children.forEach(child => {
       if (child.name === curr.name) console.log(child.name)
     });
-    if (comp.children.length !== 0) findNestedChild(curr, comp.children);  
+    if (comp.children.length !== 0) findNestedChild(curr, comp.children);
   });
 }
 
@@ -84,7 +84,7 @@ function Canvas() {
   // Combine the default styles of the canvas with the custom styles set by the user for that component
   // The render children function renders all direct children of a given component
   // Direct children are draggable/clickable
-  
+
   const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
   return (
     <div ref={drop} style={canvasStyle} onClick={onClickHandler}>

app/src/components/main/DirectChildComponent.tsx

@@ -22,7 +22,7 @@ function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
   const referencedComponent: Component = state.components.find(
     (elem: Component) => elem.id === typeId
   );
-  
+
   const [{ isDragging }, drag] = useDrag({
     // setting item attributes to be referenced when updating state with new instance of dragged item
     item: {
@@ -58,8 +58,6 @@ function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
       state.canvasFocus.childId === childId ? '1px 1px 3px rgb(11,212,112)' : ''
   };
 
-  //console.log('reference comp', referencedComponent);
-
   const combinedStyle = combineStyles(
     combineStyles(
       combineStyles(globalDefaultStyle, referencedComponent.style),
@@ -87,7 +85,7 @@ function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
           childReferencedComponent.style,
           child.style
         );
-  
+
         // render an IndirectChild component, and also call renderIndirectChildren recursively to render any of the child Component's children
         return (
           <IndirectChild

app/src/components/main/RouteLink.tsx

@@ -11,8 +11,6 @@ function RouteLink({ childId, type, typeId, style }: ChildElement) {
   const ref = useRef(null);
 
   // find the name of the Component corresponding with this link
-  console.log(state.components);
-  
   const routeName: string = state.components.find(
     (comp: Component) => comp.id === typeId
   ).name;

app/src/components/right/DeleteProjects.tsx

@@ -42,7 +42,6 @@ function ProjectsDialog(props: ProjectDialogProps) {
     const selectedProject = projects.filter(
       (project: any) => project.name === value
     )[0];
-    console.log('selectedProject is', selectedProject);
     deleteProject(selectedProject);
     localforage.removeItem(window.localStorage.getItem('ssid'));
     dispatch({ type: 'SET INITIAL STATE', payload: initialState });

app/src/components/right/ProjectManager.tsx

@@ -32,7 +32,6 @@ const ProjectManager = () => {
   const classes = useStyles();
 
   const { style, setStyle } = useContext(styleContext);
-  // console.log('style: ', style);
 
   // Allows users to toggle project between "next.js" and "Classic React"
   // When a user changes the project type, the code of all components is rerendered

app/src/containers/AppContainer.tsx

@@ -11,7 +11,6 @@ export const styleContext = createContext({
   style: null,
   setStyle: null
 });
-// console.log('styleContext: ', styleContext);
 
 const AppContainer = () => {
   const [theme, setTheme] = useState(theme1);

app/src/context/HTMLTypes.tsx

@@ -97,6 +97,15 @@ const HTMLTypes: HTMLType[] = [
     placeHolderShort: 'Header 2',
     placeHolderLong: '',
     icon: HeaderIcon
+  },
+  {
+    id: 5,
+    tag: 'span',
+    name: 'Span',
+    style: { fontSize: '1.5em' },
+    placeHolderShort: 'Span',
+    placeHolderLong: '',
+    icon: HeaderIcon
   }
 ];
 

app/src/helperFunctions/generateCode.ts

@@ -245,10 +245,6 @@ const generateCode = (
   projectType: string,
   HTMLTypes: HTMLType[]
 ) => {
-  // console.log('components', components);
-  // console.log('componentId', componentId);
-  // console.log('rootComponents', rootComponents);
-  // console.log('projectType', projectType);
   const code = generateUnformattedCode(
     components,
     componentId,

app/src/helperFunctions/projectGetSaveDel.ts

@@ -6,7 +6,6 @@ if (isDev) {
 // helper functions that will do fetch requests to get and save user/guest projects
 
 export const getProjects = (): Promise<any> => {
-  //console.log("Loading user's projects...");
   let userId = window.localStorage.getItem('ssid');
   const body = JSON.stringify({ userId });
   const projects = fetch(`${serverURL}/getProjects`, {

app/src/public/styles/style.css

@@ -248,7 +248,7 @@ RIGHT COLUMN
   transition: width 250ms ease-in-out;
   width: 100%;
   height: 100%;
-  min-height: 100%;
+  min-height: 500px;
   /* display: flex; */
   /* flex-direction: row; */
   background-color: #fcfcfc;

app/src/reducers/componentReducer.ts

@@ -127,7 +127,6 @@ const reducer = (state: State, action: Action) => {
   }
 
   const deleteComponentFromPages = (components, name) => {
-    console.log('name', name);
     const searchNestedComps = (childComponents) => {
       console.log('child components', childComponents);
       // if (childComponents.length === 0) return console.log('empty children array');
@@ -163,7 +162,6 @@ const reducer = (state: State, action: Action) => {
         children: [],
         isPage: action.payload.root
       };
-      console.log('new comp =>', newComponent);
       components.push(newComponent);
 
       const rootComponents = [...state.rootComponents];
@@ -388,7 +386,6 @@ const reducer = (state: State, action: Action) => {
     case 'DELETE REUSABLE COMPONENT' : {
       const id: number = state.canvasFocus.componentId;
       const name: string = state.components[id - 1].name;
-      console.log(name);
       const components: Component[] = deleteById(id);
       updateIds(components);
 
@@ -476,9 +473,7 @@ const reducer = (state: State, action: Action) => {
     }
 
     case 'OPEN PROJECT': {
-      console.log("BEFORE: ", action.payload.HTMLTypes);
       convertToJSX(action.payload.HTMLTypes);
-      console.log("AFTER: ", action.payload.HTMLTypes);
       return {
         ...action.payload
       };