Resolved merge conflicts and made final UI tweaks

Author: tsully

app/electron/main.js

@@ -214,7 +214,8 @@ app.on('web-contents-created', (event, contents) => {
     const parsedUrl = new URL(navigationUrl);
     const validOrigins = [
       selfHost,
-      'https://localhost:8081',
+      'http://localhost:8081',
+      'http://reactype.heroku.com',
       'https://github.com/'
     ];
     // Log and prevent the app from navigating to a new page if that page's origin is not whitelisted
@@ -234,7 +235,9 @@ app.on('web-contents-created', (event, contents) => {
     //console.log('parsedUrl.origin is', parsedUrl.origin);
     const validOrigins = [
       selfHost,
-      'https://localhost:8081',
+      'http://localhost:8081',
+      'http://localhost:5000',
+      'http://reactype.heroku.com',
       'https://github.com',
       'app://rse/'
     ];
@@ -323,7 +326,7 @@ ipcMain.on('choose_app_dir', event => {
 // 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://localhost:8081' })
+    .get({ url: 'https://reactype.heroku.com' })
     .then(cookie => {
       console.log(cookie);
       event.reply('give_cookie', cookie);
@@ -336,7 +339,7 @@ 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://localhost:8081', 'ssid')
+    .remove('https://reactype.heroku.com', 'ssid')
     .then(removed => {
       console.log('Cookies deleted', removed);
     })

app/src/components/login/SignIn.tsx

@@ -208,7 +208,7 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
           variant="contained"
           color="default"
           className={classes.submit}
-          href="https://localhost:8081/github"
+          href="https://reactype.heroku.com/github"
           onClick={() => {
             console.log('Inside onclick of github');
             setTimeout(() => {

app/src/components/right/LoginButton.tsx

@@ -13,8 +13,12 @@ export default function LoginButton() {
 
   const handleLogout = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     e.preventDefault();
+    // clear local storage
+    window.localStorage.clear();
     // destroys cookie by backdating expiration time
     document.cookie = 'ssid=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+    // destroy cookie in production via electron main process
+    window.api.delCookie();
     // uses useHistory to return to the login page
     history.push('/login');
   };
@@ -25,7 +29,7 @@ export default function LoginButton() {
         variant="contained"
         onClick={handleLogout}
         color="secondary"
-        style={{ textAlign: 'center' }}
+        className={classes.button}
         endIcon={<ExitToAppIcon />}
       >
         Log Out

app/src/components/right/ProjectManager.tsx

@@ -2,21 +2,18 @@ import React, { useState, useContext } from 'react';
 import { stateContext } from '../../context/context';
 
 import { makeStyles } from '@material-ui/core/styles';
-import ExitToAppIcon from '@material-ui/icons/ExitToApp';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import WarningIcon from '@material-ui/icons/Warning';
 import PublishIcon from '@material-ui/icons/Publish';
 import Button from '@material-ui/core/Button';
-import Checkbox from '@material-ui/core/Checkbox';
 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 exportProject from '../../utils/exportProject.util';
-import { saveProject } from '../../helperFunctions/projectGetSave';
 
 import ProjectsFolder from './ProjectsFolder';
 import createModal from './createModal';

app/src/components/right/ProjectsFolder.tsx

@@ -89,9 +89,11 @@ export default function ProjectsFolder() {
   const classes = useStyles();
 
   const handleClickOpen = () => {
-    getProjects().then((data: any) => {
-      setProjects(data);
-      setOpen(true);
+    getProjects().then(data => {
+      if (data) {
+        setProjects(data);
+        setOpen(true);
+      }
     });
   };
 

app/src/containers/RightContainer.tsx

@@ -15,7 +15,7 @@ import ProjectManager from '../components/right/ProjectManager';
 
 // need to pass in props to use the useHistory feature of react router
 const RightContainer = (props): JSX.Element => {
-  //console.log('this is a rerender');
+
   const classes = useStyles();
   const [state, dispatch] = useContext(stateContext);
   const [displayMode, setDisplayMode] = useState('');
@@ -43,7 +43,6 @@ const RightContainer = (props): JSX.Element => {
   // after component renders, reset the input fields with the current styles of the selected child
   useEffect(() => {
     resetFields();
-    //console.log('configTarget is', configTarget);
   }, [state.canvasFocus.componentId, state.canvasFocus.childId]);
 
   // handles all input field changes, with specific updates called based on input's name
@@ -143,7 +142,7 @@ const RightContainer = (props): JSX.Element => {
     if (compWidth !== '') styleObj.width = compWidth;
     if (compHeight !== '') styleObj.height = compHeight;
     if (BGColor !== '') styleObj.backgroundColor = BGColor;
-    console.log(styleObj);
+
     dispatch({
       type: 'UPDATE CSS',
       payload: { style: styleObj }
@@ -154,7 +153,6 @@ const RightContainer = (props): JSX.Element => {
 
   // placeholder for handling deleting instance
   const handleDelete = () => {
-    console.log('DELETING ...');
     dispatch({ type: 'DELETE CHILD', payload: {} });
   };
 

app/src/helperFunctions/auth.ts

@@ -1,19 +1,23 @@
+const isDev = process.env.NODE_ENV === 'development';
+let serverURL = 'https://reactype.herokuapp.com';
+if (isDev) {
+  serverURL = 'http://localhost:5000';
+}
+
 export const sessionIsCreated = (
   username: string,
   password: string
 ): Promise<string> => {
-  console.log('Username and pw in sessionIsCreated', username, password);
   const body = JSON.stringify({
     username,
     password
   });
-  console.log('In sessionIsCreated, body is', body);
-  const result = fetch('http://localhost:8081/login', {
+  console.log(process.env.NODE_ENV);
+  const result = fetch(`${serverURL}/login`, {
     method: 'POST',
     credentials: 'include',
     headers: {
-      'Content-Type': 'application/json',
-      Origin: 'reactype'
+      'Content-Type': 'application/json'
     },
     body
   })
@@ -48,13 +52,11 @@ export const newUserIsCreated = (
     email,
     password
   });
-  const result = fetch('http://localhost:8081/signup', {
+  const result = fetch(`${serverURL}/signup`, {
     method: 'POST',
-    //credentials: 'include',
-    //mode: 'no-cors',
+    credentials: 'include',
     headers: {
       'Content-Type': 'application/json'
-      //'Access-Control-Allow-Origin': 'https://localhost:8081'
     },
     body
   })

app/src/helperFunctions/projectGetSave.ts

@@ -1,11 +1,16 @@
+const isDev = process.env.NODE_ENV === 'development';
+let serverURL = 'https://reactype.herokuapp.com';
+if (isDev) {
+  serverURL = 'http://localhost:5000';
+}
 // helper functions that will do fetch requests to get and save user/guest projects
 
 export const getProjects = (): Promise<Object> => {
   //console.log("Loading user's projects...");
   let userId = window.localStorage.getItem('ssid');
   //console.log('userId from localStorage is', userId);
   const body = JSON.stringify({ userId });
-  const projects = fetch('http://localhost:8081/getProjects', {
+  const projects = fetch(`${serverURL}/getProjects`, {
     method: 'POST',
     headers: {
       'content-type': 'application/json'
@@ -33,7 +38,7 @@ export const saveProject = (
     project: workspace,
     userId: window.localStorage.getItem('ssid')
   });
-  const project = fetch('http://localhost:8081/saveProject', {
+  const project = fetch(`${serverURL}/saveProject`, {
     method: 'POST',
     headers: {
       'content-type': 'application/json'