Skip to content

Commit b6d6cf7

Browse files
khuongdn16khuongdn16
committed
Added Route for Dashboard
1 parent be2afe0 commit b6d6cf7

File tree

11 files changed

+151
-8
lines changed

11 files changed

+151
-8
lines changed

‎app/electron/main.js

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ const {
1313
ipcMain,
1414
} = require('electron');
1515

16+
// ELECTRON WINDOW MANAGER
17+
const windowManager = require('electron-window-manager');
18+
19+
1620
// The splash screen is what appears while the app is loading
1721
const { initSplashScreen, OfficeTemplate } = require('electron-splashscreen');
1822
const { resolve } = require('app-root-path');
@@ -55,8 +59,10 @@ async function createWindow() {
5559
// Create the browser window.
5660
win = new BrowserWindow({
5761
// full screen
58-
width: 1920,
59-
height: 1080,
62+
// width: 1920,
63+
// height: 1080,
64+
width: 1024,
65+
height: 576,
6066
minWidth: 980,
6167
// window title
6268
title: 'ReacType',
@@ -194,6 +200,17 @@ protocol.registerSchemesAsPrivileged([
194200
// Some APIs can only be used after this event occurs.
195201
app.on('ready', createWindow);
196202

203+
// TRYING ELECTRON-WINDOW-MANAGER When the application is ready
204+
205+
// app.on('ready', () => {
206+
// windowManager.setDefaultSetup({'width': 800, 'height': 450, 'position': 'right'});
207+
// // Open Dashboard window
208+
// const dashboard = windowManager.open('home', 'Welcome ...', 'http://localhost:5000/home.html');
209+
// dashboard.toggleDevTools(false);
210+
// // Load ReacType window
211+
// createWindow();
212+
// });
213+
197214
// Quit when all windows are closed.
198215
app.on('window-all-closed', () => {
199216
app.quit();

‎app/src/Dashboard/Form.jsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
2+
import React from 'react';
3+
4+
5+
const Form = (props) => {
6+
return (<div className = 'form'>
7+
<h3>Form 1 </h3>
8+
<p>Blah</p>
9+
<p>Blah</p>
10+
<p>Blah</p>
11+
12+
</div>);
13+
}
14+
15+
export default Form;

‎app/src/Dashboard/FormsContainer.jsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React, { useContext } from 'react';
2+
import { Link } from "react-router-dom";
3+
4+
import Form from './Form.jsx';
5+
6+
7+
const FormsContainer = () => {
8+
return (
9+
<div>
10+
<Link to="/">
11+
<button type="button">Go Back</button>
12+
</Link>
13+
<Form/>
14+
</div>
15+
);
16+
};
17+
18+
export default FormsContainer;

‎app/src/Dashboard/home.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
<h1>Dashboard</h1>
11+
<div id = "root">
12+
</div>
13+
<script type="text/javascript" src="home.js"></script>
14+
</body>
15+
</html>

‎app/src/Dashboard/home.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// import React from 'react';
2+
import { render } from 'react-dom';
3+
import Form from './Form.jsx';
4+
5+
// uncomment so that webpack can bundle styles
6+
// import styles from './styles.scss';
7+
8+
render(
9+
<div> Some </div>,
10+
document.getElementById('root')
11+
);

‎app/src/Dashboard/styles.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/* @import url('https://fonts.googleapis.com/css2?family=Cabin&family=Oswald&display=swap');
2+
3+
4+
$primary-black: #22292f;
5+
$secondary-black: #606f7b;
6+
$teriary-grey: #f0f0f0;
7+
$light-grey: #bfcbd4;
8+
$light-blue: #759cc9;
9+
$button-blue: #24BCFF; */
10+
11+
.form {
12+
display: flex;
13+
flex-direction: column;
14+
background-color: white;
15+
border: 1px solid #f0f0f0;
16+
box-shadow: 0 0 5px rgba(0,0,0,0.3);
17+
margin: 5px;
18+
border-radius: 5px;
19+
color: #606f7b;
20+
align-items: center;
21+
height: 300px;
22+
justify-content: min;
23+
width: 250px;
24+
}
25+

‎app/src/components/top/NavBar.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,14 @@ import createModal from '../right/createModal';
2828
import StateContext from '../../context/context';
2929
import logo from '../../public/icons/win/logo.png';
3030

31+
32+
33+
// ROUTING TO DASHBOARD
34+
import { Link } from "react-router-dom";
35+
36+
37+
38+
3139
// NavBar text and button styling
3240
const useStyles = makeStyles((theme: Theme) =>
3341
createStyles({
@@ -158,6 +166,21 @@ export default function NavBar(props) {
158166
<Typography variant="h6" style={{marginLeft: '1rem'}} className={classes.title}>
159167
ReacType
160168
</Typography>
169+
170+
{/* ==================================Dashboard Button================================================== */}
171+
<Link to='/dashboard'>
172+
<Button
173+
variant="contained"
174+
color="primary"
175+
style={{minWidth: '137.69px'}}
176+
className="navbarButton"
177+
id="navbarButton1"
178+
>
179+
Dashboard
180+
</Button>
181+
</Link>
182+
{/* ==================================Dashboard Button================================================== */}
183+
161184
<Button
162185
variant="contained"
163186
color="primary"

‎app/src/index.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,18 @@ import FBPassWord from './components/login/FBPassWord.tsx';
99
import Tutorial from './tutorial/Tutorial.tsx';
1010
import TutorialPage from './tutorial/TutorialPage.tsx';
1111

12+
/*
13+
* Dashboard
14+
*/
15+
import Dashboard from './Dashboard/FormsContainer.jsx';
16+
import styles from './Dashboard/styles.css';
17+
18+
1219
import {
1320
HashRouter as Router,
1421
Route,
1522
Redirect,
16-
Switch
23+
Switch,
1724
} from 'react-router-dom';
1825

1926
const PrivateRoute = ({ component: Component, ...rest }) => (
@@ -36,6 +43,7 @@ ReactDOM.render(
3643
<Route exact path="/signup" component={SignUp} />
3744
<Route exact path="/password" component={FBPassWord} />
3845
<PrivateRoute exact path="/" component={App} />
46+
<Route exact path="/dashboard" component={Dashboard} />
3947
<Route exact path="/tutorial" component={Tutorial} />
4048
<Route exact path="/tutorialPage/:learn" component={TutorialPage} />
4149
</Switch>

‎package.json

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,15 +38,16 @@
3838
"dev": "concurrently --success first \"cross-env NODE_ENV=development webpack-dev-server --config ./webpack.development.js\" \"cross-env NODE_ENV=development electron .\" \"nodemon server/server.js\" ",
3939
"p": "concurrently --success first \"npm run dev-server\" \"cross-env NODE_ENV=production electron .\" \"nodemon server/server.js\" -k",
4040
"prod-build": "cross-env NODE_ENV=production npx webpack --mode=production --config ./webpack.production.js",
41-
"prod": "npm run prod-build && electron . --no-sandbox",
41+
"prod": "npm run prod-build && electron . --no-sandbox",
4242
"pack": "electron-builder --dir",
4343
"dist": "npm run prod-build && electron-builder",
4444
"dist-mac": "npm run prod-build && electron-builder --mac",
4545
"dist-linux": "npm run prod-build && electron-builder --linux",
4646
"dist-windows": "npm run prod-build && electron-builder --windows",
4747
"dist-all": "npm run prod-build && electron-builder --mac --linux --windows",
4848
"test": "cross-env NODE_ENV=test jest --verbose",
49-
"server": "nodemon server/server.js"
49+
"server": "nodemon server/server.js",
50+
"electron": "cross-env NODE_ENV=development electron ."
5051
},
5152
"repository": {
5253
"type": "git",
@@ -122,6 +123,7 @@
122123
"electron-debug": "^3.1.0",
123124
"electron-devtools-installer": "^2.2.4",
124125
"electron-splashscreen": "^1.0.0",
126+
"electron-window-manager": "^1.0.6",
125127
"enzyme": "^3.4.1",
126128
"enzyme-adapter-react-16": "^1.2.0",
127129
"express-graphql": "^0.12.0",
@@ -197,7 +199,7 @@
197199
"ts-node": "^8.10.2",
198200
"typescript": "^3.9.6",
199201
"url-loader": "^4.1.0",
200-
"webpack": "^4.42.0",
202+
"webpack": "^4.46.0",
201203
"webpack-cli": "^3.3.11",
202204
"webpack-dev-server": "^3.11.0",
203205
"webpack-merge": "^4.2.2"

‎server/server.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
const express = require('express');
22
const cookieParser = require('cookie-parser');
3+
34
const cors = require('cors');
45
const { Book, TitleOutlined } = require('@material-ui/icons');
56
const userController = require('./controllers/userController');
@@ -71,6 +72,13 @@ const server = new ApolloServer({ typeDefs, resolvers });
7172
server.applyMiddleware({ app });
7273
/** ****************************************************************** */
7374

75+
// const path = require('path');
76+
// // Serve Static Assets
77+
// app.use(express.static(path.resolve(__dirname, './assets')));
78+
/* ******************************************************************* */
79+
80+
81+
7482
app.post(
7583
'/signup',
7684
userController.createUser,

‎webpack.config.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ module.exports = {
66
// since JS can be written for both server / browser, the "target" specifies what environment webpack should write for
77
target: 'web', // Our app can run without electron
88
// The entry is where webpack begins assembling the dependency tree
9-
entry: ['./app/src/index.js'], // The entry point of our app; these entry points can be named and we can also have multiple if we'd like to split the webpack bundle into smaller files to improve script loading speed between multiple pages of our app
10-
// the output is only created on npm run-prod-build
9+
entry: ['./app/src/index.js'],
1110
output: {
1211
path: path.resolve(__dirname, 'app/dist'), // Where all the output files get dropped after webpack is done with them
1312
filename: 'bundle.js' // The name of the webpack bundle that's generated
@@ -78,6 +77,8 @@ module.exports = {
7877
extensions: ['.css']
7978
}
8079
},
80+
81+
8182
// loads common image formats
8283
// resolves import/require on a file into a url and emits the file into the output directory
8384
// url loader converts file into base 64 encoded string that can be passed inline into the file rather than be imported from a seperate file

0 commit comments

Comments
 (0)