Skip to content

Commit 0ac829c

Browse files
tutorial and electron updated
1 parent cd95e83 commit 0ac829c

File tree

14 files changed

+518
-413
lines changed

14 files changed

+518
-413
lines changed

app/.electron/main.ts

Lines changed: 329 additions & 238 deletions
Large diffs are not rendered by default.

app/.electron/menu.ts

Lines changed: 27 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Menu, BrowserWindow, Shell } from 'electron';
22
const isMac = process.platform === 'darwin';
3-
import Protocol from './protocol';
3+
import {scheme, requestHandler } from './protocol';
44
/*
55
DESCRIPTION: This file generates an array containing a menu based on the operating system the user is running.
66
menuBuilder: The entire file is encompassed in menuBuilder. Ultimately, menuBuilder returns a function called
@@ -31,29 +31,28 @@ var MenuBuilder = function (mainWindow, appName) {
3131
// you can also create custom menu items with their own "on click" functionality if you need to
3232
// different roles are available between mac and windows
3333

34-
function openTutorial(): void {
35-
const tutorial = new BrowserWindow({
36-
width: 1180,
37-
height: 900,
38-
minWidth: 665,
39-
title: 'Tutorial',
40-
webPreferences: {
41-
nodeIntegration: true,
42-
nodeIntegrationInWorker: false,
43-
nodeIntegrationInSubFrames: false,
44-
contextIsolation: true,
45-
enableRemoteModule: true,
46-
zoomFactor: 1.0,
47-
devTools: false
48-
}
49-
});
50-
if (import.meta.env.NODE_ENV === 'development') {
51-
tutorial.loadURL(`http://localhost:8080/#/tutorial`);
52-
} else {
53-
tutorial.loadURL(`${Protocol.scheme}://rse/index-prod.html#/tutorial`);
54-
}
55-
tutorial.show();
56-
}
34+
// function openTutorial(): void {
35+
// const tutorial = new BrowserWindow({
36+
// width: 1180,
37+
// height: 900,
38+
// minWidth: 665,
39+
// title: 'Tutorial',
40+
// webPreferences: {
41+
// nodeIntegration: true,
42+
// nodeIntegrationInWorker: false,
43+
// nodeIntegrationInSubFrames: false,
44+
// contextIsolation: true,
45+
// zoomFactor: 1.0,
46+
// devTools: false
47+
// }
48+
// });
49+
// if (import.meta.env.NODE_ENV === 'development') {
50+
// tutorial.loadURL(`http://localhost:8080/#/tutorial`);
51+
// } else {
52+
// tutorial.loadURL(`${scheme}://rse/index-prod.html#/tutorial`);
53+
// }
54+
// tutorial.show();
55+
// }
5756

5857
const defaultTemplate= (): Electron.MenuItemConstructorOptions[] => [
5958
...(isMac
@@ -223,10 +222,10 @@ var MenuBuilder = function (mainWindow, appName) {
223222
);
224223
}
225224
},
226-
{
227-
label: 'Tutorial',
228-
click: () => openTutorial()
229-
}
225+
// {
226+
// label: 'Tutorial',
227+
// click: () => openTutorial()
228+
// }
230229
]
231230
}
232231
];
@@ -243,6 +242,5 @@ var MenuBuilder = function (mainWindow, appName) {
243242
return menu;
244243
}
245244
};
246-
};
247245

248246
export { MenuBuilder };

app/.electron/protocol.ts

Lines changed: 61 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -3,74 +3,76 @@
33
@exports: scheme, requestHandler
44
@usage: is used in main.js
55
*/
6+
// import { Request, Response } from 'electron';
7+
// const { stringify } = require('querystring'); unused
8+
// import * as fs from 'fs';
9+
// import * as path from 'path';
610

7-
const { stringify } = require('querystring');
811

9-
import * as fs from 'fs';
10-
import * as path from 'path';
1112

12-
const DIST_PATH = path.join(__dirname, '../../app/dist');
13+
// const DIST_PATH = path.join(__dirname, '../../app/dist');
1314

14-
const scheme = 'app'; // it will serve resources like app://..... instead of default file://...
15+
// const scheme = 'app'; // it will serve resources like app://..... instead of default file://...
1516

16-
const mimeTypes: Record<string, string> = {
17-
'.js': 'text/javascript',
18-
'.mjs': 'text/javascript',
19-
'.html': 'text/html',
20-
'.htm': 'text/html',
21-
'.json': 'application/json',
22-
'.css': 'text/css',
23-
'.svg': 'application/svg+xml',
24-
'.ico': 'image/vnd.microsoft.icon',
25-
'.png': 'image/png',
26-
'.jpg': 'image/jpeg',
27-
'.map': 'text/plain'
28-
};
17+
// const mimeTypes: Record<string, string> = {
18+
// '.js': 'text/javascript',
19+
// '.mjs': 'text/javascript',
20+
// '.html': 'text/html',
21+
// '.htm': 'text/html',
22+
// '.json': 'application/json',
23+
// '.css': 'text/css',
24+
// '.svg': 'application/svg+xml',
25+
// '.ico': 'image/vnd.microsoft.icon',
26+
// '.png': 'image/png',
27+
// '.jpg': 'image/jpeg',
28+
// '.map': 'text/plain'
29+
// };
2930

