Added README and resolved merge conflicts.

Author: tsully

__tests__/componentReducer.test.ts

@@ -0,0 +1,84 @@
+import reducer from '../app/src/reducers/componentReducer';
+import { State, Action, Component, ChildElement } from '../app/src/interfaces/InterfacesNew';
+
+import initialState from '../app/src/context/initialState';
+
+
+describe('Testing componentReducer functionality', function () {
+  let state: State = initialState;
+  
+
+  // TEST 'ADD COMPONENT'
+  describe('ADD COMPONENT reducer', () => {
+    it('should add new reuseable component to state', () => {
+      const action = {
+        type: 'ADD COMPONENT',
+        payload: {
+          componentName: "TestRegular",
+          root: false
+        }
+      }
+      state = reducer(state, action);
+      // expect state.components array to have length 2
+      const length = state.components.length;
+      expect(length).toEqual(2);
+      // expect new component name to match name of last elem in state.components array
+      expect(state.components[length - 1].name).toEqual(action.payload.componentName);
+    })
+  })
+
+  // TEST 'ADD CHILD'
+  describe('ADD CHILD reducer', () => {
+    it('should add child component to top-level component', () => {
+      const action = {
+        type: 'ADD CHILD',
+        payload: {
+          type: 'Component',
+          typeId: 2,
+          childId: null
+        }
+      }
+      // switch focus to very first root component
+      state.canvasFocus = { componentId: 1, childId: null };
+      console.log(state);
+      state = reducer(state, action);
+      const newParent = state.components[0];
+      // expect new parent's children array to have length 1
+      expect(newParent.children.length).toEqual(1);
+      // expect new child to have type 'Component' 
+      console.log('new child ', newParent.children[0]);
+      expect(newParent.children[0].type).toEqual('Component');
+      const addedChild = state.components.find(comp => comp.id === newParent.children[0].typeId);
+      // expect new child typeId to correspond to component with name 'TestRegular'
+      expect(addedChild.name).toEqual('TestRegular');
+    })
+  })
+  
+  // TEST 'CHANGE FOCUS'
+  describe('CHANGE FOCUS reducer', () => {
+    it('should change focus to specified component', () => {
+      const action = {
+        type: 'CHANGE FOCUS',
+        payload: {
+          componentId: 2,
+          childId: null
+        }
+      }
+      console.log('before change focus ', state.canvasFocus);
+      state = reducer(state, action);
+      console.log('after change focus ', state.canvasFocus);
+      expect(state.canvasFocus.componentId).toEqual(2);
+      expect(state.canvasFocus.childId).toEqual(null);
+    })
+  })
+
+  // TEST 'UPDATE CSS'
+  describe('UPDATE CSS reducer', () => {
+    it('should update background color of focused component', () => {
+      
+    })
+  })
+
+  // TEST 'RESET STATE'
+
+})

app/electron/main.js

