tutorial menu link working

Author: diegovazquezny

app/electron/main.js

@@ -78,7 +78,8 @@ async function createWindow() {
       // disables remote module. critical for ensuring that rendering process doesn't have access to node functionality
       enableRemoteModule: false,
       // path of preload script. preload is how the renderer page will have access to electron functionality
-      preload: path.join(__dirname, 'preload.js')
+      preload: path.join(__dirname, 'preload.js'),
+      nativeWindowOpen: true
     }
   });
 
@@ -397,4 +398,45 @@ ipcMain.on('github', event => {
   });
 });
 
+ipcMain.on('tutorial', event => {
+  // create new browserwindow object with size, title, security options
+  const tutorial = new BrowserWindow({
+    width: 800,
+    height: 600,
+    title: 'Tutorial',
+    webPreferences: {
+      nodeIntegration: false,
+      nodeIntegrationInWorker: false,
+      nodeIntegrationInSubFrames: false,
+      contextIsolation: true,
+      enableRemoteModule: false,
+      zoomFactor: 1.0
+    }
+  });
+  // redirects to relevant server endpoint
+  //github.loadURL(`${serverUrl}/github`);
+  // show window
+  tutorial.show();
+  // if final callback is reached and we get a redirect from server back to our app, close oauth window
+  // github.webContents.on('will-redirect', (e, callbackUrl) => {
+  //   let redirectUrl = 'app://rse/';
+  //   if (isDev) {
+  //     redirectUrl = 'http://localhost:8080/';
+  //   }
+  //   if (callbackUrl === redirectUrl) {
+  //     dialog.showMessageBox({
+  //       type: 'info',
+  //       title: 'ReacType',
+  //       icon: resolve('app/src/public/icons/png/256x256.png'),
+  //       message: 'Github Oauth Successful!'
+  //     });
+  //     github.close();
+  //   }
+  // });
+});
+
+
+
+
+
 //module.exports = dialog;

app/electron/menu.js

@@ -1,5 +1,10 @@
 const { Menu } = require("electron");
+const { BrowserWindow } = require('electron');
+const fs = require('fs');
+const path = require('path');
 const isMac = process.platform === "darwin";
