tutorial finished and console logs cleaned up

Author: john lim

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
@@ -262,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
@@ -380,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,
@@ -428,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

@@ -27,7 +27,7 @@ var MenuBuilder = function(mainWindow, appName) {
         contextIsolation: true,
         enableRemoteModule: false,
         zoomFactor: 1.0,
-        // devTools: false
+        devTools: false
       }
     });
     tutorial.loadURL(`http://localhost:8080/#/tutorial`);

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/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/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/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
       };

app/src/tree/TreeChart.tsx

@@ -37,7 +37,6 @@ function TreeChart({ data }) {
     // transform hierarchical data
     const root = hierarchy(data[canvasId - 1]);
     const treeLayout = tree().size([height, width - 125]);
-    //console.log(root);
 
     // Returns a new link generator with horizontal display.
     // To visualize links in a tree diagram rooted on the left edge of the display

app/src/utils/createApplication.util.ts

@@ -98,7 +98,7 @@ export const createDefaultCSS = (path, appName, components) => {
   components.forEach(comp => {
     data += compToCSS(comp);
   })
-  
+
   window.api.writeFile(filePath, data, err => {
     if (err) {
       console.log('default.css error:', err.message);

app/src/utils/createNextApp.util.ts

@@ -1,4 +1,4 @@
-// Create all files necessary to run a next.js application 
+// Create all files necessary to run a next.js application
 
 import createNextFiles from './createNextFiles.util';
 import { Component } from '../interfaces/Interfaces';
@@ -46,7 +46,7 @@ export const createPackage = (path, appName) => {
     "@types/react": "^16.9.41",
     "typescript": "^3.9.6"
   }
-}  
+}
   `;
   window.api.writeFile(filePath, data, err => {
     if (err) {
@@ -110,7 +110,7 @@ export const initFolders = (path:string, appName: string) => {
 
 //createBaseTsx
 export const createBaseTsx = (path, appName) => {
-  
+
   const filePath:string = `${path}/${appName}/pages/_app.tsx`;
   const data:string = `
   import React from 'react';
@@ -123,7 +123,7 @@ export const createBaseTsx = (path, appName) => {
       </>
     )
   }
-  
+
   export default Base;
   `;
   window.api.writeFile(filePath, data, err => {
@@ -147,13 +147,13 @@ async function createNextAppUtil({
   rootComponents: number[];
 }) {
   console.log('in the createNextApplication util');
-  
+
   await initFolders(path, appName);
   await createBaseTsx(path, appName);
   await createDefaultCSS(path, appName, components);
   await createPackage(path, appName);
   await createTsConfig(path, appName);
   await createNextFiles(components, path, appName, rootComponents);
-  
+
 }
-export default createNextAppUtil;
+export default createNextAppUtil;