Skip to content

Commit

Permalink
Merge pull request #172 from oslabs-beta/master
Browse files Browse the repository at this point in the history 
ReacType 8.0 Launch Ready
  • Loading branch information
@pmhua
pmhua committed Oct 6, 2021
2 parents 499898b + 5b7a602 commit a893536
Show file tree
Hide file tree
Showing 32 changed files with 1,235 additions and 412 deletions.
298 changes: 149 additions & 149 deletions app/electron/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,6 +204,7 @@ app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', () => {
win.webContents.executeJavaScript('window.localStorage.clear();');
app.quit();
});

Expand Down Expand Up @@ -256,8 +257,8 @@ app.on('web-contents-created', (event, contents) => {
'https://www.facebook.com',
'https://www.smashingmagazine.com',
'https://www.html5rocks.com',
'app://rse/'
];

// Log and prevent the app from redirecting to a new page
if (
!validOrigins.includes(parsedUrl.origin)
Expand Down Expand Up @@ -360,153 +361,152 @@ if (isDev) {
}

// // 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: serverUrl })
// .then(cookie => {
// // this if statement is necessary or the setInterval on main app will constantly run and will emit this event.reply, causing a memory leak
// // checking for a cookie inside array will only emit reply when a cookie exists
// if (cookie[0]) {
// //console.log(cookie);
// event.reply('give_cookie', cookie);
// }
// })
// .catch(error => {
// console.log('Error giving cookies in set_cookie:', error);
// });
// });

// // 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(serverUrl, 'ssid')
// // .then(removed => {
// // console.log('Cookies deleted', removed);
// // })
// .catch(err => console.log('Error deleting cookie:', err));
// });

// // opens new window for github oauth when button on sign in page is clicked
// ipcMain.on('github', event => {
// // your applications credentials
// const githubUrl = 'https://github.com/login/oauth/authorize?';
// const options = {
// client_id: process.env.GITHUB_ID,
// client_secret: process.env.GITHUB_SECRET,
// scopes: ['user:email', 'notifications']
// };
// // create new browser window 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
// }
// });
// const authUrl = `${githubUrl}client_id=${process.env.GITHUB_ID}`;
// github.loadURL(authUrl);
// github.show();
// const handleCallback = url => {
// const raw_code = /code=([^&]\*)/.exec(url) || null;
// const code = raw_code && raw_code.length > 1 ? raw_code[1] : null;
// const error = /\?error=(.+)\$/.exec(url);

// if (code || error) {
// // Close the browser if code found or error
// authWindow.destroy();
// }

// // If there is a code, proceed to get token from github
// if (code) {
// self.requestGithubToken(options, code);
// } else if (error) {
// alert(
// "Oops! Something went wrong and we couldn't" +
// 'log you in using Github. Please try again.'
// );
// }
// };

// github.webContents.on('will-navigate', (e, url) => handleCallback(url));

// github.webContents.on('did-finish-load', (e, url, a, b) => {
// github.webContents.selectAll();
// });

// github.webContents.on('did-get-redirect-request', (e, oldUrl, newUrl) =>
// handleCallback(newUrl)
// );

// // Reset the authWindow on close
// github.on('close', () => (authWindow = null), false);

// // 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) => {
// const matches = callbackUrl.match(/(?<=\?=).*/);
// const ssid = matches ? matches[0] : '';
// callbackUrl = callbackUrl.replace(/\?=.*/, '');
// 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();
// win.webContents
// .executeJavaScript(`window.localStorage.setItem('ssid', '${ssid}')`)
// .then(result => win.loadURL(selfHost))
// .catch(err => console.log(err));
// }
// });
// });

// ipcMain.on('tutorial', event => {
// // create new browser window object with size, title, security options
// const tutorial = new BrowserWindow({
// width: 800,
// height: 600,
// minWidth: 661,
// 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();
// // }
// // });
// });
ipcMain.on('set_cookie', event => {
session.defaultSession.cookies
.get({ url: serverUrl })
.then(cookie => {
// this if statement is necessary or the setInterval on main app will constantly run and will emit this event.reply, causing a memory leak
// checking for a cookie inside array will only emit reply when a cookie exists
if (cookie[0]) {
event.reply('give_cookie', cookie);
}
})
.catch(error => {
console.log('Error giving cookies in set_cookie:', error);
});
});

// 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(serverUrl, 'ssid')
// .then(removed => {
// console.log('Cookies deleted', removed);
// })
.catch(err => console.log('Error deleting cookie:', err));
});

