jcj-29-update-dependencies

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.0",
+    "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": {

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 };

application/src/components/login/login-form/loginForm.js

@@ -1,46 +1,62 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux'; 
-import { loginUser } from '../../../redux/actions/authActions'
+import React		 		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: "",
-  }
-
-  login(e) {
-    e.preventDefault();
-    this.props.commenceLogin(this.state.email, this.state.password);
-    this.props.onLogin();
-  }
-
-  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="test@test.com" 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>
-    );
-  }
+class LoginForm extends React.Component {
+
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			email: "",
+			password: "",
+		}
+	}
+
+
+	login(e) {
+		e.preventDefault();
+		this.props.commenceLogin(this.state.email, this.state.password);
+		this.props.onLogin();
+	}
+
+	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="test@test.com" 
+						 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);

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 (
-      <div className="main-body">
-        <h1 className="text-center">Login Screen</h1>
-        <div className="d-flex justify-content-center mt-5">
-          <LoginForm onLogin={() => {this.props.history.push('/view-orders')}}/>
-        </div>
-      </div>
-    )
-  }
+	render() {
+		return (
+		<div className="main-body">
+			<h1 className="text-center">Login Screen</h1>
+			<div className="d-flex justify-content-center mt-5">
+				<LoginForm onLogin={() => {this.props.history.push('/view-orders')}} />
+			</div>
+		</div>
+		)
+	}
 }
 
 export default Login;

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 { 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 (
-      <div className="main-body">
-        <h1>Bruce's Diner Ordering Application</h1>
-        <h2>Please login to continue</h2>
-        <Link to={'/login'}>
-          <button className="btn btn-primary">Go To Login</button>
-        </Link>
-      </div>
-    )
-  }
+	render() {
+	console.log('props', this.props);
+		return (
+			<div className="main-body">
+				<h1>Bruce's Diner Ordering Application</h1>
+				<h2>Please login to continue</h2>
+				<Link to={'/login'}>
+					<button className="btn btn-primary">Go To Login</button>
+				</Link>
+			</div>
+		)
+	}
 }
 
 export default connect(mapStateToProps, null)(Main);

application/src/components/order-form/orderForm.js

@@ -1,83 +1,84 @@
-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 mapStateToProps = (state) => ({
-    auth: state.auth,
+	auth: state.auth,
 })
 
 class OrderForm extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            order_item: "",
-            quantity: "1"
-        }
-    }
+	constructor(props) {
+		super(props);
+		this.state = {
+			order_item: "",
+			quantity: "1"
+		}
+	}
 
-    menuItemChosen(event) {
-        this.setState({ item: event.target.value });
-    }
+	menuItemChosen(event) {
+		this.setState({ order_item: event.target.value });
+	}
 
-    menuQuantityChosen(event) {
-        this.setState({ quantity: event.target.value });
-    }
+	menuQuantityChosen(event) {
+		this.setState({ quantity: event.target.value });
+	}
 
-    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));
-    }
+	submitOrder(event) {
+		event.preventDefault();
+		console.log(this.state);
+
+		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() {
-        return (
-            <Template>
-                <div className="form-wrapper">
-                    <form>
-                        <label className="form-label">I'd like to order...</label><br />
-                        <select 
-                            value={this.state.order_item} 
-                            onChange={(event) => this.menuItemChosen(event)}
-                            className="menu-select"
-                        >
-                            <option value="" defaultValue disabled hidden>Lunch menu</option>
-                            <option value="Soup of the Day">Soup of the Day</option>
-                            <option value="Linguini With White Wine Sauce">Linguini With White Wine Sauce</option>
-                            <option value="Eggplant and Mushroom Panini">Eggplant and Mushroom Panini</option>
-                            <option value="Chili Con Carne">Chili Con Carne</option>
-                        </select><br />
-                        <label className="qty-label">Qty:</label>
-                        <select value={this.state.quantity} onChange={(event) => this.menuQuantityChosen(event)}>
-                            <option value="1">1</option>
-                            <option value="2">2</option>
-                            <option value="3">3</option>
-                            <option value="4">4</option>
-                            <option value="5">5</option>
-                            <option value="6">6</option>
-                        </select>
-                        <button type="button" className="order-btn" onClick={(event) => this.submitOrder(event)}>Order It!</button>
-                    </form>
-                </div>
-            </Template>
-        );
-    }
+	render() {
+		return (
+			<Template>
+				<div className="form-wrapper">
+					<form>
+						<label className="form-label">I'd like to order...</label><br />
+						<select value={this.state.order_item} onChange={(event) => this.menuItemChosen(event)} className="menu-select">
+							<option value="" defaultValue disabled hidden>Lunch menu</option>
+							<option value="Soup of the Day">Soup of the Day</option>
+							<option value="Linguini With White Wine Sauce">Linguini With White Wine Sauce</option>
+							<option value="Eggplant and Mushroom Panini">Eggplant and Mushroom Panini</option>
+							<option value="Chili Con Carne">Chili Con Carne</option>
+						</select>
+						<br />
+						<label className="qty-label">Qty:</label>
+						<select value={this.state.quantity} onChange={(event) => this.menuQuantityChosen(event)}>
+							<option value="1">1</option>
+							<option value="2">2</option>
+							<option value="3">3</option>
+							<option value="4">4</option>
+							<option value="5">5</option>
+							<option value="6">6</option>
+						</select>
+						<button type="button" 
+							  className="order-btn" 
+							  onClick={(event) => this.submitOrder(event)}>Order It!</button>
+					</form>
+				</div>
+			</Template>
+		);
+	}
 }
 
 export default connect(mapStateToProps, null)(OrderForm);

application/src/redux/actions/authActions.js

@@ -1,13 +1,13 @@
-import { LOGIN, LOGOUT } from './types';
-import { SERVER_IP } from '../../private'
+import { LOGIN, LOGOUT }       	from './types';
+import { SERVER_IP }			from '../../private';
 
 const finishLogin = (email, token) => {
     return {
-        type: LOGIN,
-        payload: {
-            email,
-            token,
-        }
+        	type: LOGIN,
+        	payload: {
+			email,
+			token,
+		}
     }
 }