Skip to content

Commit 347531b

Browse files
f4js3ilf4js3il
committed
burgerBuilder refactoring
1 parent e682861 commit 347531b

File tree

16 files changed

+131
-96
lines changed

16 files changed

+131
-96
lines changed

‎src/App.js‎

Lines changed: 43 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,69 @@
11
import React, { Component } from 'react';
22
import Layout from './Hoc/Layout/Layout';
33
import BurgerBuilder from './Containers/BurgerBuilder/BurgerBuilder';
4-
import CheckOut from './Containers/CheckOut/CheckOut'
5-
import {Route, Switch} from 'react-router-dom';
6-
import Orders from './Containers/Orders/Orders';
7-
import Auth from './Containers/Auth/Auth';
4+
import {Route, Switch, Redirect} from 'react-router-dom';
85
import LogOut from './Containers/Auth/LogOut/LogOut';
96
import { connect } from 'react-redux';
107
import * as actions from './store/actions/index';
8+
import asyncComponent from './Hoc/asyncComponent/asyncComponent';
119

1210

11+
const asyncCheckout = asyncComponent(()=>{
12+
return import ('./Containers/CheckOut/CheckOut');
13+
});
14+
15+
const asyncOrders = asyncComponent(()=>{
16+
return import ('./Containers/Orders/Orders');
17+
});
18+
19+
const asyncAuth = asyncComponent(()=>{
20+
return import ('./Containers/Auth/Auth');
21+
});
22+
1323
class App extends Component {
1424
componentDidMount(){
1525
this.props.onTryAutoSignup();
1626
}
1727
render() {
28+
29+
let routes =(
30+
<Switch>
31+
<Route path="/" exact component={BurgerBuilder}></Route>
32+
<Route path="/auth" component={asyncAuth}/>
33+
<Redirect to="/" />
34+
</Switch>
35+
);
36+
37+
if(this.props.isAuthenticated){
38+
routes = (
39+
<Switch>
40+
<Route path="/" exact component={BurgerBuilder}></Route>
41+
<Route path="/auth" component={asyncAuth}/>
42+
<Route path="/checkout" component={asyncCheckout}></Route>
43+
<Route path="/orders" component={asyncOrders}/>
44+
<Route path="/logOut" component={LogOut}/>
45+
<Redirect to="/" />
46+
</Switch>
47+
)
48+
49+
}
1850
return (
1951
<div>
2052
<Layout>
21-
<Switch>
22-
<Route path="/" exact component={BurgerBuilder}></Route>
23-
<Route path="/checkout" component={CheckOut}></Route>
24-
<Route path="/orders" component={Orders}/>
25-
<Route path="/auth" component={Auth}/>
26-
<Route path="/logOut" component={LogOut}/>
27-
<Route component={BurgerBuilder}></Route>
28-
</Switch>
53+
{routes}
2954
</Layout>
3055
</div>
3156
);
3257
}
3358
}
34-
59+
const mapStateToProps =(state) =>{
60+
return{
61+
isAuthenticated: state.auth.token!=null
62+
}
63+
}
3564
const mapDispatchToProps = (dispatch) =>{
3665
return{
3766
onTryAutoSignup : ()=> dispatch(actions.authCheckState())
3867
}
3968
}
40-
export default connect(null, mapDispatchToProps)(App);
69+
export default connect(mapStateToProps, mapDispatchToProps)(App);

‎src/Components/CheckOutSummary/CheckOutSummary.css‎

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

7-
@media(min-width:600px){
8-
.CheckOutSummary{
9-
width: 500px;
10-
}
11-
}