// opens new window for github oauth when button on sign in page is clicked
ipcMain.on('github', event => {
// your applications credentials
const githubUrl = 'https://github.com/login/oauth/authorize?';
const options = {
client_id: process.env.GITHUB_ID,
client_secret: process.env.GITHUB_SECRET,
scopes: ['user:email', 'notifications']
};
// create new browser window 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
}
});
const authUrl = `${githubUrl}client_id=${process.env.GITHUB_ID}`;
github.loadURL(authUrl);
github.show();
const handleCallback = url => {
const raw_code = /code=([^&]\*)/.exec(url) || null;
const code = raw_code && raw_code.length > 1 ? raw_code[1] : null;
const error = /\?error=(.+)\$/.exec(url);

if (code || error) {
// Close the browser if code found or error
authWindow.destroy();
}

// If there is a code, proceed to get token from github
if (code) {
self.requestGithubToken(options, code);
} else if (error) {
alert(
"Oops! Something went wrong and we couldn't" +
'log you in using Github. Please try again.'
);
}
};

github.webContents.on('will-navigate', (e, url) => handleCallback(url));

github.webContents.on('did-finish-load', (e, url, a, b) => {
github.webContents.selectAll();
});

github.webContents.on('did-get-redirect-request', (e, oldUrl, newUrl) =>
handleCallback(newUrl)
);

// Reset the authWindow on close
github.on('close', () => (authWindow = null), false);

// 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) => {
const matches = callbackUrl.match(/(?<=\?=).*/);
const ssid = matches ? matches[0] : '';
callbackUrl = callbackUrl.replace(/\?=.*/, '');
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();
win.webContents
.executeJavaScript(`window.localStorage.setItem('ssid', '${ssid}')`)
.then(result => win.loadURL(`${redirectUrl}`))
.catch(err => console.log(err));
}
});
});

ipcMain.on('tutorial', event => {
// create new browser window object with size, title, security options
const tutorial = new BrowserWindow({
width: 800,
height: 600,
minWidth: 661,
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;
2 changes: 1 addition & 1 deletion app/src/Dashboard/ProjectContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, {
useState, useContext, useEffect, createContext,
} from 'react';
import {
createMuiTheme, MuiThemeProvider, makeStyles, Theme, useTheme,
createTheme, MuiThemeProvider, makeStyles, Theme, useTheme,
} from '@material-ui/core/styles';
import { useQuery } from '@apollo/client';

Expand Down
6 changes: 4 additions & 2 deletions app/src/components/bottom/BottomTabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const BottomTabs = (props): JSX.Element => {
Arrow.renderArrow(state.canvasFocus.childId);

return (
<div className={classes.root} style={style}>
<div className={`${classes.root} ${classes.rootLight}`} style={style}>
<Box display="flex" justifyContent="space-between" alignItems="center" paddingBottom="10px" paddingRight="10px">
<Tabs
value={tab}
Expand Down Expand Up @@ -111,12 +111,14 @@ const BottomTabs = (props): JSX.Element => {
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
backgroundColor: '#003366',
height: '100%',
color: '#E8E8E8',
boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',

},
rootLight: {
backgroundColor: '#003366'
},
bottomHeader: {
flex: 1,
flexDirection: 'row',
Expand Down
4 changes: 3 additions & 1 deletion app/src/components/bottom/CreationPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,14 @@ import React, { useContext } from 'react';
import ComponentPanel from '../right/ComponentPanel'
import StatePropsPanel from '../right/StatePropsPanel'
import HTMLPanel from '../left/HTMLPanel'
import { styleContext } from '../../containers/AppContainer';

// Creation panel holds all of the creation functionality of the application. ComponentPanel, HTMLPanel, and StatePropsPanel are all hanged here.
// This allows users to create all aspects of this application in one place.
const CreationPanel = (props): JSX.Element => {
const {style} = useContext(styleContext);
return (
<div className="creation-panel" >
<div className="creation-panel" style={style}>
<ComponentPanel isThemeLight={props.isThemeLight}/>
<HTMLPanel isThemeLight={props.isThemeLight}/>
<StatePropsPanel isThemeLight={props.isThemeLight}/>
Expand Down
Loading

0 comments on commit a893536

Please sign in to comment.