josecabrerajr7 · josecabrerajr7 · Jun 25, 2021 · Jun 25, 2021 · Jun 25, 2021 · Jun 25, 2021
diff --git a/application/Dockerfile b/application/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:11
+FROM node:latest
 
 WORKDIR /home/node/application
 

diff --git a/application/package.json b/application/package.json
@@ -3,14 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "axios": "^0.19.0",
-    "bootstrap": "^4.3.1",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-redux": "^7.1.0",
-    "react-router-dom": "^5.0.1",
-    "react-scripts": "3.0.1",
-    "redux": "^4.0.1",
+    "axios": "^0.21.1",
+    "bootstrap": "^5.0.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-redux": "^7.2.4",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "4.0.3",
+    "redux": "^4.1.0",
     "redux-thunk": "^2.3.0"
   },
   "scripts": {

diff --git a/application/public/index.html b/application/public/index.html
@@ -1,38 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
+	<head>
+		<meta charset="utf-8" />
+		<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="theme-color" content="#000000" />
+		<!-- manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/-->
+		<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+		<!-- Notice the use of %PUBLIC_URL% in the tags above. It will be replaced with the URL of the `public` folder during the build.
+			 Only files inside the `public` folder can be referenced from the HTML.
+			 Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+			 work correctly both with client-side routing and a non-root public URL.
+			 Learn how to configure a non-root public URL by running `npm run build`. -->
+			<title>React App</title>
+	</head>
+	<body>
+		<noscript>You need to enable JavaScript to run this app.</noscript>
+		<div id="root"></div>
+		<!-- This HTML file is a template. If you open it directly in the browser, you will see an empty page. 
+			 You can add webfonts, meta tags, or analytics to this file.
+			 The build step will place the bundled scripts into the <body> tag.
+
+			 To begin the development, run `npm start` or `yarn start`.
+			 To create a production bundle, use `npm run build` or `yarn build`. -->
+	</body>
 </html>
diff --git a/application/public/manifest.json b/application/public/manifest.json
@@ -1,15 +1,15 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+	"short_name": "React App",
+	"name": "Create React App Sample",
+	"icons": [
+		{
+			"src": "favicon.ico",
+			"sizes": "64x64 32x32 24x24 16x16",
+			"type": "image/x-icon"
+		}
+	],
+	"start_url": ".",
+	"display": "standalone",
+	"theme_color": "#000000",
+	"background_color": "#ffffff"
 }
diff --git a/application/src/App.js b/application/src/App.js
@@ -1,17 +1,17 @@
-import React, { Component } from 'react';
-import { Provider } from 'react-redux';
-import AppRouter from './router/appRouter';
-import store from './redux/store';
-import './App.css';
+import React, { Component }         from 'react';
+import { Provider }                 from 'react-redux';
+import AppRouter                    from './router/appRouter';
+import store                        from './redux/store';
+import                              './App.css';
 
 class App extends Component {
-  render() {
-    return (
-      <Provider store={store}>
-        <AppRouter />
-      </Provider>
-    )
-  }
+    render() {
+        return (
+            <Provider store={store}>
+                <AppRouter />
+            </Provider>
+        )
+    }
 }
 
 export default App;
diff --git a/application/src/App.test.js b/application/src/App.test.js
@@ -1,9 +1,9 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
+import React            from 'react';
+import ReactDOM         from 'react-dom';
+import App              from './App';
 
 it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
+    const div = document.createElement('div');
+    ReactDOM.render(<App />, div);
+    ReactDOM.unmountComponentAtNode(div);
 });
diff --git a/application/src/components/common/template.css b/application/src/components/common/template.css
@@ -1,24 +1,24 @@
 .bg-layer {
-    background: #7A5114;
-    min-height: 100vh;
-    width: 100%;
+	background: #7A5114;
+	min-height: 100vh;
+	width: 100%;
 }
 
 .fg-layer {
-    background: #ECEAEA;
-    min-height: 100vh;
-    margin-left: 20%;
-    margin-right: 20%;
+	background: #ECEAEA;
+	min-height: 100vh;
+	margin-left: 20%;
+	margin-right: 20%;
 }
 
 .logo {
-    display: block;
-    font-family: "Optima";
-    font-size: 4em;
-    padding-left: 20%;
-    padding-right: 20%;
-    padding-top: 5%;
-    text-align: center;
-    text-decoration: underline;
-    text-decoration-color: #A43F3F;
+	display: block;
+	font-family: "Optima";
+	font-size: 4em;
+	padding-left: 20%;
+	padding-right: 20%;
+	padding-top: 5%;
+	text-align: center;
+	text-decoration: underline;
+	text-decoration-color: #A43F3F;
 }
