Skip to content

Commit 287b1ce

Browse files
fluturecodefluturecode
authored
Merge pull request #4 from fluturecode/eae-21-feature-route-guarding
#21 feature(log-out): route guarding and login redirect
2 parents 086d52b + 4d75895 commit 287b1ce

File tree

5 files changed

+175
-117
lines changed

5 files changed

+175
-117
lines changed

‎application/src/components/nav/nav.js

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,25 @@ import { Link } from "react-router-dom";
33
import "./nav.css";
44

55
const Nav = (props) => {
6-
return (
7-
<div className="nav-strip">
8-
<Link to={"/order"} className="nav-link">
9-
<div className="nav-link-style">
10-
<label className="nav-label">Order Form</label>
11-
</div>
12-
</Link>
13-
<Link to={"/view-orders"} className="nav-link" id="middle-link">
14-
<div className="nav-link-style">
15-
<label className="nav-label">View Orders</label>
16-
</div>
17-
</Link>
18-
<Link to={"/login"} className="nav-link">
19-
<div className="nav-link-style">
20-
<label className="nav-label">Log Out</label>
21-
</div>
22-
</Link>
23-
</div>
24-
);
25-
}
6+
return (
7+
<div className="nav-strip">
8+
<Link to={"/order"} className="nav-link">
9+
<div className="nav-link-style">
10+
<label className="nav-label">Order Form</label>
11+
</div>
12+
</Link>
13+
<Link to={"/view-orders"} className="nav-link" id="middle-link">
14+
<div className="nav-link-style">
15+
<label className="nav-label">View Orders</label>
16+
</div>
17+
</Link>
18+
<Link to={"/"} className="nav-link">
19+
<div className="nav-link-style">
20+
<label className="nav-label">Log Out</label>
21+
</div>
22+
</Link>
23+
</div>
24+
);
25+
};
2626

27-
export default Nav;
27+
export default Nav;

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

Lines changed: 89 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,100 @@
1-
import React, { Component } from 'react';
2-
import { Template } from '../../components';
3-
import { connect } from 'react-redux';
4-
import { SERVER_IP } from '../../private';
5-
import './orderForm.css';
1+
import React, { Component } from "react";
2+
import { Template } from "../../components";
3+
import { connect } from "react-redux";
4+
import { SERVER_IP } from "../../private";
5+
import "./orderForm.css";
66

7-
const ADD_ORDER_URL = `${SERVER_IP}/api/add-order`
7+
const ADD_ORDER_URL = `${SERVER_IP}/api/add-order`;
88

99
const mapStateToProps = (state) => ({
10-
auth: state.auth,
11-
})
10+
auth: state.auth,
11+
});
1212

1313
class OrderForm extends Component {
14-
constructor(props) {
15-
super(props);
16-
this.state = {
17-
order_item: "",
18-
quantity: "1"
19-
}
20-
}
14+
constructor(props) {
15+
super(props);
16+
this.state = {
17+
order_item: "",
18+
quantity: "1",
19+
};
20+
}
2121

22-
menuItemChosen(event) {
23-
this.setState({ item: event.target.value });
24-
}
22+
menuItemChosen(event) {
23+
this.setState({ order_item: event.target.value });
24+
}
2525

26-
menuQuantityChosen(event) {
27-
this.setState({ quantity: event.target.value });
28-
}
26+
menuQuantityChosen(event) {
27+
this.setState({ quantity: event.target.value });
28+
}
2929

30-
submitOrder(event) {
31-
event.preventDefault();
32-
if (this.state.order_item === "") return;
33-
fetch(ADD_ORDER_URL, {
34-
method: 'POST',
35-
body: JSON.stringify({
36-
order_item: this.state.order_item,
37-
quantity: this.state.quantity,
38-
ordered_by: this.props.auth.email || 'Unknown!',
39-
}),
40-
headers: {
41-
'Content-Type': 'application/json'
42-
}
43-
})
44-
.then(res => res.json())
45-
.then(response => console.log("Success", JSON.stringify(response)))
46-
.catch(error => console.error(error));
47-
}
30+
submitOrder(event) {
31+
event.preventDefault();
32+
if (this.state.order_item === "") return;
33+
fetch(ADD_ORDER_URL, {
34+
method: "POST",
35+
body: JSON.stringify({
36+
order_item: this.state.order_item,
37+
quantity: this.state.quantity,
38+
ordered_by: this.props.auth.email || "Unknown!",
39+
}),
40+
headers: {
41+
"Content-Type": "application/json",
42+
},
43+
})
44+
.then((res) => res.json())
45+
.then((response) => console.log("Success", JSON.stringify(response)))
46+
.catch((error) => console.error(error));
47+
}
4848

49-
render() {
50-
return (
51-
<Template>
52-
<div className="form-wrapper">
53-
<form>
54-
<label className="form-label">I'd like to order...</label><br />
55-
<select
56-
value={this.state.order_item}
57-
onChange={(event) => this.menuItemChosen(event)}
58-
className="menu-select"
59-
>
60-
<option value="" defaultValue disabled hidden>Lunch menu</option>
61-
<option value="Soup of the Day">Soup of the Day</option>
62-
<option value="Linguini With White Wine Sauce">Linguini With White Wine Sauce</option>
63-
<option value="Eggplant and Mushroom Panini">Eggplant and Mushroom Panini</option>
64-
<option value="Chili Con Carne">Chili Con Carne</option>
65-
</select><br />
66-
<label className="qty-label">Qty:</label>
67-
<select value={this.state.quantity} onChange={(event) => this.menuQuantityChosen(event)}>
68-
<option value="1">1</option>
69-
<option value="2">2</option>
70-
<option value="3">3</option>
71-
<option value="4">4</option>
72-
<option value="5">5</option>
73-
<option value="6">6</option>
74-
</select>
75-
<button type="button" className="order-btn" onClick={(event) => this.submitOrder(event)}>Order It!</button>
76-
</form>
77-
</div>
78-
</Template>
79-
);
80-
}
49+
render() {
50+
return (
51+
<Template>
52+
<div className="form-wrapper">
53+
<form>
54+
<label className="form-label">I'd like to order...</label>
55+
<br />
56+
<select
57+
value={this.state.order_item}
58+
onChange={(event) => this.menuItemChosen(event)}
59+
className="menu-select"
60+
>
61+
<option value="" defaultValue disabled hidden>
62+
Lunch menu
63+
</option>
64+
<option value="Soup of the Day">Soup of the Day</option>
65+
<option value="Linguini With White Wine Sauce">
66+
Linguini With White Wine Sauce
67+
</option>
68+
<option value="Eggplant and Mushroom Panini">
69+
Eggplant and Mushroom Panini
70+
</option>
71+
<option value="Chili Con Carne">Chili Con Carne</option>
72+
</select>
73+
<br />
74+
<label className="qty-label">Qty:</label>
75+
<select
76+
value={this.state.quantity}
77+
onChange={(event) => this.menuQuantityChosen(event)}
78+
>
79+
<option value="1">1</option>
80+
<option value="2">2</option>
81+
<option value="3">3</option>
82+
<option value="4">4</option>
83+
<option value="5">5</option>
84+
<option value="6">6</option>
85+
</select>
86+
<button
87+
type="button"
88+
className="order-btn"
89+
onClick={(event) => this.submitOrder(event)}
90+
>
91+
Order It!
92+
</button>
93+
</form>
94+
</div>
95+
</Template>
96+
);
97+
}
8198
}
8299