30-
function charset(mimeType: string): string | null {
31-
return ['.html', '.htm', '.js', '.mjs'].some((m) => m === mimeType)
32-
? 'utf-8'
33-
: null;
34-
}
35-
// return the file type
36-
function mime(filename: string): string | null {
37-
const type = mimeTypes[path.extname(`${filename || ''}`).toLowerCase()];
38-
return type || null;
39-
}
31+
// function charset(mimeType: string): string | null {
32+
// return ['.html', '.htm', '.js', '.mjs'].some((m) => m === mimeType)
33+
// ? 'utf-8'
34+
// : null;
35+
// }
36+
// // return the file type
37+
// function mime(filename: string): string | null {
38+
// const type = mimeTypes[path.extname(`${filename || ''}`).toLowerCase()];
39+
// return type || null;
40+
// }
4041

4142
/* requestHandler
4243
servers index-prod.html when we access the root endpoint '/'
4344
read the file above and pass on an object includes mimeType, charset, and exisiting data read from the file
4445
*/
45-
function requestHandler(
46-
req: Electron.ProtocolRequest,
47-
next: (response: Electron.ProtocolResponse) => void
48-
): void {
49-
// The URL() constructor returns a newly created URL object representing the URL defined by the parameters.
50-
const reqUrl = new URL(req.url);
51-
// path.normalize resolves '..' and '.' segments in sequential path segments
52-
// url.pathname: an initial '/' followed by the path of the URL not including the query string or fragment (or the empty string if there is no path).
53-
let reqPath = path.normalize(reqUrl.pathname);
46+
// function requestHandler(
47+
// req: Request,
48+
// callback: (response: Response | Promise<Response>) => void
49+
// ): void {
50+
// // The URL() constructor returns a newly created URL object representing the URL defined by the parameters.
51+
// const reqUrl = new URL(req.url);
52+
// // path.normalize resolves '..' and '.' segments in sequential path segments
53+
// // url.pathname: an initial '/' followed by the path of the URL not including the query string or fragment (or the empty string if there is no path).
54+
// let reqPath = path.normalize(reqUrl.pathname);
5455

55-
// when app opens, serve index-prod.html
56-
if (reqPath === '/') {
57-
reqPath = '/index-prod.html';
58-
}
59-
// path.basename returns the last portion of a path which includes filename we want to serve
60-
const reqFilename = path.basename(reqPath);
61-
// use fs module to read index-prod.html (reqPath) in dist folder
62-
fs.readFile(path.join(DIST_PATH, reqPath), (err, data) => {
63-
const mimeType = mime(reqFilename); // returns the file type
64-
// check if there is no error and file type is valid, pass on the info to the next middleware
65-
if (!err && mimeType !== null) {
66-
next({
67-
mimeType,
68-
charset: charset(mimeType),
69-
data
70-
});
71-
} else {
72-
console.error(err);
73-
}
74-
});
75-
}
76-
export { scheme, requestHandler };
56+
// // when app opens, serve index-prod.html
57+
// if (reqPath === '/') {
58+
// reqPath = '/index-prod.html';
59+
// }
60+
// // path.basename returns the last portion of a path which includes filename we want to serve
61+
// const reqFilename = path.basename(reqPath);
62+
// // use fs module to read index-prod.html (reqPath) in dist folder
63+
// fs.readFile(path.join(DIST_PATH, reqPath), (err, data) => {
64+
// const mimeType = mime(reqFilename); // returns the file type
65+
// // check if there is no error and file type is valid, pass on the info to the next middleware
66+
// if (!err && mimeType !== null) {
67+
// callback({
68+
// mimeType,
69+
// charset: charset(mimeType),
70+
// data
71+
// });
72+
// } else {
73+
// console.error(err);
74+
// }
75+
// });
76+
// }
77+
78+
// export { scheme };

app/.electron/render.ts

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11

2-
import {remote} from 'electron';
3-
import {BrowserWindow} from 'electron-window-manager';
2+
// import {remote} from 'electron';
3+
// import {BrowserWindow} from 'electron-window-manager';
44

5-
const win2 = browserwindow.createNew('win2', 'Windows #2');
6-
win2.setURL('/win2.html');
7-
win2.onReady(() => {...});
8-
win2.open()
5+
// const win2 = BrowserWindow.createNew('win2', 'Windows #2');
6+
// win2.setURL('/win2.html');
7+
// win2.onReady(() => {...});
8+
// win2.open()
99

1010

1111

@@ -15,3 +15,7 @@ win2.open()
1515
=windowManager.createNew('win2', 'Windows #2'); win2.setURL('/win2.html');
1616
win2.onReady( ... ); win2.open();
1717
</script>; */
18+
19+
20+
// unnecesary code / file
21+
// win2 is unused nor needed.

