Skip to content

Commit

Permalink
tutorial and electron updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@InvectivusTaco
InvectivusTaco committed Apr 30, 2024
1 parent cd95e83 commit 0ac829c
Show file tree
Hide file tree
Showing 14 changed files with 518 additions and 413 deletions.
567 changes: 329 additions & 238 deletions app/.electron/main.ts
View file

Large diffs are not rendered by default.

56 changes: 27 additions & 29 deletions app/.electron/menu.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Menu, BrowserWindow, Shell } from 'electron';
const isMac = process.platform === 'darwin';
import Protocol from './protocol';
import {scheme, requestHandler } from './protocol';
/*
DESCRIPTION: This file generates an array containing a menu based on the operating system the user is running.
menuBuilder: The entire file is encompassed in menuBuilder. Ultimately, menuBuilder returns a function called
Expand Down Expand Up @@ -31,29 +31,28 @@ var MenuBuilder = function (mainWindow, appName) {
// 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

function openTutorial(): void {
const tutorial = new BrowserWindow({
width: 1180,
height: 900,
minWidth: 665,
title: 'Tutorial',
webPreferences: {
nodeIntegration: true,
nodeIntegrationInWorker: false,
nodeIntegrationInSubFrames: false,
contextIsolation: true,
enableRemoteModule: true,
zoomFactor: 1.0,
devTools: false
}
});
if (import.meta.env.NODE_ENV === 'development') {
tutorial.loadURL(`http://localhost:8080/#/tutorial`);
} else {
tutorial.loadURL(`${Protocol.scheme}://rse/index-prod.html#/tutorial`);
}
tutorial.show();
}
// function openTutorial(): void {
// const tutorial = new BrowserWindow({
// width: 1180,
// height: 900,
// minWidth: 665,
// title: 'Tutorial',
// webPreferences: {
// nodeIntegration: true,
// nodeIntegrationInWorker: false,
// nodeIntegrationInSubFrames: false,
// contextIsolation: true,
// zoomFactor: 1.0,
// devTools: false
// }
// });
// if (import.meta.env.NODE_ENV === 'development') {
// tutorial.loadURL(`http://localhost:8080/#/tutorial`);
// } else {
// tutorial.loadURL(`${scheme}://rse/index-prod.html#/tutorial`);
// }
// tutorial.show();
// }

const defaultTemplate= (): Electron.MenuItemConstructorOptions[] => [
...(isMac
Expand Down Expand Up @@ -223,10 +222,10 @@ var MenuBuilder = function (mainWindow, appName) {
);
}
},
{
label: 'Tutorial',
click: () => openTutorial()
}
// {
// label: 'Tutorial',
// click: () => openTutorial()
// }
]
}
];
Expand All @@ -243,6 +242,5 @@ var MenuBuilder = function (mainWindow, appName) {
return menu;
}
};
};

export { MenuBuilder };
120 changes: 61 additions & 59 deletions app/.electron/protocol.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,74 +3,76 @@
@exports: scheme, requestHandler
@usage: is used in main.js
*/
// import { Request, Response } from 'electron';
// const { stringify } = require('querystring'); unused
// import * as fs from 'fs';
// import * as path from 'path';

const { stringify } = require('querystring');

import * as fs from 'fs';
import * as path from 'path';

const DIST_PATH = path.join(__dirname, '../../app/dist');
// const DIST_PATH = path.join(__dirname, '../../app/dist');

const scheme = 'app'; // it will serve resources like app://..... instead of default file://...
// const scheme = 'app'; // it will serve resources like app://..... instead of default file://...

const mimeTypes: Record<string, string> = {
'.js': 'text/javascript',
'.mjs': 'text/javascript',
'.html': 'text/html',
'.htm': 'text/html',
'.json': 'application/json',
'.css': 'text/css',
'.svg': 'application/svg+xml',
'.ico': 'image/vnd.microsoft.icon',
'.png': 'image/png',
'.jpg': 'image/jpeg',
'.map': 'text/plain'
};
// const mimeTypes: Record<string, string> = {
// '.js': 'text/javascript',
// '.mjs': 'text/javascript',
// '.html': 'text/html',
// '.htm': 'text/html',
// '.json': 'application/json',
// '.css': 'text/css',
// '.svg': 'application/svg+xml',
// '.ico': 'image/vnd.microsoft.icon',
// '.png': 'image/png',
// '.jpg': 'image/jpeg',
// '.map': 'text/plain'
// };

