Skip to content

Commit b9b9840

Browse files
chlvbharathchlvbharath
committed
Until Sec_19_ImproveBurgerProject
1 parent 3611018 commit b9b9840

File tree

24 files changed

+495
-85
lines changed

24 files changed

+495
-85
lines changed

‎src/App.js‎

Lines changed: 36 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,55 @@
11
import React, { Component } from 'react';
2-
import { Route, Switch } from 'react-router-dom';
2+
import { Route, Switch, withRouter, Redirect } from 'react-router-dom';
3+
import { connect } from 'react-redux';
34
import './App.css';
45
import Layout from './hoc/Layout/Layout'
56
import BurgerBuilder from './containers/BurgerBuilder/BurgerBuilder'
67
import Checkout from './containers/Checkout/Checkout'
78
import Orders from './containers/Orders/Orders'
9+
import Auth from './containers/Auth/Auth'
10+
import Logout from './containers/Auth/Logout/Logout'
11+
import * as actions from './store/actions/index'
812
class App extends Component {
913

14+
componentDidMount() {
15+
this.props.onTryAutoSignUp();
16+
}
1017
render() {
18+
let routes = (<Switch>
19+
<Route path="/Auth" exact component={Auth} />
20+
<Route path="/" exact component={BurgerBuilder} />
21+
<Redirect to="/" />
22+
</Switch>);
23+
if (this.props.isAuthenticated) {
24+
routes = (<Switch>
25+
<Route path="/Checkout" component={Checkout} />
26+
<Route path="/Orders" component={Orders} />
27+
<Route path="/Auth" exact component={Auth} />
28+
<Route path="/logout" exact component={Logout} />
29+
<Route path="/" exact component={BurgerBuilder} />
30+
<Redirect to="/" />
31+
</Switch>);
32+
}
1133
return (
1234
<div className="App">
1335
<Layout>
14-
<Switch>
15-
<Route path="/Checkout" component={Checkout} />
16-
<Route path="/Orders" component={Orders} />
17-
<Route path="/" exact component={BurgerBuilder} />
18-
</Switch>
36+
{routes}
1937
{/* <BurgerBuilder/> */}
2038
</Layout>
2139
</div>
2240
);
2341
}
2442
}
2543

26-
export default App;
44+
const mapStateToProps = state => {
45+
return {
46+
isAuthenticated: state.auth.token !== null
47+
}
48+
};
49+
const mapDispathToProps = dispatch => {
50+
return {
51+
onTryAutoSignUp: () => dispatch(actions.authCheckState())
52+
};
53+
};
54+
55+
export default withRouter(connect(mapStateToProps, mapDispathToProps)(App));

‎src/components/Burger/BuildControls/BuildControls.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,9 @@ const buildControls = (props) => (
2626
<button
2727
className={classes.OrderButton}
2828
disabled = {!props.purchasable}
29-
onClick = {props.addToCart}
30-
>ORDER</button>
29+
onClick = {props.addToCart}>
30+
{props.isAuth ? 'ORDER' : 'SIGN'}
31+
</button>
3132
</div>
3233
)
3334
export default buildControls;

‎src/components/Navigation/NavigationItems/NavigationItems.js‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,18 @@ import React from 'react'
22
import NavigationItem from './NavigationItem/NavigationItem'
33
import classes from './NavigationItems.module.css'
44

