Skip to content

Commit 4cd98ee

Browse files
samdevlopssamdevlops
committed
Assignment 4
1 parent e6288fd commit 4cd98ee

File tree

9 files changed

+162
-32
lines changed

9 files changed

+162
-32
lines changed

‎src/components/AboutUsComponent.js

Lines changed: 34 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,48 @@
11
import React from 'react';
22
import { Breadcrumb, BreadcrumbItem, Card, CardBody, CardHeader, Media } from 'reactstrap';
33
import { Link } from 'react-router-dom';
4+
import { baseUrl } from '../shared/baseUrl';
5+
import { FadeTransform, Fade, Stagger } from 'react-animation-components';
6+
import { Loading } from './LoadingComponent';
47

58
//Task 3 Here Details of Each leader is shown through a Media Tag
6-
function RenderLeader({leader}) {
7-
return(
8-
<div key={leader.id} className="col-12 mt-5">
9-
<Media tag="li">
10-
<Media left middle>
11-
<Media object src={leader.image} alt={leader.name}></Media>
12-
</Media>
13-
<Media body className="ml-5">
14-
<h3>{leader.name}</h3>
15-
<p>{leader.designation}</p>
16-
<p>{leader.description}</p>
9+
10+
function RenderLeader({leader, isLoading, errMess }) {
11+
if(isLoading){
12+
return(
13+
<Loading />
14+
);
15+
}
16+
else if(errMess){
17+
return(
18+
<h4>{errMess}</h4>
19+
);
20+
}
21+
else{
22+
return(
23+
<Stagger in>
24+
<div key={leader.id} className="col-12 mt-5">
25+
<Media tag="li">
26+
<Media left middle>
27+
<Media object src={baseUrl + leader.image} alt={leader.name} ></Media>
28+
</Media>
29+
<Media body className="ml-5">
30+
<h3>{leader.name}</h3>
31+
<p>{leader.designation}</p>
32+
<p>{leader.description}</p>
33+
</Media>
1734
</Media>
18-
</Media>
19-
</div>
20-
)
35+
</div>
36+
</Stagger>
37+
)
38+
}
2139
}
2240

2341
function About(props) {
24-
2542
//Task 2 , Here leaders is calling Render Leader Component and passing leader as props``````````
26-
const leaders = props.leaders.map((leader) => {
43+
const leaders = props.leaders.leaders.map((leader) => {
2744
return (
28-
<RenderLeader leader={leader}/>
45+
<RenderLeader leader={leader} isLoading={props.leadersLoading} errMess={props.leadersErrMess}/>
2946
);
3047
});
3148

‎src/components/ContactComponent.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ class Contact extends Component {
1919

2020
handleSubmit(values) {
2121
console.log(" Current State is :" +JSON.stringify(values));
22+
this.props.postFeedback(values.firstname, values.lastname, values.telnum, values.email, values.message);
2223
alert(" Current State is :" +JSON.stringify(values));
2324
this.props.resetFeedbackForm();
2425
}

‎src/components/DishdetailComponent.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import React, {Component} from 'react';
2-
import { Card, CardImg, CardImgOverlay, CardText, CardBody, CardTitle, Breadcrumb, BreadcrumbItem, Button, Modal, ModalHeader, ModalBody, Label, Input, Form, FormGroup, Col, Row } from 'reactstrap';
2+
import { Card, CardImg, CardImgOverlay, CardText, CardBody, CardTitle,
3+
Breadcrumb, BreadcrumbItem, Button, Modal, ModalHeader, ModalBody,
4+
Label, Input, Form, FormGroup, Col, Row }
5+
from 'reactstrap';
36
import { Link } from 'react-router-dom';
47
import { Control, LocalForm, Errors } from 'react-redux-form';
58
import { Loading } from './LoadingComponent';

‎src/components/FooterComponent.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,11 @@ function Footer(props) {
2929
</div>
3030
<div className="col-12 col-sm-4 align-self-center">
3131
<div className="text-center">
32-
<a className="btn btn-social-icon btn-google" href="http://google.com/+"><i className="fa fa-google-plus"></i></a>
33-
<a className="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i className="fa fa-facebook"></i></a>
34-
<a className="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i className="fa fa-linkedin"></i></a>
35-
<a className="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i className="fa fa-twitter"></i></a>
36-
<a className="btn btn-social-icon btn-google" href="http://youtube.com/"><i className="fa fa-youtube"></i></a>
32+
<a className="btn btn-social-icon btn-google" href="http://google.com/+"><i className="fa fa-google-plus"></i> </a>
33+
<a className="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i className="fa fa-facebook"></i> </a>
34+
<a className="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i className="fa fa-linkedin"></i> </a>
35+
<a className="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i className="fa fa-twitter"></i> </a>
36+
<a className="btn btn-social-icon btn-google" href="http://youtube.com/"><i className="fa fa-youtube"></i> </a>
3737
<a className="btn btn-social-icon" href="mailto:"><i className="fa fa-envelope-o"></i></a>
3838
</div>
3939
</div>

‎src/components/HomeComponent.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ function Home(props) {
5151
<RenderCard item={props.promotion} isLoading={props.promosLoading} errMess={props.promosErrMess} />
5252
</div>
5353
<div className="col-12 col-md m-1">
54-
<RenderCard item={props.leader} />
54+
<RenderCard item={props.leader} isLoading={props.leadersLoading} errMess={props.leadersErrMess}/>
5555
</div>
5656
</div>
5757
</div>

‎src/components/MainComponent.js

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import Header from './HeaderComponent';
88
import Footer from './FooterComponent';
99
import { Switch, Route, Redirect, withRouter } from 'react-router-dom';
1010
import { connect } from 'react-redux';
11-
import { postComment, fetchDishes, fetchComments, fetchPromos } from '../redux/ActionCreators';
11+
import { postComment, fetchDishes, fetchComments, fetchPromos, fetchLeaders,postFeedback } from '../redux/ActionCreators';
1212
import { actions } from 'react-redux-form';
1313
import { TransitionGroup, CSSTransition } from 'react-transition-group';
1414

@@ -25,7 +25,9 @@ const mapDispatchToProps = (dispatch) => ({
2525
fetchDishes: () => {dispatch(fetchDishes())},
2626
resetFeedbackForm: () =>{dispatch(actions.reset('feedback'))},
2727
fetchComments: () => dispatch(fetchComments()),
28-
fetchPromos: () => dispatch(fetchPromos())
28+
fetchPromos: () => dispatch(fetchPromos()),
29+
fetchLeaders: () => {dispatch(fetchLeaders())},
30+
postFeedback: (firstname, lastname, telnum, email, message) => dispatch(postFeedback(firstname, lastname, telnum, email, message))
2931
});
3032

3133
class Main extends Component {
@@ -37,6 +39,7 @@ class Main extends Component {
3739
this.props.fetchDishes();
3840
this.props.fetchComments();
3941
this.props.fetchPromos();
42+
this.props.fetchLeaders();
4043
}
4144

4245
render() {
@@ -50,7 +53,9 @@ class Main extends Component {
5053
promotion={this.props.promotions.promotions.filter((promo) => promo.featured)[0]}
5154
promoLoading={this.props.promotions.isLoading}
5255
promoErrMess={this.props.promotions.errMess}
53-
leader={this.props.leaders.filter((leader) => leader.featured)[0]}
56+
leader={this.props.leaders.leaders.filter((leader) => leader.featured)[0]}
57+
leadersLoading={this.props.leaders.isLoading}
58+
leadersErrMess={this.props.leaders.errMess}
5459
/>
5560
);
5661
}
@@ -72,10 +77,10 @@ class Main extends Component {
7277
<CSSTransition key={this.props.location.key} classNames="page" timeout={300}>
7378
<Switch location={this.props.location}>
7479
<Route path='/home' component={HomePage} />
75-
<Route exact path='/aboutus' component={() => <About leaders={this.props.leaders} />} />} />
80+
<Route exact path='/aboutus' component={() => <About leaders={this.props.leaders} />} />
7681
<Route exact path='/menu' component={() => <Menu dishes={this.props.dishes} />} />
7782
<Route path='/menu/:dishId' component={DishWithId} />
78-
<Route exact path='/contactus' component={() => <Contact resetFeedbackForm={this.props.resetFeedbackForm} />} />
83+
<Route exact path='/contactus' component={() => <Contact postFeedback={this.props.postFeedback} resetFeedbackForm={this.props.resetFeedbackForm} />} />
7984
<Redirect to="/home" />
8085
</Switch>
8186
</CSSTransition>

‎src/redux/ActionCreators.js

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,3 +151,80 @@ export const addPromos = (promos) => ({
151151
type: ActionTypes.ADD_PROMOS,
152152
payload: promos
153153
});
154+
155+
export const fetchLeaders = () => (dispatch) => {
156+
157+
dispatch(leadersLoading(true));
158+
159+
return fetch(baseUrl + 'leaders')
160+
.then(response => {
161+
if(response.ok){
162+
return response;
163+
}
164+
else{
165+
var error = new Error('Error ' + response.status + ':' + response.statusText);
166+
error.response = response;
167+
throw error;
168+
}
169+
},
170+
error => {
171+
var errmess = new Error(error.message);
172+
throw errmess;
173+
})
174+
.then(response => response.json())
175+
.then(leaders => dispatch(addLeaders(leaders)))
176+
.catch(error => dispatch(leadersFailed(error.message)));
177+
}
178+
179+
export const leadersLoading = () => ({
180+
type: ActionTypes.LEADERS_LOADING
181+
});
182+
183+
export const leadersFailed = (errmess) => ({
184+
type: ActionTypes.LEADERS_FAILED,
185+
payload: errmess
186+
});
187+
188+
export const addLeaders = (leaders) => ({
189+
type: ActionTypes.ADD_LEADERS,
190+
payload: leaders
191+
});
192+
193+
194+
export const postFeedback =(firstname, lastname, telnum, email, message) => (dispatch) => {
195+
196+
const postFeedback = {
197+
firstname: firstname,
198+
lastname: lastname,
199+
telnum: telnum,
200+
email: email,
201+
message: message
202+
}
203+
204+
return fetch(baseUrl + 'feedback', {
205+
method: 'POST',
206+
body: JSON.stringify(postFeedback),
207+
headers:{
208+
'Content-Type':'application/json'
209+
},
210+
credentials: 'same-origin'
211+
})
212+
.then(response => {
213+
if(response.ok){
214+
return response;
215+
}
216+
else{
217+
var error = new Error('Error ' + response.status + ':' + response.statusText);
218+
error.response = response;
219+
throw error;
220+
}
221+
},
222+
error => {
223+
var errmess = new Error(error.message);
224+
throw errmess;
225+
})
226+
.then(response => response.json())
227+
.then(response => dispatch(postFeedback(response)))
228+
.catch(error => { console.log('Post Feedback', error.message);
229+
alert('Your feedback could not be posted\nError: '+error.message); });
230+
}

‎src/redux/ActionTypes.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@ export const DISHES_LOADING = 'DISHES_LOADING';
22
export const DISHES_FAILED = 'DISHES_FAILED';
33
export const ADD_DISHES = 'ADD_DISHES';
44

5+
export const LEADERS_LOADING = 'LEADERS_LOADING';
6+
export const LEADERS_FAILED = 'LEADERS_FAILED';
7+
export const ADD_LEADERS = 'ADD_LEADERS';
8+
59
export const ADD_COMMENT = 'ADD_COMMENT';
610
export const ADD_COMMENTS = 'ADD_COMMENTS';
711
export const COMMENTS_FAILED = 'COMMENTS_FAILED';

‎src/redux/leaders.js

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,32 @@
1-
import { LEADERS } from '../shared/leaders';
1+
//import { LEADERS } from '../shared/leaders';
22

3-
export const Leaders = (state = LEADERS, action) => {
3+
/*export const Leaders = (state = LEADERS, action) => {
44
55
switch(action.type){
66
default:
77
return state;
88
}
9-
}
9+
}
10+
*/
11+
12+
import * as ActionTypes from './ActionTypes';
13+
14+
export const Leaders = (state = { isLoading: true,
15+
errMess: null,
16+
leaders:[]}
17+
, action) =>
18+
{
19+
switch (action.type) {
20+
case ActionTypes.ADD_LEADERS:
21+
return {...state, isLoading: false, errMess: null, leaders: action.payload};
22+
23+
case ActionTypes.LEADERS_LOADING:
24+
return {...state, isLoading: true, errMess: null, leaders: []}
25+
26+
case ActionTypes.LEADERS_FAILED:
27+
return {...state, isLoading: false, errMess: action.payload};
28+
29+
default:
30+
return state;
31+
}
32+
};

0 commit comments

Comments
 (0)