function charset(mimeType: string): string | null {
return ['.html', '.htm', '.js', '.mjs'].some((m) => m === mimeType)
? 'utf-8'
: null;
}
// return the file type
function mime(filename: string): string | null {
const type = mimeTypes[path.extname(`${filename || ''}`).toLowerCase()];
return type || null;
}
// function charset(mimeType: string): string | null {
// return ['.html', '.htm', '.js', '.mjs'].some((m) => m === mimeType)
// ? 'utf-8'
// : null;
// }
// // return the file type
// function mime(filename: string): string | null {
// const type = mimeTypes[path.extname(`${filename || ''}`).toLowerCase()];
// return type || null;
// }

/* requestHandler
servers index-prod.html when we access the root endpoint '/'
read the file above and pass on an object includes mimeType, charset, and exisiting data read from the file
*/
function requestHandler(
req: Electron.ProtocolRequest,
next: (response: Electron.ProtocolResponse) => void
): void {
// The URL() constructor returns a newly created URL object representing the URL defined by the parameters.
const reqUrl = new URL(req.url);
// path.normalize resolves '..' and '.' segments in sequential path segments
// 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).
let reqPath = path.normalize(reqUrl.pathname);
// function requestHandler(
// req: Request,
// callback: (response: Response | Promise<Response>) => void
// ): void {
// // The URL() constructor returns a newly created URL object representing the URL defined by the parameters.
// const reqUrl = new URL(req.url);
// // path.normalize resolves '..' and '.' segments in sequential path segments
// // 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).
// let reqPath = path.normalize(reqUrl.pathname);

// when app opens, serve index-prod.html
if (reqPath === '/') {
reqPath = '/index-prod.html';
}
// path.basename returns the last portion of a path which includes filename we want to serve
const reqFilename = path.basename(reqPath);
// use fs module to read index-prod.html (reqPath) in dist folder
fs.readFile(path.join(DIST_PATH, reqPath), (err, data) => {
const mimeType = mime(reqFilename); // returns the file type
// check if there is no error and file type is valid, pass on the info to the next middleware
if (!err && mimeType !== null) {
next({
mimeType,
charset: charset(mimeType),
data
});
} else {
console.error(err);
}
});
}
export { scheme, requestHandler };
// // when app opens, serve index-prod.html
// if (reqPath === '/') {
// reqPath = '/index-prod.html';
// }
// // path.basename returns the last portion of a path which includes filename we want to serve
// const reqFilename = path.basename(reqPath);
// // use fs module to read index-prod.html (reqPath) in dist folder
// fs.readFile(path.join(DIST_PATH, reqPath), (err, data) => {
// const mimeType = mime(reqFilename); // returns the file type
// // check if there is no error and file type is valid, pass on the info to the next middleware
// if (!err && mimeType !== null) {
// callback({
// mimeType,
// charset: charset(mimeType),
// data
// });
// } else {
// console.error(err);
// }
// });
// }

// export { scheme };
16 changes: 10 additions & 6 deletions app/.electron/render.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@

import {remote} from 'electron';
import {BrowserWindow} from 'electron-window-manager';
// import {remote} from 'electron';
// import {BrowserWindow} from 'electron-window-manager';

const win2 = browserwindow.createNew('win2', 'Windows #2');
win2.setURL('/win2.html');
win2.onReady(() => {...});
win2.open()
// const win2 = BrowserWindow.createNew('win2', 'Windows #2');
// win2.setURL('/win2.html');
// win2.onReady(() => {...});
// win2.open()



Expand All @@ -15,3 +15,7 @@ win2.open()
=windowManager.createNew('win2', 'Windows #2'); win2.setURL('/win2.html');
win2.onReady( ... ); win2.open();
</script>; */


// unnecesary code / file
// win2 is unused nor needed.
6 changes: 3 additions & 3 deletions app/src/components/top/NavBarButtons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import ProjectsFolder from '../right/OpenProjects';
import { RootState } from '../../redux/store';
import SaveProjectButton from '../right/SaveProjectButton';
import serverConfig from '../../serverConfig.js';

