#21 feature(log-out): route guarding and login redirect

application/src/components/nav/nav.js

@@ -3,25 +3,25 @@ import { Link } from "react-router-dom";
 import "./nav.css";
 
 const Nav = (props) => {
-    return (
-        <div className="nav-strip">
-            <Link to={"/order"} className="nav-link">
-                <div className="nav-link-style">
-                    <label className="nav-label">Order Form</label>
-                </div>
-            </Link>
-            <Link to={"/view-orders"} className="nav-link" id="middle-link">
-                <div className="nav-link-style">
-                    <label className="nav-label">View Orders</label>
-                </div>
-            </Link>
-            <Link to={"/login"} className="nav-link">
-                <div className="nav-link-style">
-                    <label className="nav-label">Log Out</label>
-                </div>
-            </Link>
-        </div>
-    );
-}
+	return (
+		<div className="nav-strip">
+			<Link to={"/order"} className="nav-link">
+				<div className="nav-link-style">
+					<label className="nav-label">Order Form</label>
+				</div>
+			</Link>
+			<Link to={"/view-orders"} className="nav-link" id="middle-link">
+				<div className="nav-link-style">
+					<label className="nav-label">View Orders</label>
+				</div>
+			</Link>
+			<Link to={"/"} className="nav-link">
+				<div className="nav-link-style">
+					<label className="nav-label">Log Out</label>
+				</div>
+			</Link>
+		</div>
+	);
+};
 
-export default Nav;
+export default Nav;

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

@@ -1,83 +1,100 @@
-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,
-})
+	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();
+		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);
+export default connect(mapStateToProps, null)(OrderForm);

application/src/redux/reducers/authReducer.js

@@ -1,14 +1,18 @@
-import { LOGIN, LOGOUT } from '../actions/types'
+import { LOGIN, LOGOUT } from "../actions/types";
 
 const INITIAL_STATE = { email: null, token: null };
 
 export default (state = INITIAL_STATE, action) => {
-    switch (action.type) {
-        case LOGIN:
-            return { ...state, email: action.payload.login, token: action.payload.token }
-        case LOGOUT:
-            return { ...state, ...INITIAL_STATE }
-        default:
-            return state;
-    }
-}
+	switch (action.type) {
+		case LOGIN:
+			return {
+				...state,
+				email: action.payload.login,
+				token: action.payload.token,
+			};
+		case LOGOUT:
+			return {};
+		default:
+			return state;
+	}
+};

application/src/router/GuardedRouter.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { connect } from "react-redux";
+import { Route, Redirect } from "react-router-dom";
+
+const GuardedRouter = ({ token, component: Component, ...rest }) => {
+	return (
+		<Route
+			{...rest}
+			render={(props) =>
+				token ? (
+					<Component {...props} />
+				) : (
+					<Redirect
+						to={{ pathname: "/login", state: { from: props.location } }}
+					/>
+				)
+			}
+		/>
+	);
+};
+
+const mapStateToProps = ({ auth }) => ({
+	token: auth.token,
+});
+
+export default connect(mapStateToProps, null)(GuardedRouter);

application/src/router/appRouter.js

@@ -1,16 +1,27 @@
-import React from 'react';
-import { BrowserRouter as Router, Route } from 'react-router-dom';
-import { Main, Login, OrderForm, ViewOrders } from '../components';
+import React from "react";
+import { connect } from "react-redux";
+import { BrowserRouter as Router, Route } from "react-router-dom";
+import { Main, Login, OrderForm, ViewOrders } from "../components";
+import GuardedRouter from "./GuardedRouter";
 
-const AppRouter = (props) => {
-  return (
-    <Router>
-      <Route path="/" exact component={Main} />
-      <Route path="/login" exact component={Login} />
-      <Route path="/order" exact component={OrderForm} />
-      <Route path="/view-orders" exact component={ViewOrders} />
-    </Router>
-  );
-}
+const AppRouter = ({ token }) => {
+	return (
+		<Router>
+			<Route path="/" exact component={Main} />
+			<Route path="/login" exact component={Login} />
+			<GuardedRouter token={token} path="/order" exact component={OrderForm} />
+			<GuardedRouter
+				token={token}
+				path="/view-orders"
+				exact
+				component={ViewOrders}
+			/>
+		</Router>
+	);
+};
 
-export default AppRouter;
+const mapStateToProps = ({ auth }) => ({
+	token: auth.token,
+});
+
+export default connect(mapStateToProps, null)(AppRouter);