diff --git a/application/Dockerfile b/application/Dockerfile index a3c01a52..6f724533 100644 --- 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 index a148c9a0..0f9313c0 100644 --- 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 index dd1ccfd4..db887f8d 100644 --- a/application/public/index.html +++ b/application/public/index.html @@ -1,38 +1,27 @@ - - - - - - - - - React App - - - -
- - + + + + + + + + + React App + + + +
+ + diff --git a/application/public/manifest.json b/application/public/manifest.json index 1f2f141f..952449d9 100644 --- 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 index dff74375..c07555e4 100644 --- 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 ( - - - - ) - } + render() { + return ( + + + + ) + } } export default App; diff --git a/application/src/App.test.js b/application/src/App.test.js index a754b201..ad442dd2 100644 --- 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(, div); - ReactDOM.unmountComponentAtNode(div); + const div = document.createElement('div'); + ReactDOM.render(, div); + ReactDOM.unmountComponentAtNode(div); }); diff --git a/application/src/components/common/template.css b/application/src/components/common/template.css index fe0b4b90..49970fe9 100644 --- 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; } \ No newline at end of file diff --git a/application/src/components/common/template.js b/application/src/components/common/template.js index 02d6e6ed..030d5687 100644 --- 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 ( -
-
- -
-
- ); + return ( +
+
+ + {/* display nav component */} +
+
+ ); } export default Template; \ No newline at end of file diff --git a/application/src/components/dashboard/dashboard.js b/application/src/components/dashboard/dashboard.js index f1cd44bc..9c1f2477 100644 --- 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 ( -
-

Dashboard

-
- ) - } + render() { + console.log('props from the dashboard', this.props); + return ( +
+

Dashboard

+
+ ) + } } export default connect(mapStateToProps, null)(Dashboard); diff --git a/application/src/components/index.js b/application/src/components/index.js index 67b0fece..8d70b610 100644 --- 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 index 73aba471..e99cc9af 100644 --- 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 ( -
-
- - this.onChange('email', e.target.value)}> -
-
- - this.onChange('password', e.target.value)}> -
-
- -
-
- ); - } + 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 +
+
+ + this.onChange('email', e.target.value)}> +
+
+ + this.onChange('password', e.target.value)}> +
+
+ +
+
+ ); + } } export default connect(null, mapActionsToProps)(LoginForm); \ No newline at end of file diff --git a/application/src/components/login/login.js b/application/src/components/login/login.js index 0172c5b6..063ff1f4 100644 --- a/application/src/components/login/login.js +++ b/application/src/components/login/login.js @@ -1,19 +1,18 @@ -import React, { Component } from 'react'; -import LoginForm from './login-form/loginForm'; -import './login.css'; +import React, { Component } from 'react'; +import LoginForm from './login-form/loginForm'; +import './login.css'; class Login extends Component { - - render() { - return ( -
-

Login Screen

-
- {this.props.history.push('/view-orders')}}/> -
-
- ) - } + render() { + return ( +
+

Login Screen

+
+ {this.props.history.push('/view-orders')}}/> +
+
+ ) + } } export default Login; \ No newline at end of file diff --git a/application/src/components/main/main.js b/application/src/components/main/main.js index cadae1cd..f004d720 100644 --- a/application/src/components/main/main.js +++ b/application/src/components/main/main.js @@ -1,25 +1,25 @@ -import React, { Component } from 'react'; -import { connect } from 'react-redux'; -import { Link } from 'react-router-dom'; -import './main.css'; +import React, { Component } from 'react'; +import { connect } from 'react-redux'; +import { Link } from 'react-router-dom'; +import './main.css'; const mapStateToProps = state => ({ - temp: state.temp + temp: state.temp }); class Main extends Component { - render() { - console.log('props', this.props); - return ( -
-

Bruce's Diner Ordering Application

-

Please login to continue

- - - -
- ) - } + render() { + console.log('props from main.js', this.props); + return ( +
+

Bruce's Diner Ordering Application

+

Please login to continue

+ + + +
+ ) + } } export default connect(mapStateToProps, null)(Main); diff --git a/application/src/components/nav/nav.js b/application/src/components/nav/nav.js index 51c5992d..fd73e50e 100644 --- a/application/src/components/nav/nav.js +++ b/application/src/components/nav/nav.js @@ -1,16 +1,19 @@ -import React from "react"; -import { Link } from "react-router-dom"; -import "./nav.css"; +import React from "react"; +import { Link } from "react-router-dom"; +import "./nav.css"; const Nav = (props) => { return (
- +
- +
diff --git a/application/src/components/order-form/orderForm.js b/application/src/components/order-form/orderForm.js index 29258203..4694b7ee 100644 --- a/application/src/components/order-form/orderForm.js +++ b/application/src/components/order-form/orderForm.js @@ -1,10 +1,10 @@ -import React, { Component } from 'react'; -import { Template } from '../../components'; -import { connect } from 'react-redux'; -import { SERVER_IP } from '../../private'; -import './orderForm.css'; +import React, { Component } from 'react'; +import { Template } from '../../components'; +import { connect } from 'react-redux'; +import { SERVER_IP } from '../../private'; +import './orderForm.css'; -const ADD_ORDER_URL = `${SERVER_IP}/api/add-order` +const ADD_ORDER_URL = `${SERVER_IP}/api/add-order`; const mapStateToProps = (state) => ({ auth: state.auth, @@ -19,31 +19,35 @@ class OrderForm extends Component { } } + // set the item the user selected in the menu and property should be order_item not item menuItemChosen(event) { - this.setState({ item: event.target.value }); + this.setState({ order_item: event.target.value }); } + // set the quantity the user selected in the menu menuQuantityChosen(event) { this.setState({ quantity: event.target.value }); } + // when the user clicks on submit button this function will post there order submitOrder(event) { event.preventDefault(); - if (this.state.order_item === "") return; - fetch(ADD_ORDER_URL, { - method: 'POST', - body: JSON.stringify({ - order_item: this.state.order_item, - quantity: this.state.quantity, - ordered_by: this.props.auth.email || 'Unknown!', - }), - headers: { - 'Content-Type': 'application/json' - } - }) - .then(res => res.json()) - .then(response => console.log("Success", JSON.stringify(response))) - .catch(error => console.error(error)); + console.log(this.state.order_item); + if (this.state.order_item === "") return; + fetch(ADD_ORDER_URL, { + method: 'POST', + body: JSON.stringify({ + order_item: this.state.order_item, + quantity: this.state.quantity, + ordered_by: this.props.auth.email || 'Unknown!' + }), + headers: { + 'Content-Type': 'application/json' + } + }) + .then(res => res.json()) + .then(response => console.log("Success", JSON.stringify(response))) + .catch(error => console.error(error)); } render() { @@ -51,19 +55,20 @@ class OrderForm extends Component { diff --git a/application/src/components/view-orders/viewOrders.js b/application/src/components/view-orders/viewOrders.js index 86e67113..f61756d6 100644 --- a/application/src/components/view-orders/viewOrders.js +++ b/application/src/components/view-orders/viewOrders.js @@ -1,13 +1,14 @@ -import React, { Component } from 'react'; -import { Template } from '../../components'; -import { SERVER_IP } from '../../private'; -import './viewOrders.css'; +import React, { Component } from 'react'; +import { Template } from '../../components'; +import { SERVER_IP } from '../../private'; +import './viewOrders.css'; class ViewOrders extends Component { state = { orders: [] } + // componentDidMount() { fetch(`${SERVER_IP}/api/current-orders`) .then(response => response.json()) @@ -24,7 +25,7 @@ class ViewOrders extends Component { return (