import createModal from '../right/createModal';
import createStyles from '@mui/styles/createStyles';
import makeStyles from '@mui/styles/makeStyles';
Expand Down Expand Up @@ -90,7 +89,6 @@ const StyledMenuItem = withStyles((theme) => ({
// where the main function starts //
const navbarDropDown = (props) => {
const dispatch = useDispatch();

const [modal, setModal] = React.useState(null);
const [anchorEl, setAnchorEl] = React.useState(null);
const classes = useStyles();
Expand All @@ -105,6 +103,8 @@ const navbarDropDown = (props) => {
const closeModal = () => setModal('');
const handleClick = (event) => {
setAnchorEl(event.currentTarget);

props.setDropDownMenu(true)
};

const clearWorkspace = () => {
Expand Down Expand Up @@ -188,7 +188,7 @@ const navbarDropDown = (props) => {

return (
<div data-testid="navDropDown" ref={ref} className={showMenu}>
<Link to="/tutorial" style={{ textDecoration: 'none' }} target="_blank">
<Link to="/tutorial" style={{ textDecoration: 'none' }} target="_blank">
<button>
<svg
xmlns="http://www.w3.org/2000/svg"
Expand Down
20 changes: 14 additions & 6 deletions app/src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ import {
Redirect,
Route,
HashRouter as Router,
Switch
Switch,
Link
} from 'react-router-dom';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
Expand All @@ -28,6 +29,7 @@ const client = new ApolloClient({

const isDev = import.meta.env.NODE_ENV === 'development';
import serverConfig from './serverConfig.js';
import { error } from 'console';

const { DEV_PORT, API_BASE_URL } = serverConfig;
let serverURL = API_BASE_URL;
Expand All @@ -47,11 +49,17 @@ const PrivateRoute = ({ component: Component, ...rest }) => {
},
credentials: 'include'
})
.then((res) => res.json())
.then((res) => {
if(!res.ok){
throw new Error('Network Response was not ok')
}
return res.json();
})
.then((data) => {
setIsLoggedIn(data);
})
.catch((err) => console.log(`Error getting project ${err}`));
.catch((err) => {
console.log(`Error getting project ${err}`)});
}, []);

return (
Expand All @@ -63,7 +71,7 @@ const PrivateRoute = ({ component: Component, ...rest }) => {
window.localStorage.getItem('ssid') === 'guest'
) {
return <Component {...props} />;
} else if (isLoggedIn !== null) {
} else if (isLoggedIn === false || isLoggedIn !== null) {
return <Redirect to="/login" />;
}
}}
Expand All @@ -84,9 +92,9 @@ ReactDOM.render(
<PrivateRoute exact path="/" component={App} />
</DndProvider>
<Route exact path="/dashboard" component={ProjectDashboard} />
<Route exact path="/tutorial" component={Tutorial} />
<Route exact path="/tutorialPage/:learn" component={TutorialPage} />
</Switch>
<Route exact path="/tutorial" component={Tutorial} />
<Route exact path="/tutorialPage/:learn" component={TutorialPage} />
</Router>
</Provider>
</ApolloProvider>,
Expand Down
2 changes: 1 addition & 1 deletion app/src/serverConfig.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const serverConfig = {
// : 'http://localhost:8080',
API_BASE_URL2: isProduction
? 'https://app.reactype.dev'
: 'http://localhost:8080'
: 'http://localhost:8080',
};
// module.exports = config;

Expand Down
10 changes: 5 additions & 5 deletions app/src/tutorial/RouteLinks.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react';
import links2 from '../../../resources/route_links_tutorial_images/links2.PNG';
import links3 from '../../../resources/route_links_tutorial_images/links3.PNG';
import links4 from '../../../resources/route_links_tutorial_images/links4.PNG';
import links6 from '../../../resources/route_links_tutorial_images/links6.PNG';
import linksCanvas from '../../../resources/route_links_tutorial_images/links-canvas.PNG';
import links2 from '../../../resources/route_links_tutorial_images/links2.png';
import links3 from '../../../resources/route_links_tutorial_images/links3.png';
import links4 from '../../../resources/route_links_tutorial_images/links4.png';
import links6 from '../../../resources/route_links_tutorial_images/links6.png';
import linksCanvas from '../../../resources/route_links_tutorial_images/links-canvas.png';

const RouteLinks: React.FC<{
classes: any;
Expand Down
Loading

0 comments on commit 0ac829c

Please sign in to comment.