diff --git a/application/src/components/common/template.js b/application/src/components/common/template.js
@@ -1,17 +1,18 @@
-import React from 'react';
-import { Nav } from '../../components';
-import './template.css';
+import React        from 'react';
+import { Nav }      from '../../components';
+import              './template.css';
 
 const Template = props => {
-    return (
-        <div className="bg-layer">
-            <div className="fg-layer">
-                <label className="logo">Bruce's Diner</label>
-                <Nav />
-                {props.children}
-            </div>
-        </div>
-    );
+	return (
+		<div className="bg-layer">
+			<div className="fg-layer">
+				<label className="logo">Bruce's Diner</label>
+				{/* display nav component */}
+				<Nav />
+				{ props.children }
+			</div>
+		</div>
+	);
 }
 
 export default Template;
diff --git a/application/src/components/dashboard/dashboard.js b/application/src/components/dashboard/dashboard.js
@@ -1,21 +1,20 @@
 import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
-import './Dasboard.css';
+import { connect } 			from 'react-redux';
+import 						'./Dasboard.css';
 
 const mapStateToProps = state => ({
-  temp: state.temp
+	temp: state.temp
 });
 
 class Dashboard extends Component {
-  render() {
-    console.log('props', this.props);
-    return (
-      <div className="main-body">
-        <h1>Dashboard</h1>
-      </div>
-    )
-  }
+	render() {
+		console.log('props from the dashboard', this.props);
+		return (
+			<div className="main-body">
+				<h1>Dashboard</h1>
+			</div>
+		)
+	}
 }
 
 export default connect(mapStateToProps, null)(Dashboard);
diff --git a/application/src/components/index.js b/application/src/components/index.js
@@ -1,8 +1,8 @@
-import Login from './login/login';
-import Main from './main/main';
-import Nav from './nav/nav';
-import OrderForm from './order-form/orderForm';
-import Template from './common/template';
-import ViewOrders from './view-orders/viewOrders';
+import Login            from './login/login';
+import Main             from './main/main';
+import Nav              from './nav/nav';
+import OrderForm        from './order-form/orderForm';
+import Template         from './common/template';
+import ViewOrders       from './view-orders/viewOrders';
 
 export { Login, OrderForm, Main, Nav, Template, ViewOrders };
diff --git a/application/src/components/login/login-form/loginForm.js b/application/src/components/login/login-form/loginForm.js
@@ -1,46 +1,56 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux'; 
-import { loginUser } from '../../../redux/actions/authActions'
+import React, { Component }       	from 'react';
+import { connect }                	from 'react-redux'; 
+import { loginUser }            	from '../../../redux/actions/authActions'
 
 const mapActionsToProps = dispatch => ({
-  commenceLogin(email, password) {
-    dispatch(loginUser(email, password))
-  }
+	commenceLogin(email, password) {
+		dispatch(loginUser(email, password))
+	}
 })
 
 class LoginForm extends Component {
-  state = {
-    email: "",
-    password: "",
-  }
+	state = {
+		email: "",
+		password: "",
+	}
 
-  login(e) {
-    e.preventDefault();
-    this.props.commenceLogin(this.state.email, this.state.password);
-    this.props.onLogin();
-  }
+	login(e) {
+		e.preventDefault();
+		this.props.commenceLogin(this.state.email, this.state.password);
+		this.props.onLogin();
+	}
 
-  onChange(key, val) {
-    this.setState({ [key]: val });
-  }
+	onChange(key, val) {
+		this.setState({ [key]: val });
+	}
 
-  render() {
-    return (
-      <form>
-        <div className="form-group">
-          <label htmlFor="inputEmail">Email</label>
-          <input type="text" className="form-control"  placeholder="[email protected]" value={this.state.email} onChange={e => this.onChange('email', e.target.value)}></input>
-        </div>
-        <div className="form-group">
-          <label htmlFor="inputPassword">Password</label>
-          <input type="password" className="form-control" id="inputPassword" value={this.state.password} onChange={e => this.onChange('password', e.target.value)}></input>
-        </div>
-        <div className="d-flex justify-content-center">
-            <button onClick={e => this.login(e)} type="submit" className="btn btn-primary">Login</button>
-        </div>
-      </form>
-    );
-  }
+	render() {
+		return (
+			// need form validation form email and password to let user know if they typed in a correct email or if there account exist in the database
+			<form>
+				<div className="form-group">
+					<label htmlFor="inputEmail">Email</label>
+					<input type="text" 
+						   className="form-control"  
+						   placeholder="[email protected]" 
+						   value={this.state.email} 
+						   onChange={e => this.onChange('email', e.target.value)}></input>
+				</div>
+				<div className="form-group">
+					<label htmlFor="inputPassword">Password</label>
+					<input type="password" 
+						   className="form-control" 
+						   id="inputPassword" 
+						   value={this.state.password} 
+						   onChange={e => this.onChange('password', e.target.value)}></input>
+				</div>
+				<div className="d-flex justify-content-center">
+					<button onClick={e => this.login(e)} 
+							type="submit" className="btn btn-primary">Login</button>
+				</div>
+			</form>
+		);
+	}
 }
 
 export default connect(null, mapActionsToProps)(LoginForm);