@@ -10,17 +10,22 @@ const {
 // The splash screen is what appears while the app is loading
 const { initSplashScreen, OfficeTemplate } = require('electron-splashscreen');
 const { resolve } = require('app-root-path');
-const Protocol = require('./protocol');
-const MenuBuilder = require('./menu');
-const path = require('path');
 
 const {
   default: installExtension,
   REACT_DEVELOPER_TOOLS
 } = require('electron-devtools-installer');
 const debug = require('electron-debug');
 
-const isDev = process.env.NODE_ENV === 'development';
+const Protocol = require('./protocol');
+// menu from another file to modularize the code
+const MenuBuilder = require('./menu');
+
+const path = require('path');
+// const fs = require('fs');
+
+console.log('NODE ENV is ', process.env.NODE_ENV);
+const isDev = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test' ;
 const port = 8080;
 const selfHost = `http://localhost:${port}`;
 
@@ -58,8 +63,8 @@ async function createWindow() {
     // icon: path.join(__dirname, '../src/public/icons/png/256x256.png'),
     webPreferences: {
       zoomFactor: 0.7,
-      // enable devtools
-      devTools: true,
+      // enable devtools when in development mode
+      devTools: isDev,
       // crucial security feature - blocks rendering process from having access to node moduels
       nodeIntegration: false,
       // web workers will not have access to node
@@ -189,11 +194,12 @@ app.on('ready', createWindow);
 app.on('window-all-closed', () => {
   // On macOS it is common for applications and their menu bar
   // to stay active until the user quits explicitly with Cmd + Q
-  if (process.platform !== 'darwin') {
-    app.quit();
-  } else {
-    ContextMenu.clearMainBindings(ipcMain);
-  }
+  // if (process.platform !== 'darwin') {
+  //   app.quit();
+  // } else {
+  //   ContextMenu.clearMainBindings(ipcMain);
+  // }
+  app.quit();
 });
 
 app.on('activate', () => {
@@ -214,8 +220,8 @@ app.on('web-contents-created', (event, contents) => {
     const parsedUrl = new URL(navigationUrl);
     const validOrigins = [
       selfHost,
-      'http://localhost:8081',
-      'http://reactype.heroku.com',
+      'http://localhost:5000',
+      'https://reactype.herokuapp.com',
       'https://github.com/'
     ];
     // Log and prevent the app from navigating to a new page if that page's origin is not whitelisted
@@ -235,9 +241,8 @@ app.on('web-contents-created', (event, contents) => {
     //console.log('parsedUrl.origin is', parsedUrl.origin);
     const validOrigins = [
       selfHost,
-      'http://localhost:8081',
       'http://localhost:5000',
-      'http://reactype.heroku.com',
+      'https://reactype.herokuapp.com',
       'https://github.com',
       'app://rse/'
     ];
@@ -323,10 +328,16 @@ ipcMain.on('choose_app_dir', event => {
     .catch(err => console.log('ERROR on "choose_app_dir" event: ', err));
 });
 
+// define serverURL for cookie and auth purposes based on environment
+let serverUrl = 'https://reactype.herokuapp.com';
+if (isDev) {
+  serverUrl = 'http://localhost:5000';
+}
+
 // for github oauth login in production, since cookies are not accessible through document.cookie on local filesystem, we need electron to grab the cookie that is set from oauth, this listens for an set cookie event from the renderer process then sends back the cookie
 ipcMain.on('set_cookie', event => {
   session.defaultSession.cookies
-    .get({ url: 'https://reactype.heroku.com' })
+    .get({ url: serverUrl })
     .then(cookie => {
       console.log(cookie);
       event.reply('give_cookie', cookie);
@@ -339,12 +350,47 @@ ipcMain.on('set_cookie', event => {
 // again for production, document.cookie is not accessible so we need this listener on main to delete the cookie on logout
 ipcMain.on('delete_cookie', event => {
   session.defaultSession.cookies
-    .remove('https://reactype.heroku.com', 'ssid')
+    .remove(serverUrl, 'ssid')
     .then(removed => {
       console.log('Cookies deleted', removed);
     })
     .catch(err => console.log('Error deleting cookie:', err));
 });
 
-// bypass ssl certification validation error
-// app.commandLine.appendSwitch('ignore-certificate-errors', 'true');
+// opens new window for github oauth when button on signin page is clicked
+ipcMain.on('github', event => {
+  // create new browserwindow object with size, title, security options
+  const github = new BrowserWindow({
+    width: 800,
+    height: 600,
+    title: 'Github Oauth',
+    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
+  github.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();
+    }
+  });
+});

app/electron/preload.js

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

app/electron/preloadFunctions/cookies.js

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

app/src/components/login/SignIn.tsx

@@ -80,6 +80,24 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
   const [invalidUser, setInvalidUser] = useState(false);
   const [invalidPass, setInvalidPass] = useState(false);
 
+  // this useEffect will check for cookies and set an item in localstorage for github Oauth session validation
+  useEffect(() => {
+    const githubCookie = setInterval(() => {
+      window.api.setCookie();
+      window.api.getCookie(cookie => {
+        // if a cookie exists, set localstorage item with cookie data, clear interval, go back to '/' route to load app
+        if (cookie[0]) {
+          window.localStorage.setItem('ssid', cookie[0].value);
+          clearInterval(githubCookie);
+          props.history.push('/');
+          // if an item is already set in localstorage (guest option or normal login) clear interval needs to be run or else this will constantly run
+        } else if (window.localStorage.getItem('ssid')) {
+          clearInterval(githubCookie);
+        }
+      });
+    }, 2000);
+  }, []);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     let inputVal = e.target.value;
     switch (e.target.name) {
@@ -188,10 +206,11 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
           helperText={invalidPassMsg}
           error={invalidPass}
         />
+        {/* **TODO** Make 'Remember Me' functional
         <FormControlLabel
           control={<Checkbox value="remember" color="primary" />}
           label="Remember me"
-        />
+        /> */}
 
         <Button
           fullWidth
@@ -203,25 +222,18 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
           Sign In
         </Button>
         {/* Hiding github oauth button as it's still buggy and not fully working */}
-        {/* <Button
+        <Button
           fullWidth
           variant="contained"
           color="default"
           className={classes.submit}
-          href="https://reactype.heroku.com/github"
           onClick={() => {
-            console.log('Inside onclick of github');
-            setTimeout(() => {
-              window.api.setCookie();
-              window.api.getCookie(cookie => {
-                window.localStorage.setItem('ssid', cookie[0].value);
-                props.history.push('/');
-              });
-            }, 2000);
+            // messages the main proces to open new window for github oauth
+            window.api.github();
           }}
         >
           <GitHubIcon />
-        </Button> */}
+        </Button>
 
         <Button
           fullWidth

app/src/helperFunctions/generateCode.ts

@@ -1,6 +1,14 @@
 import { Component, State, ChildElement } from '../interfaces/Interfaces';
 import HTMLTypes from '../context/HTMLTypes';
 
+
+
+declare global {
+  interface Window {
+    api: any;
+  }
+}
+
 // generate code based on the component heirarchy
 const generateUnformattedCode = (
   comps: Component[],
@@ -216,7 +224,21 @@ const generateUnformattedCode = (
 
 // formats code with prettier linter
 const formatCode = (code: string) => {
-  return window.api.formatCode(code);
+
+  // in test environment, window.api is not defined,
+  // so we reference original prettier format function instead
+  if (process.env.NODE_ENV === 'test') {
+    const { format } = require('prettier');
+    return format(code, {
+      singleQuote: true,
+      trailingComma: 'es5',
+      bracketSpacing: true,
+      jsxBracketSameLine: true,
+      parser: 'babel'
+    });
+  } else {
+    return window.api.formatCode(code);
+  }
 };
 
 // generate code based on component heirarchy and then return the rendered code

app/src/public/styles/style.css

@@ -311,6 +311,8 @@ a.nav_link:hover {
   text-decoration: underline;
 }
 
+/* Additional styling for ReacType X */
+
 .componentDefault {
   width: 100%;
   border: 2px solid gray;

app/src/reducers/componentReducer.ts

@@ -133,7 +133,7 @@ const reducer = (state: State, action: Action) => {
         type,
         typeId,
         childId
-      }: { type: string; typeId: number; childId: number } = action.payload;
+      }: { type: string; typeId: number; childId: any} = action.payload;
       // the parent of the new child is whichever component that is currently focused on
       const parentComponentId: number = state.canvasFocus.componentId;
 

app/src/utils/createNonce.js

@@ -3,5 +3,5 @@ const { v4: uuidv4 } = require('uuid');
 // Generate an arbitrary number
 // this arbitrary number will be used in CspHtmlWebpackPlugin and HtmlWebpackPlugin configuration in webpack
 module.exports = function() {
-  return new Buffer(uuidv4()).toString('base64');
+  return new Buffer.from(uuidv4()).toString('base64');
 };