5-
const navigationItems = () => (
6-
<ul className={classes.NavigationItems}>
7-
<NavigationItem link="/" exact>Burger Builder</NavigationItem>
8-
<NavigationItem link="/orders">Orders</NavigationItem>
9-
</ul>
5+
const navigationItems = (props) => (
6+
<ul className={classes.NavigationItems}>
7+
<NavigationItem link="/" exact>Burger Builder</NavigationItem>
8+
9+
{ props.isAuthenticated
10+
? <NavigationItem link="/orders">Orders</NavigationItem>
11+
: null
12+
}
13+
{ props.isAuthenticated
14+
? <NavigationItem link="/logout">Logout</NavigationItem>
15+
: <NavigationItem link="/auth">Authenticate</NavigationItem>
16+
}
17+
</ul>
1018
);
1119
export default navigationItems;

‎src/components/Navigation/SideDrawer/SideDrawer.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,15 @@ const sideDrawer = (props) => {
1212
return (
1313
<Aux>
1414
<Backdrop show={props.open} onClicked={props.closed} />
15-
<div className={attachedClasses.join(' ')}>
15+
<div className={attachedClasses.join(' ')}
16+
onClick={props.closed}>
1617
<div className={classes.Logo}>
1718
<Logo />
1819
</div>
1920
<nav>
20-
<NavigationItems></NavigationItems>
21+
<NavigationItems
22+
isAuthenticated = {props.isAuth}
23+
></NavigationItems>
2124
</nav>
2225
</div>
2326
</Aux>

‎src/components/Navigation/Toolbar/Toolbar.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const toolbar = (props) => (
1010
<Logo />
1111
</div>
1212
<nav className={classes.DesktopOnly}>
13-
<NavigationItems></NavigationItems>
13+
<NavigationItems isAuthenticated = {props.isAuth}></NavigationItems>
1414
</nav>
1515
</header>
1616
)

‎src/components/Order/CheckoutSummary/CheckoutSummary.module.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
margin:auto;
55
}
66

7-
@media(min-width:600px){
7+
/* @media(min-width:600px){
88
.CheckoutSummary{
99
width: 500px;
1010
}
11-
}
11+
} */

‎src/containers/Auth/Auth.js‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
import React, { Component } from 'react'
2+
import { connect } from 'react-redux';
3+
import {Redirect} from 'react-router-dom';
4+
import Input from '../../components/UI/Input/Input'
5+
import Button from '../../components/UI/Button/Button'
6+
import Spinner from '../../components/UI/Spinner/Spinner'
7+
import classes from './Auth.module.css';
8+
import * as actions from '../../store/actions/index';
9+
import {updateObject, checkValidity} from '../../shared/utility';
10+
11+
class Auth extends Component {
12+
state = {
13+
controls: {
14+
email: {
15+
elementType: 'input',
16+
elementConfig: {
17+
type: 'email',
18+
placeholder: 'Email Address'
19+
},
20+
value: '',
21+
validation: {
22+
required: true,
23+
isEmail: true
24+
},
25+
valid: false,
26+
touched: false
27+
},
28+
password: {
29+
elementType: 'input',
30+
elementConfig: {
31+
type: 'password',
32+
placeholder: 'Password'
33+
},
34+
value: '',
35+
validation: {
36+
required: true,
37+
minLength: 6
38+
},
39+
valid: false,
40+
touched: false
41+
}
42+
},
43+
isSignup : true
44+
}
45+
46+
componentDidMount(){
47+
if(!this.props.buildingBurger && this.props.authRedirectPath !== '/'){
48+
this.props.onSetAuthRedirectPath();
49+
}
50+
}
51+
52+
inputchangedHandler = (event, controlName) => {
53+
console.log(event.target.value, controlName);
54+
const updateControls = updateObject(this.state.controls,{
55+
[controlName]: updateObject(this.state.controls[controlName],{
56+
value: event.target.value,
57+
valid: checkValidity(event.target.value, this.state.controls[controlName].validation),
58+
touched: true
59+
})
60+
});
61+
62+
this.setState({ controls: updateControls });
63+
}
64+
submitHandler = (event) => {
65+
event.preventDefault();
66+
this.props.onAuth(this.state.controls.email.value, this.state.controls.password.value, this.state.isSignup);
67+
}
68+
swithAuthModeHandler = ()=> {
69+
this.setState(prevState => {
70+
return{
71+
isSignup: !prevState.isSignup
72+
};
73+
});
74+
}
75+
render() {
76+
const formElementsArray = [];
77+
for (let key in this.state.controls) {
78+
formElementsArray.push({
79+
id: key,
80+
config: this.state.controls[key]
81+
});
82+
}
83+
console.log('rendering the auth again');
84+
let form = formElementsArray.map(formElement => (
85+
<Input
86+
key={formElement.id}
87+
elementType={formElement.config.elementType}
88+
elementConfig={formElement.config.elementConfig}
89+
value={formElement.value}
90+
invalid={!formElement.config.valid}
91+
shouldValidate={formElement.config.validation}
92+
touched={formElement.config.touched}
93+
changed={(event) => this.inputchangedHandler(event, formElement.id)} />
94+
));
95+
96+
if(this.props.loading){
97+
form = <Spinner/>
98+
}
99+
100+
let errorMessage = null;
101+
if (this.props.error) {
102+
errorMessage = (<p>{this.props.error.message}</p>);
103+
}
104+
let authRedirect = null;
105+
if(this.props.isAuthenticated){
106+
authRedirect = <Redirect to={this.props.authRedirectPath}/>
107+
}
108+
109+
return (
110+
<div className={classes.Auth}>
111+
{authRedirect}
112+
{errorMessage}
113+
<form onSubmit={this.submitHandler}>
114+
{form}
115+
<Button btnType="Success">Submit</Button>
116+
</form>
117+
<Button btnType="Danger" clicked={this.swithAuthModeHandler}>SWITCH TO {this.state.isSignup ? "SIGNIN" : "SIGNUP"}</Button>
118+
</div>
119+
);
120+
}
121+
}
122+
123+
const mapStateToProps = state => {
124+
return {
125+
loading: state.auth.loading,
126+
error: state.auth.error,
127+
isAuthenticated: state.auth.token !== null,
128+
buildingBurger: state.burgerBuilder.building,
129+
authRedirectPath: state.auth.authRedirectPath
130+
131+
}
132+
};
133+
const mapDispatchToProps = dispatch => {
134+
return {
135+
onAuth: (email, password, isSignup) => dispatch(actions.auth(email, password, isSignup)),
136+
onSetAuthRedirectPath: ()=> dispatch(actions.setAuthRedirectPath('/'))
137+
}
138+
}
139+
export default connect(mapStateToProps, mapDispatchToProps)(Auth);

‎src/containers/Auth/Auth.module.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.Auth{
2+
margin:20px auto;
3+
width:80%;
4+
text-align: center;
5+
box-shadow: 0 2px 3px #ccc;
6+
border: 1px solid #eee;
7+
padding: 10px;
8+
box-sizing: border-box;
9+
}
10+
11+
.Input{
12+
display: block;
13+
}
14+
15+
@media(min-width:600px){
16+
.Auth{
17+
width: 500px;
18+
}
19+
}

‎src/containers/Auth/Logout/Logout.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React, { Component } from 'react';
2+
import * as actions from '../../../store/actions/index';
3+
import { connect } from 'react-redux';
4+
import { Redirect } from 'react-router-dom';
5+
6+
class Logout extends Component {
7+
componentDidMount() {
8+
this.props.onLogout();
9+
}
10+
render() {
11+
return <Redirect to="/" />
12+
};
13+
}
14+
15+
const mapDispatchToProps = dispatch => {
16+
return {
17+
onLogout: () => dispatch(actions.logout())
18+
}
19+
}
20+
21+
export default connect(null, mapDispatchToProps)(Logout);

‎src/containers/BurgerBuilder/BurgerBuilder.js‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,13 @@ class BurgerBuilder extends Component {
3434
}
3535

3636
purchaseHandler = () => {
37-
this.setState({ purchasing: true })
37+
if(this.props.isAuthenticated){
38+
this.setState({ purchasing: true })
39+
}
40+
else{
41+
this.props.onSetAuthRedirectPath('/Checkout');
42+
this.props.history.push('/Auth');
43+
}
3844
}
3945

4046
purchaseCancelHandler = () => {
@@ -68,6 +74,7 @@ class BurgerBuilder extends Component {
6874
disabledInfo={disabledInfo}
6975
totalPrice={this.props.totalSum}
7076
purchasable={this.updatePurchaseState(this.props.ings)}
77+
isAuth ={this.props.isAuthenticated}
7178
/>
7279
</Aux>
7380
);
@@ -98,15 +105,17 @@ const mapStateToProps = (state) => {
98105
return {
99106
ings: state.burgerBuilder.ingredients,
100107
totalSum : state.burgerBuilder.totalPrice,
101-
error: state.burgerBuilder.error
108+
error: state.burgerBuilder.error,
109+
isAuthenticated: state.auth.token !== null
102110
}
103111
}
104112
const mapDispatchToProps = dispath => {
105113
return {
106114
onIngredientAdded : (ingName) => dispath(actions.addIngredient(ingName)),
107115
onIngredientRemoved : (ingName) => dispath(actions.removeIngredient(ingName)),
108116
onInitIngedients: () => dispath(actions.initIngredients()),
109-
onInitPurchase: () => dispath(actions.purchaseInit())
117+
onInitPurchase: () => dispath(actions.purchaseInit()),
118+
onSetAuthRedirectPath: (path) => dispath(actions.setAuthRedirectPath(path))
110119
}
111120
}
112121
export default connect(mapStateToProps, mapDispatchToProps)( WithErrorHandler(BurgerBuilder, axios))

0 commit comments

Comments
 (0)