‎src/Components/Navigation/SideDrawer/SideDrawer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const sideDrawer = (props)=>{
1414
return(
1515
<Aux>
1616
<BackDrop purchaseCancel={props.closed} show={props.open}/>
17-
<div className={attachedClasses.join(' ')}>
17+
<div className={attachedClasses.join(' ')} onClick={props.closed}>
1818
<div className={classes.Logo}>
1919
<Logo />
2020
</div>

‎src/Containers/Auth/Auth.js‎

Lines changed: 9 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import * as actions from '../../store/actions/index';
66
import {connect} from 'react-redux';
77
import Spinner from '../../Components/UI/Spinner/Spinner';
88
import { Redirect } from 'react-router-dom';
9+
import { updateObject, checkValidity } from "../../shared/utility";
910

1011
class Auth extends Component {
1112
state = {
@@ -50,36 +51,16 @@ class Auth extends Component {
5051
}
5152

5253
inputChangedHandler = (event, inputIdentifier) => {
53-
const updatedControls = {
54-
...this.state.controls,
55-
[inputIdentifier]:{ ...this.state.controls[inputIdentifier],
56-
value: event.target.value,
57-
valid: this.checkValidity(event.target.value,this.state.controls[inputIdentifier].validation),
58-
touched: true
59-
},
60-
};
54+
const updatedControls =updateObject(this.state.controls,{
55+
[inputIdentifier]:updateObject(this.state.controls[inputIdentifier] ,{
56+
value: event.target.value,
57+
valid: checkValidity(event.target.value,this.state.controls[inputIdentifier].validation),
58+
touched: true
59+
})
60+
})
6161
this.setState({controls: updatedControls});
6262
}
6363

64-
checkValidity(value, rules) {
65-
let isValid = true;
66-
67-
if (rules.required) {
68-
isValid = value !== "" && isValid;
69-
}
70-
if (rules.minLength) {
71-
isValid = value.length >= rules.minLength && isValid;
72-
}
73-
if (rules.maxLength) {
74-
isValid = value.length <= rules.maxLength && isValid;
75-
}
76-
if(rules.isEmail){
77-
const pattern = /[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
78-
isValid = pattern.test(value) && isValid;
79-
}
80-
return isValid;
81-
}
82-
8364
submitHandler =(event) =>{
8465
event.preventDefault();
8566
this.props.onAuth(this.state.controls.email.value, this.state.controls.password.value, this.state.isSignUp);
@@ -130,7 +111,7 @@ class Auth extends Component {
130111
<Button btnType="Success">{this.state.isSignUp? 'SignUp' :'SignIn'}</Button>
131112
</form>
132113
<Button clicked = {this.switchAuthModeHandler}
133-
btnType="Danger">Swith to {this.state.isSignUp? 'SignIn' :'SignUp'}</Button>
114+
btnType="Danger">Switch to {this.state.isSignUp? 'SignIn' :'SignUp'}</Button>
134115
</div>
135116
);
136117
}

‎src/Containers/BurgerBuilder/BurgerBuilder.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ class BurgerBuilder extends Component{
2121
}
2222

2323
componentDidMount(){
24-
console.log("props in BurgerBuiler are", this.props);
2524
this.props.onInitIngredients();
2625
}
2726

‎src/Containers/CheckOut/CheckOut.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ class CheckOut extends Component {
3030
/>
3131
</div>)
3232
}
33-
console.log("props in checkOut are", this.props);
3433
return summary;
3534
}
3635
}

‎src/Containers/CheckOut/ContactData/ContactData.js‎

Lines changed: 18 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {connect} from 'react-redux';
88
import withErrorHandler from '../../../Hoc/WithErrorHandler/WithErrorHandler';
99
import axios from '../../../axios-orders';
1010
import * as actions from '../../../store/actions/index';
11+
import {updateObject, checkValidity } from '../../../shared/utility';
1112

1213
class ContactData extends Component {
1314
state = {
@@ -105,46 +106,32 @@ class ContactData extends Component {
105106
ingredients: this.props.ings,
106107
price: this.props.price,
107108
customer: customer,
109+
userId: this.props.userId
108110
};
109111
this.props.onOrderBurger(order,this.props.token);
110112
};
111113
inputChangedHandler = (event, inputIdentifier) => {
112-
const updatedOrderForm = { ...this.state.orderForm };
113-
const updatedFormElement = { ...updatedOrderForm[inputIdentifier] };
114-
updatedFormElement.value = event.target.value;
115-
updatedFormElement.valid = this.checkValidity(
116-
updatedFormElement.value,
117-
updatedFormElement.validation
118-
);
119-
updatedFormElement.touched = true;
120-
updatedOrderForm[inputIdentifier] = updatedFormElement;
114+
115+
const updatedFormElement= updateObject(this.state.orderForm[inputIdentifier],{
116+
value: event.target.value,
117+
valid: checkValidity(
118+
event.target.value,
119+
this.state.orderForm[inputIdentifier].validation),
120+
touched: true
121+
}
122+
)
123+
124+
const updatedOrderForm = updateObject(this.state.orderForm,{
125+
[inputIdentifier] : updatedFormElement
126+
})
127+
121128
let isFormValid = true;
122129
for(let orderFormElement in updatedOrderForm ){
123130
isFormValid = updatedOrderForm[orderFormElement].valid && isFormValid
124131
}
125-
console.log('form is valid',isFormValid);
126132
this.setState({ orderForm: updatedOrderForm, isFormValid: isFormValid });
127133
};
128134

129-
checkValidity(value, rules) {
130-
let isValid = true;
131-
132-
if (rules.required) {
133-
isValid = value !== "" && isValid;
134-
}
135-
if (rules.minLength) {
136-
isValid = value.length >= rules.minLength && isValid;
137-
}
138-
if (rules.maxLength) {
139-
isValid = value.length <= rules.maxLength && isValid;
140-
}
141-
if(rules.isEmail){
142-
const pattern = /[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
143-
isValid = pattern.test(value) && isValid;
144-
}
145-
return isValid;
146-
}
147-
148135
render() {
149136
const formElementsArray = [];
150137
for (let key in this.state.orderForm) {
@@ -189,7 +176,8 @@ return{
189176
ings : state.burgerBuilder.ingredients,
190177
price : state.burgerBuilder.price,
191178
loading: state.order.loading,
192-
token: state.auth.token
179+
token: state.auth.token,
180+
userId: state.auth.userId
193181
}
194182
}
195183

‎src/Containers/Orders/Orders.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ class Orders extends Component{
1010

1111

1212
componentDidMount(){
13-
this.props.onFetchOrders(this.props.token);
13+
this.props.onFetchOrders(this.props.token,this.props.userId);
1414
}
1515

1616
render(){
@@ -38,7 +38,7 @@ const mapStateToProps= (state)=>{
3838

3939
const mapDispatchToProps = dispatch=>{
4040
return{
41-
onFetchOrders: (token)=>dispatch(actions.fetchOrders(token))
41+
onFetchOrders: (token,userId)=>dispatch(actions.fetchOrders(token,userId))
4242
}
4343
}
4444
export default connect(mapStateToProps,mapDispatchToProps)(WithErrorHandler(Orders, axios));

‎src/Hoc/asyncComponent/asyncComponent.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React, { Component } from 'react';
2+
3+
const asyncComponent = (importComponent) => {
4+
return class extends Component {
5+
state = {
6+
component: null
7+
}
8+
9+
componentDidMount () {
10+
importComponent()
11+
.then(cmp => {
12+
this.setState({component: cmp.default});
13+
});
14+
}
15+
16+
render () {
17+
const C = this.state.component;
18+
19+
return C ? <C {...this.props} /> : null;
20+
}
21+
}
22+
}
23+
24+
export default asyncComponent;

‎src/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import orderReducer from './store/reducers/order';
1111
import authReducer from './store/reducers/auth';
1212
import thunk from 'redux-thunk';
1313

14-
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
14+
const composeEnhancers = process.env.NODE_ENV==='development'? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : null | compose;
1515
const rootReducer = combineReducers({
1616
burgerBuilder: burgerBuilderReducer,
1717
order: orderReducer,

0 commit comments

Comments
 (0)