app/src/components/top/NavBarButtons.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import ProjectsFolder from '../right/OpenProjects';
1414
import { RootState } from '../../redux/store';
1515
import SaveProjectButton from '../right/SaveProjectButton';
1616
import serverConfig from '../../serverConfig.js';
17-
1817
import createModal from '../right/createModal';
1918
import createStyles from '@mui/styles/createStyles';
2019
import makeStyles from '@mui/styles/makeStyles';
@@ -90,7 +89,6 @@ const StyledMenuItem = withStyles((theme) => ({
9089
// where the main function starts //
9190
const navbarDropDown = (props) => {
9291
const dispatch = useDispatch();
93-
9492
const [modal, setModal] = React.useState(null);
9593
const [anchorEl, setAnchorEl] = React.useState(null);
9694
const classes = useStyles();
@@ -105,6 +103,8 @@ const navbarDropDown = (props) => {
105103
const closeModal = () => setModal('');
106104
const handleClick = (event) => {
107105
setAnchorEl(event.currentTarget);
106+
107+
props.setDropDownMenu(true)
108108
};
109109

110110
const clearWorkspace = () => {
@@ -188,7 +188,7 @@ const navbarDropDown = (props) => {
188188

189189
return (
190190
<div data-testid="navDropDown" ref={ref} className={showMenu}>
191-
<Link to="/tutorial" style={{ textDecoration: 'none' }} target="_blank">
191+
<Link to="/tutorial" style={{ textDecoration: 'none' }} target="_blank">
192192
<button>
193193
<svg
194194
xmlns="http://www.w3.org/2000/svg"

app/src/index.tsx

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import {
55
Redirect,
66
Route,
77
HashRouter as Router,
8-
Switch
8+
Switch,
9+
Link
910
} from 'react-router-dom';
1011
import { DndProvider } from 'react-dnd';
1112
import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -28,6 +29,7 @@ const client = new ApolloClient({
2829

2930
const isDev = import.meta.env.NODE_ENV === 'development';
3031
import serverConfig from './serverConfig.js';
32+
import { error } from 'console';
3133

3234
const { DEV_PORT, API_BASE_URL } = serverConfig;
3335
let serverURL = API_BASE_URL;
@@ -47,11 +49,17 @@ const PrivateRoute = ({ component: Component, ...rest }) => {
4749
},
4850
credentials: 'include'
4951
})
50-
.then((res) => res.json())
52+
.then((res) => {
53+
if(!res.ok){
54+
throw new Error('Network Response was not ok')
55+
}
56+
return res.json();
57+
})
5158
.then((data) => {
5259
setIsLoggedIn(data);
5360
})
54-
.catch((err) => console.log(`Error getting project ${err}`));
61+
.catch((err) => {
62+
console.log(`Error getting project ${err}`)});
5563
}, []);
5664

5765
return (
@@ -63,7 +71,7 @@ const PrivateRoute = ({ component: Component, ...rest }) => {
6371
window.localStorage.getItem('ssid') === 'guest'
6472
) {
6573
return <Component {...props} />;
66-
} else if (isLoggedIn !== null) {
74+
} else if (isLoggedIn === false || isLoggedIn !== null) {
6775
return <Redirect to="/login" />;
6876
}
6977
}}
@@ -84,9 +92,9 @@ ReactDOM.render(
8492
<PrivateRoute exact path="/" component={App} />
8593
</DndProvider>
8694
<Route exact path="/dashboard" component={ProjectDashboard} />
87-
<Route exact path="/tutorial" component={Tutorial} />
88-
<Route exact path="/tutorialPage/:learn" component={TutorialPage} />
8995
</Switch>
96+
<Route exact path="/tutorial" component={Tutorial} />
97+
<Route exact path="/tutorialPage/:learn" component={TutorialPage} />
9098
</Router>
9199
</Provider>
92100
</ApolloProvider>,

app/src/serverConfig.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const serverConfig = {
77
// : 'http://localhost:8080',
88
API_BASE_URL2: isProduction
99
? 'https://app.reactype.dev'
10-
: 'http://localhost:8080'
10+
: 'http://localhost:8080',
1111
};
1212
// module.exports = config;
1313

app/src/tutorial/RouteLinks.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react';
2-
import links2 from '../../../resources/route_links_tutorial_images/links2.PNG';
3-
import links3 from '../../../resources/route_links_tutorial_images/links3.PNG';
4-
import links4 from '../../../resources/route_links_tutorial_images/links4.PNG';
5-
import links6 from '../../../resources/route_links_tutorial_images/links6.PNG';
6-
import linksCanvas from '../../../resources/route_links_tutorial_images/links-canvas.PNG';
2+
import links2 from '../../../resources/route_links_tutorial_images/links2.png';
3+
import links3 from '../../../resources/route_links_tutorial_images/links3.png';
4+
import links4 from '../../../resources/route_links_tutorial_images/links4.png';
5+
import links6 from '../../../resources/route_links_tutorial_images/links6.png';
6+
import linksCanvas from '../../../resources/route_links_tutorial_images/links-canvas.png';
77

88
const RouteLinks: React.FC<{
99
classes: any;

0 commit comments

Comments
 (0)