+const port = 5000;
+const tutorialRoute = `http://localhost:${port}/tutorial`;
 
 // Create a template for a menu and create menu using that template
 var MenuBuilder = function (mainWindow, appName) {
@@ -8,6 +13,25 @@ var MenuBuilder = function (mainWindow, appName) {
   // https://www.electronjs.org/docs/api/menu-item
   // you can also create custom menu items with their own "on click" functionality if you need to
   // different roles are available between mac and windows
+
+  const openTutorial = () => {
+    const tutorial = new BrowserWindow({
+      width: 800,
+      height: 600,
+      title: 'Tutorial',
+      webPreferences: {
+        nodeIntegration: false,
+        nodeIntegrationInWorker: false,
+        nodeIntegrationInSubFrames: false,
+        contextIsolation: true,
+        enableRemoteModule: false,
+        zoomFactor: 1.0
+      }
+    });
+    tutorial.loadURL(`http://localhost:8080/#/tutorial`);
+    tutorial.show();
+  }
+
   let defaultTemplate = function () {
     return [
       // { role: "appMenu" }
@@ -199,7 +223,7 @@ var MenuBuilder = function (mainWindow, appName) {
           }, 
           {
             label: "Tutorial",
-            click: 
+            click: () => openTutorial()
           }
         ],
       },

app/electron/preload.js

@@ -11,7 +11,8 @@ const {
   setCookie,
   getCookie,
   delCookie,
-  github
+  github,
+  tutorial
 } = require('./preloadFunctions/cookies');
 
 // Expose protected methods that allow the renderer process to use select node methods
@@ -34,5 +35,6 @@ contextBridge.exposeInMainWorld('api', {
   setCookie,
   getCookie,
   delCookie,
-  github
+  github,
+  tutorial
 });

app/electron/preloadFunctions/cookies.js

@@ -18,4 +18,8 @@ const github = () => {
   return ipcRenderer.send('github');
 };
 
-module.exports = { setCookie, getCookie, delCookie, github };
+const tutorial = () => {
+  return ipcRenderer.send('tutorial');
+};
+
+module.exports = { setCookie, getCookie, delCookie, github, tutorial };

app/src/components/bottom/BottomTabs.tsx

@@ -9,6 +9,7 @@ import Tree from '../../tree/TreeChart';
 import { emitKeypressEvents } from 'readline';
 import NativeSelect from '@material-ui/core/NativeSelect';
 import FormControl from '@material-ui/core/FormControl';
+import { styleContext } from '../../containers/AppContainer';
 
 const BottomTabs = () => {
   // state that controls which tab the user is on
@@ -17,7 +18,8 @@ const BottomTabs = () => {
   const classes = useStyles();
   treeWrapper: HTMLDivElement;
   const [theme, setTheme] = useState('monokai');
-
+  const { style } = useContext(styleContext);
+  
   // method changes the
   const handleChange = (event: React.ChangeEvent, value: number) => {
     setTab(value);
@@ -31,7 +33,7 @@ const BottomTabs = () => {
   };
 
   return (
-    <div className={classes.root}>
+    <div className={classes.root} style={style}>
       <Box display="flex" justifyContent="space-between">
         <Tabs
           value={tab}
@@ -61,11 +63,11 @@ const BottomTabs = () => {
               value={theme}
               onChange={changeTheme}
             >
-              <option value={'monokai'}>Monokai</option>
-              <option value={'github'}>Github</option>
-              <option value={'solarized_dark'}>Solarized Dark</option>
-              <option value={'terminal'}>Terminal</option>
-              <option value={'solarized_light'}>Solarized Light</option>
+              <option style ={{backgroundColor: '#252526'}} value={'monokai'}>Monokai</option>
+              <option style ={{backgroundColor: '#252526'}} value={'github'}>Github</option>
+              <option style ={{backgroundColor: '#252526'}} value={'solarized_dark'}>Solarized Dark</option>
+              <option style ={{backgroundColor: '#252526'}} value={'terminal'}>Terminal</option>
+              <option style ={{backgroundColor: '#252526'}} value={'solarized_light'}>Solarized Light</option>
             </NativeSelect>
           </div>
         </FormControl>

app/src/components/login/SignIn.tsx

@@ -226,6 +226,7 @@ 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')
             window.api.github();
           }}
         >

app/src/components/login/SignUp.tsx

@@ -292,7 +292,7 @@ const SignUp: React.FC<LoginInt & RouteComponentProps> = props => {
             onClick={e => handleSignUp(e)}
           >
             Sign Up
-          </Button>
+          </Button>+
           <Grid container justify="flex-end">
             <Grid item>
               <RouteLink to={`/login`} className="nav_link">

app/src/components/right/ProjectManager.tsx

@@ -11,7 +11,7 @@ import Button from '@material-ui/core/Button';
 import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
 import FormControl from '@material-ui/core/FormControl';
-import { useHistory, withRouter } from 'react-router-dom';
+import { useHistory, withRouter, Link as RouteLink } from 'react-router-dom';
 
 import exportProject from '../../utils/exportProject.util';
 
@@ -163,17 +163,28 @@ const ProjectManager = () => {
 
   return (
     <div>
+      <RouteLink to={'/tutorial'} style={{textDecoration: 'none'}}>
+        <Button
+          color="primary"
+          style={{ ...style.button, marginLeft: '15%', textDecoration: 'none' }}
+          variant="outlined"
+          className={classes.button}
+        >
+          Tutorial
+        </Button>
+      </RouteLink>
       <Button
         color="primary"
-        style={{ marginLeft: '15%' }}
+        style={{ ...style.button, marginLeft: '15%' }}
+        variant="outlined"
         className={classes.button}
         onClick={() => {
           !style.backgroundColor
-            ? setStyle({ backgroundColor: '#00001a', color: 'red' })
+            ? setStyle({ backgroundColor: '#00001a' })
             : setStyle({});
         }}
       >
-        Change Darkness Mode
+        Change Lighting
       </Button>
 
       <div className={classes.projectManagerWrapper}>

app/src/containers/AppContainer.tsx

@@ -7,7 +7,10 @@ import RightContainer from './RightContainer';
 import { theme1 } from '../public/styles/theme';
 import { makeStyles } from '@material-ui/core/styles';
 
-export const styleContext = createContext({});
+export const styleContext = createContext({
+  style: null, 
+  setStyle: null
+});
 // console.log('styleContext: ', styleContext);
 
 const AppContainer = () => {

app/src/containers/MainContainer.tsx

@@ -1,8 +1,10 @@
-import React, { Component } from 'react';
+import React, { useContext } from 'react';
 import BottomPanel from '../components/bottom/BottomPanel';
 import CanvasContainer from '../components/main/CanvasContainer';
+import { styleContext } from './AppContainer';
 
-const MainContainer = ({ style }) => {
+const MainContainer = () => {
+  const { style } = useContext(styleContext);
   return (
     <div className="main-container" style={style}>
       <div className="main">

app/src/index.js

@@ -6,20 +6,28 @@ import Cookies from 'js-cookie';
 
 import SignIn from './components/login/SignIn.tsx';
 import SignUp from './components/login/SignUp.tsx';
-import Wizard from './wizard/Wizard.tsx';
+import Tutorial from './tutorial/Tutorial.tsx';
+import Pages from './tutorial/Pages.tsx';
+import Customization from './tutorial/Customization.tsx';
+import Canvas from './tutorial/Canvas.tsx';
+import Styling from './tutorial/Styling.tsx';
+import RouteLinks from './tutorial/RouteLinks.tsx';
+import ReusableComponents from './tutorial/ReusableComponents.tsx';
+import ComponentTree from './tutorial/ComponentTree.tsx';
+import HtmlElements from './tutorial/HtmlElements.tsx';
+import CodePreview from './tutorial/CodePreview.tsx';
 
 import {
   HashRouter as Router,
   Route,
   Redirect,
-  Switch
+  Switch,
 } from 'react-router-dom';
 
 const PrivateRoute = ({ component: Component, ...rest }) => (
   <Route
     {...rest}
     render={props => {
-      //console.log(props);
       return Cookies.get('ssid') || window.localStorage.getItem('ssid') ? (
         <Component {...props} />
         ) : (
@@ -35,11 +43,18 @@ ReactDOM.render(
     <Switch>
       <Route exact path="/login" component={SignIn} />
       <Route exact path="/signup" component={SignUp} />
-      <PrivateRoute path="/" component={App} />
-      <PrivateRoute path="/wizard" component={Wizard} />
+      <PrivateRoute exact path="/" component={App} />
+      <Route exact path="/tutorial" component={Tutorial}/>
+      <Route exact path="/pages" component={Pages}/>
+      <Route exact path="/links" component={RouteLinks}/>
+      <Route exact path="/code-preview" component={CodePreview}/>
+      <Route exact path="/reusable-components" component={ReusableComponents}/>
+      <Route exact path="/component-tree" component={ComponentTree}/>
+      <Route exact path="/html-elements" component={HtmlElements}/>
+      <Route exact path="/styling" component={Styling}/>
+      <Route exact path="/customization" component={Customization}/>
+      <Route exact path="/canvas" component={Canvas}/>
     </Switch>
   </Router>,
   document.getElementById('app')
-);
-
-// ReactDOM.render(<App></App>, document.getElementById('app'));
+);

app/src/tutorial/Canvas.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
+
+// import Grid from '@material-ui/core/Grid';
+
+// import ComponentPanel from '../components/left/ComponentPanel';
+// import HTMLPanel from '../components/left/HTMLPanel';
+
+// Left-hand portion of the app, where component options are displayed
+
+const Canvas: React.FC<RouteComponentProps> = () => {
+  return (
+    <div>
+      Canvas
+      <Link to={`/`}>
+        <button>Application</button>
+      </Link>
+      <Link to={`/tutorial`}>
+        <button>Tutorial</button>
+      </Link>
+    </div>
+  );
+};
+
+export default withRouter(Canvas);
+

app/src/tutorial/CodePreview.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
+
+// import Grid from '@material-ui/core/Grid';
+
+// import ComponentPanel from '../components/left/ComponentPanel';
+// import HTMLPanel from '../components/left/HTMLPanel';
+
+// Left-hand portion of the app, where component options are displayed
+
+const CodePreview: React.FC<RouteComponentProps> = () => {
+  return (
+    <div>
+      CodePreview
+      <Link to={`/`}>
+        <button>Application</button>
+      </Link>
+      <Link to={`/tutorial`}>
+        <button>Tutorial</button>
+      </Link>
+    </div>
+  );
+};
+
+export default withRouter(CodePreview);
+

app/src/tutorial/ComponentTree.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
+
+// import Grid from '@material-ui/core/Grid';
+
+// import ComponentPanel from '../components/left/ComponentPanel';
+// import HTMLPanel from '../components/left/HTMLPanel';
+
+// Left-hand portion of the app, where component options are displayed
+
+const ComponentTree: React.FC<RouteComponentProps> = () => {
+  return (
+    <div>
+      ComponentTree
+      <Link to={`/`}>
+        <button>Application</button>
+      </Link>
+      <Link to={`/tutorial`}>
+        <button>Tutorial</button>
+      </Link>
+    </div>
+  );
+};
+
+export default withRouter(ComponentTree);
+