Merge pull request #26 from brianjshan/feature

Merged 🐝

Author: diegovazquezny

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 application
+// main.js is what controls the lifecycle of the electron applicaton
 
 // 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 browser window
+// function to create a new broswer 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 initially as it's loading
+    // the browser window will not display intiially 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 modules
+      // crucial security feature - blocks rendering process from having access to node moduels
       nodeIntegration: false,
       // 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)
+      // disallow experimental feature to allow node.js suppport in subframes (iframes/child windows)
       nodeIntegrationInSubFrames: false,
-      // 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 loaded page
+      // 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
       // 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 web-dev server
+    // load app from webdev server
     win.loadURL(selfHost);
   } else {
     // load local file if in production
@@ -263,7 +263,7 @@ app.on('web-contents-created', (event, contents) => {
 
   // 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 web-views if they happen to occur in the app
+  // This event listener deletes webviews 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
@@ -361,9 +361,15 @@ ipcMain.on('delete_cookie', event => {
     .catch(err => console.log('Error deleting cookie:', err));
 });
 
-// opens new window for github oauth when button on sign in page is clicked
+// opens new window for github oauth when button on signin page is clicked
 ipcMain.on('github', event => {
-  // create new browser window object with size, title, security options
+  // 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
   const github = new BrowserWindow({
     width: 800,
     height: 600,
@@ -377,8 +383,11 @@ ipcMain.on('github', event => {
       zoomFactor: 1.0
     }
   });
+  const githubUrl = 'https://github.com/login/oauth/authorize?';
+  const authUrl =
+    githubUrl + 'client_id=' + options.client_id + '&scope=' + options.scopes;
   // redirects to relevant server endpoint
-  github.loadURL(`${serverUrl}/github`);
+  github.loadURL(authUrl);
   // show window
   github.show();
   // if final callback is reached and we get a redirect from server back to our app, close oauth window
@@ -400,7 +409,7 @@ ipcMain.on('github', event => {
 });
 
 ipcMain.on('tutorial', event => {
-  // create new browser window object with size, title, security options
+  // create new browserwindow object with size, title, security options
   const tutorial = new BrowserWindow({
     width: 800,
     height: 600,
@@ -437,8 +446,4 @@ ipcMain.on('tutorial', event => {
   // });
 });
 
-
-
-
-
 //module.exports = dialog;

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/login/SignIn.tsx

@@ -22,6 +22,7 @@ import { makeStyles, withStyles } from '@material-ui/core/styles';
 import Container from '@material-ui/core/Container';
 import GitHubIcon from '@material-ui/icons/GitHub';
 import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
+import { ipcRenderer } from 'electron';
 
 function Copyright() {
   return (
@@ -111,12 +112,12 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
   };
 
   /*
-    Response Options: 
+    Response Options:
     Success
     Error
-    No Username Input 
-    No Password Input 
-    Incorrect Password 
+    No Username Input
+    No Password Input
+    Incorrect Password
     Invalid Username
   */
   const handleLogin = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
@@ -226,7 +227,9 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
           className={classes.submit}
           onClick={() => {
             // messages the main proces to open new window for github oauth
-            console.log('open github')
+            console.log('open github');
+            console.log(window.api);
+            // ipcRenderer.send('github-oauth', 'getToken');
             window.api.github();
           }}
         >

app/src/containers/RightContainer.tsx

@@ -162,24 +162,24 @@ const RightContainer = (): JSX.Element => {
       });
     });
     return isChild;
-  }
+  };
 
   const isLinkedTo = (): boolean => {
     const { id } = configTarget;
-    const pageName = state.components[id-1].name;
+    const pageName = state.components[id - 1].name;
     let isLinked = false;
-    const searchNestedChildren = (comps) => {
+    const searchNestedChildren = comps => {
       if (comps.length === 0) return;
-        comps.forEach((comp, i) => {
-          if (comp.type === 'Route Link' && comp.name === pageName) {
-            isLinked = true;
-          }
-          if (comp.children.length > 0) searchNestedChildren(comp.children);  
-        });
-      } 
+      comps.forEach((comp, i) => {
+        if (comp.type === 'Route Link' && comp.name === pageName) {
+          isLinked = true;
+        }
+        if (comp.children.length > 0) searchNestedChildren(comp.children);
+      });
+    };
     searchNestedChildren(state.components);
     return isLinked;
-  }
+  };
 
   // dispatch to 'UPDATE CSS' called when save button is clicked,
   // passing in style object constructed from all changed input values
@@ -206,14 +206,14 @@ const RightContainer = (): JSX.Element => {
     dispatch({ type: 'DELETE CHILD', payload: {} });
   };
 
-  const handlePageDelete = (id) => () => {
-    // TODO: return modal 
+  const handlePageDelete = id => () => {
+    // TODO: return modal
     if (isLinkedTo()) return setDeleteLinkedPageError(true);
-    isIndex() 
-      ? handleDialogError('index') 
-      : dispatch({ type: 'DELETE PAGE', payload: { id }});
-  }
-  
+    isIndex()
+      ? handleDialogError('index')
+      : dispatch({ type: 'DELETE PAGE', payload: { id } });
+  };
+
   const handleDeleteReusableComponent = () => {
     /*isChildOfPage()
       ? handleDialogError('component')
@@ -235,7 +235,7 @@ const RightContainer = (): JSX.Element => {
     setDeleteIndexError(false);
     setDeleteComponentError(false);
     setDeleteLinkedPageError(false);
-  }
+  };
 
   return (
     <div className="column right" style={style}>
@@ -469,14 +469,14 @@ const RightContainer = (): JSX.Element => {
       >
         <DialogTitle id="alert-dialog-title">
           {deleteIndexError ? ErrorMessages.deleteIndexTitle : ''}
-          {deleteComponentError ? ErrorMessages.deleteComponentTitle : ''} 
+          {deleteComponentError ? ErrorMessages.deleteComponentTitle : ''}
           {deleteLinkedPageError ? ErrorMessages.deleteLinkedPageTitle : ''}
         </DialogTitle>
         <DialogContent>
           <DialogContentText id="alert-dialog-description">
-          {deleteIndexError ? ErrorMessages.deleteIndexMessage : ''}
-          {deleteComponentError ? ErrorMessages.deleteComponentMessage : ''} 
-          {deleteLinkedPageError ? ErrorMessages.deleteLinkedPageMessage : ''}
+            {deleteIndexError ? ErrorMessages.deleteIndexMessage : ''}
+            {deleteComponentError ? ErrorMessages.deleteComponentMessage : ''}
+            {deleteLinkedPageError ? ErrorMessages.deleteLinkedPageMessage : ''}
           </DialogContentText>
         </DialogContent>
         <DialogActions>

app/src/tutorial/Customization.tsx

@@ -1,5 +1,9 @@
 import React from 'react';
-import { Link, RouteComponentProps } from 'react-router-dom';
+import display from '../../../resources/customizing_elements_images/Display.png';
+import flex from '../../../resources/customizing_elements_images/Flex.png';
+import height from '../../../resources/customizing_elements_images/Height.png';
+import width from '../../../resources/customizing_elements_images/Width.png';
+import backgroundcolor from '../../../resources/customizing_elements_images/BackgroundColor.png';
 
 // import Grid from '@material-ui/core/Grid';
 
@@ -13,11 +17,50 @@ const Customization: React.FC<{
   setPage: Function;
 }> = ({ classes, setPage }) => {
   return (
-    <div>
-      Customization
+    <div className="tutorial_styling">
+      <h1 style={{ color: 'black' }}>Customizing Elements</h1>
+      <hr />
+      <h2>Display</h2>
+      <br />
+      <img src={display} />
+      <p>
+        After having moved a page, component, route link, or element into the
+        canvas, select the one that needs customizing simply by clicking on it.
+        Then, to give it a display feature of either a block, inline-block, or
+        flex styling, select from the drop down box.
+        <br />
+        <br />
+        <img src={flex} />
+        <br />
+        <br />
+        If the display option 'flex' is chosen, few more sub-options are
+        displayed under the display option.
+      </p>
+      <br />
+      <hr />
+      <h2>Width</h2>
+      <img src={width} />
+      <br />
+      <p>Change the width of each component, route link, or element.</p>
+      <br />
+      <hr />
+      <h2>Height</h2>
+      <img src={height} />
+      <br />
+      <p>Change the height of each component, route link, or element.</p>
+      <br />
+      <hr />
+      <h2>Background Color</h2>
+      <img src={backgroundcolor} />
+      <br />
+      <p>
+        Select an element, type in the color you wish to change the background
+        color to, and click save!
+      </p>
+      <br />
+      <hr />
     </div>
   );
 };
 
 export default Customization;
-

app/src/tutorial/Pages.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
-import { Link, RouteComponentProps } from 'react-router-dom';
+import pages from '../../../resources/pages_images/Pages.png';
+import toggle from '../../../resources/pages_images/Toggle.png';
+import deletepage from '../../../resources/pages_images/DeletePage.png';
+import addelements from '../../../resources/pages_images/AddElements.png';
 
 // import Grid from '@material-ui/core/Grid';
 
@@ -13,11 +16,31 @@ const Pages: React.FC<{
   setPage: Function;
 }> = ({ classes, setPage }) => {
   return (
-    <div>
-      Pages
+    <div className="tutorial_styling">
+      <h1 style={{ color: 'black' }}>Pages</h1>
+      <hr />
+      <br />
+      <img src={pages} />
+      <p>
+        Start off by giving your page a name. Make sure to check the page box
+        next to the textbox. Then, simply click the add button and it'll show in
+        the pages section below.
+      </p>
+      <br />
+      <img src={toggle} style={{ marginRight: '20px' }} />
+      <img src={addelements} style={{ outline: '1px solid black' }} />
+      <br />
+      <p>
+        Switch between pages by selecting the page and customize it by dragging
+        the elements you want into the canvas of the page you're on. (Note the
+        green dot next to the page name shows you which page you are currently
+        on).
+      </p>
+      <br />
+      <img src={deletepage} />
+      <p>Delete the page by simply clicking the button.</p>
     </div>
   );
 };
 
 export default Pages;
-