83-
export default connect(mapStateToProps, null)(OrderForm);
100+
export default connect(mapStateToProps, null)(OrderForm);

‎application/src/redux/reducers/authReducer.js

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
1-
import { LOGIN, LOGOUT } from '../actions/types'
1+
import { LOGIN, LOGOUT } from "../actions/types";
22

33
const INITIAL_STATE = { email: null, token: null };
44

55
export default (state = INITIAL_STATE, action) => {
6-
switch (action.type) {
7-
case LOGIN:
8-
return { ...state, email: action.payload.login, token: action.payload.token }
9-
case LOGOUT:
10-
return { ...state, ...INITIAL_STATE }
11-
default:
12-
return state;
13-
}
14-
}
6+
switch (action.type) {
7+
case LOGIN:
8+
return {
9+
...state,
10+
email: action.payload.login,
11+
token: action.payload.token,
12+
};
13+
case LOGOUT:
14+
return {};
15+
default:
16+
return state;
17+
}
18+
};

‎application/src/router/GuardedRouter.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from "react";
2+
import { connect } from "react-redux";
3+
import { Route, Redirect } from "react-router-dom";
4+
5+
const GuardedRouter = ({ token, component: Component, ...rest }) => {
6+
return (
7+
<Route
8+
{...rest}
9+
render={(props) =>
10+
token ? (
11+
<Component {...props} />
12+
) : (
13+
<Redirect
14+
to={{ pathname: "/login", state: { from: props.location } }}
15+
/>
16+
)
17+
}
18+
/>
19+
);
20+
};
21+
22+
const mapStateToProps = ({ auth }) => ({
23+
token: auth.token,
24+
});
25+
26+
export default connect(mapStateToProps, null)(GuardedRouter);

‎application/src/router/appRouter.js

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,27 @@
1-
import React from 'react';
2-
import { BrowserRouter as Router, Route } from 'react-router-dom';
3-
import { Main, Login, OrderForm, ViewOrders } from '../components';
1+
import React from "react";
2+
import { connect } from "react-redux";
3+
import { BrowserRouter as Router, Route } from "react-router-dom";
4+
import { Main, Login, OrderForm, ViewOrders } from "../components";
5+
import GuardedRouter from "./GuardedRouter";
46

5-
const AppRouter = (props) => {
6-
return (
7-
<Router>
8-
<Route path="/" exact component={Main} />
9-
<Route path="/login" exact component={Login} />
10-
<Route path="/order" exact component={OrderForm} />
11-
<Route path="/view-orders" exact component={ViewOrders} />
12-
</Router>
13-
);
14-
}
7+
const AppRouter = ({ token }) => {
8+
return (
9+
<Router>
10+
<Route path="/" exact component={Main} />
11+
<Route path="/login" exact component={Login} />
12+
<GuardedRouter token={token} path="/order" exact component={OrderForm} />
13+
<GuardedRouter
14+
token={token}
15+
path="/view-orders"
16+
exact
17+
component={ViewOrders}
18+
/>
19+
</Router>
20+
);
21+
};
1522

16-
export default AppRouter;
23+
const mapStateToProps = ({ auth }) => ({
24+
token: auth.token,
25+
});
26+
27+
export default connect(mapStateToProps, null)(AppRouter);

0 commit comments

Comments
 (0)