Skip to content

Commit 9a9caba

Browse files
sunzid02sunzid02
committed
assignment 4 temp
1 parent 58666de commit 9a9caba

File tree

7 files changed

+231
-36
lines changed

7 files changed

+231
-36
lines changed

‎confusion/src/components/AboutComponent.js‎

Lines changed: 48 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,57 @@
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";
7+
8+
49

510
function RenderLeader({ leader }) {
6-
return(
7-
<div key={leader.id} className="col-12 mt-5">
8-
<Media tag="li">
9-
<Media left middle>
10-
<Media object src={leader.image} alt={leader.name} />
11-
</Media>
12-
<Media body className="ml-5">
13-
<Media heading>{leader.name}</Media>
14-
<p>{leader.description}</p>
15-
</Media>
11+
return (
12+
<Media className="mt-5">
13+
<Media left className="mr-5">
14+
<Media object src={baseUrl + leader.image} alt={leader.name} />
1615
</Media>
17-
</div>
16+
<Media body>
17+
<Media heading>{leader.name}</Media>
18+
<p>{leader.designation}</p>
19+
{leader.description}
20+
</Media>
21+
</Media>
1822
);
1923
}
2024

25+
function RenderContent({ leaders, isLoading, errMess }) {
26+
if (isLoading) {
27+
return <Loading />;
28+
} else if (errMess) {
29+
return <h4>{errMess}</h4>;
30+
} else
31+
return (
32+
<Stagger in>
33+
{leaders.map(leader => (
34+
<Fade in key={leader.id}>
35+
<RenderLeader key={leader.id} leader={leader} />
36+
</Fade>
37+
))}
38+
</Stagger>
39+
);
40+
}
41+
2142

2243
function About(props) {
2344

24-
const leaders = props.leaders.map((leader) => {
25-
return (
26-
<RenderLeader leader={leader} />
27-
);
28-
});
45+
// const leaders = props.leaders.map((leader) => {
46+
// return (
47+
// <RenderLeader
48+
// leader={leader}
49+
// isLoading={props.leaderLoading}
50+
// errMess={props.leaderErrMess}
51+
52+
// />
53+
// );
54+
// });
2955

3056
return (
3157
<div className="container">
@@ -87,8 +113,12 @@ function About(props) {
87113
<div className="col-12">
88114
<div className="row">
89115
<Media list>
90-
{leaders}
91-
</Media>
116+
<RenderContent
117+
leaders={props.leaders}
118+
isLoading={props.leaderLoading}
119+
errMess={props.leaderErrMess}
120+
/>
121+
</Media>
92122
</div>
93123
</div>
94124
</div>

‎confusion/src/components/ContactComponent.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Breadcrumb, BreadcrumbItem, Button,
33
Label, Col, Row } from 'reactstrap';
44
import { Link } from 'react-router-dom';
55

6-
import { Control, Form, Errors, actions } from 'react-redux-form';
6+
import { Control, LocalForm, Form, Errors, actions } from 'react-redux-form';
77

88

99
//// validators
@@ -24,11 +24,14 @@ class Contact extends Component{
2424
}
2525

2626
handleSubmit(values){
27-
console.log("Current State is: " + JSON.stringify( values ) );
28-
alert("Current State is: " + JSON.stringify( values ) );
27+
// console.log("Current State is: " + JSON.stringify( values ) );
28+
// alert("Current State is: " + JSON.stringify( values ) );
2929

30+
31+
this.props.postFeedback( values.firstname, values.lastname, values.telnum, values.email, values.agree, values.contactType, values.message );
3032
this.props.resetFeedbackForm();
3133

34+
3235

3336
}
3437

@@ -86,7 +89,7 @@ class Contact extends Component{
8689
</div>
8790

8891
<div className="col-12 col-md-9">
89-
<Form model="feedback" onSubmit={ (values) => this.handleSubmit(values) } >
92+
<Form model="feedback" onSubmit={(values) => this.handleSubmit(values)} resetOnSubmit={true}>
9093

9194
{/* firstname */}
9295
<Row className="form-group">

‎confusion/src/components/HomeComponent.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,12 @@ function Home(props) {
7575
</div>
7676

7777
<div className="col-12 col-md m-1">
78-
<RenderCard item={props.leader} />
78+
<RenderCard
79+
item={props.leader}
80+
isLoading={props.leaderLoading}
81+
errMess={props.leaderErrMess}
82+
83+
/>
7984
</div>
8085

8186
</div>

‎confusion/src/components/MainComponent.js‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import DishDetail from './DishdetailComponent';
1010

1111
import { Switch, Route, Redirect, withRouter } from 'react-router-dom';
1212
import {connect} from 'react-redux';
13-
import { postComment, fetchDishes, fetchComments, fetchPromos } from '../redux/ActionCreators';
13+
import { postComment, postFeedback, fetchDishes, fetchComments, fetchPromos, fetchLeaders } from '../redux/ActionCreators';
1414
import { actions } from 'react-redux-form';
1515
import { TransitionGroup, CSSTransition } from 'react-transition-group';
1616

@@ -27,14 +27,18 @@ const mapStateToProps = state => {
2727

2828
const mapDispatchToProps = (dispatch) => ({
2929
postComment: (dishId, rating, author, comment) => dispatch(postComment(dishId, rating, author, comment)),
30+
31+
3032
fetchDishes: () => { dispatch(fetchDishes()) },
3133
resetFeedbackForm: () => { dispatch(actions.reset('feedback')) },
3234

3335
fetchComments: () => dispatch(fetchComments()),
34-
35-
fetchPromos: () => dispatch(fetchPromos())
36-
37-
36+
37+
fetchPromos: () => dispatch(fetchPromos()),
38+
fetchLeaders: () => dispatch(fetchLeaders()),
39+
40+
41+
postFeedback: (firstname, lastname, telnum, email, agree, contactType, message) => dispatch(postFeedback(firstname, lastname, telnum, email, agree, contactType, message)),
3842

3943
});
4044

@@ -49,6 +53,7 @@ class Main extends Component {
4953
this.props.fetchDishes();
5054
this.props.fetchComments();
5155
this.props.fetchPromos();
56+
this.props.fetchLeaders();
5257
}
5358

5459
render() {
@@ -68,8 +73,11 @@ class Main extends Component {
6873
promoLoading={this.props.promotions.isLoading}
6974
promoErrMess={this.props.promotions.errMess}
7075

71-
leader={this.props.leaders.filter((leader) => leader.featured)[0]}
72-
76+
leader={
77+
this.props.leaders.leaders.filter((leader) => leader.featured)[0]
78+
}
79+
leaderLoading={this.props.leaders.isLoading}
80+
leaderErrMess={this.props.leaders.errMess}
7381

7482
/>
7583
);
@@ -83,7 +91,9 @@ class Main extends Component {
8391
const AboutUsPage = () => {
8492
return(
8593
<About
86-
leaders={this.props.leaders}
94+
leaders={this.props.leaders.leaders}
95+
leaderLoading={this.props.leaders.isLoading}
96+
leaderErrMess={this.props.leaders.errMess}
8797
/>
8898
);
8999
};
@@ -118,7 +128,13 @@ class Main extends Component {
118128

119129
<Route path="/menu/:dishId" component={DishWithId} />
120130

121-
<Route exact path="/contactus" component={() => <Contact resetFeedbackForm={this.props.resetFeedbackForm } /> } />
131+
<Route exact path="/contactus" component={() => <Contact
132+
resetFeedbackForm={this.props.resetFeedbackForm }
133+
postFeedback={this.props.postFeedback}
134+
135+
/> }
136+
/>
137+
122138
<Route exact path="/aboutus" component={ AboutUsPage } />
123139

124140
{/* if url dosesnt match, bydefault redirect to */}

‎confusion/src/redux/ActionCreators.js‎

Lines changed: 114 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import * as ActionTypes from './ActionTypes';
2-
import { DISHES } from '../shared/dishes';
2+
// import { DISHES } from '../shared/dishes';
33
import { baseUrl } from '../shared/baseUrl';
44

5+
/**.......... Comment............................ */
56
export const addComment = (comment) => ({
67
type: ActionTypes.ADD_COMMENT,
78
payload: comment
@@ -53,6 +54,75 @@ export const postComment = (dishId, rating, author, comment)=> (dispatch)=> {
5354
}
5455

5556

57+
58+
59+
60+
/**.......... Feedback ............................ */
61+
// export const addFeedback = (feedback) => ({
62+
// type: ActionTypes.ADD_FEEDBACK,
63+
// payload: feedback
64+
// });
65+
66+
67+
68+
export const postFeedback = (firstname, lastname, telnum, email, agree, contactType, message) => (dispatch) => {
69+
70+
const newFeedback = {
71+
firstname: firstname,
72+
lastname: lastname,
73+
telnum: telnum,
74+
email: email,
75+
agree: agree,
76+
contactType: contactType,
77+
message: message,
78+
}
79+
newFeedback.date = new Date().toISOString();
80+
81+
return fetch(baseUrl + 'feedback', {
82+
method: 'POST',
83+
body: JSON.stringify(newFeedback),
84+
headers: {
85+
'Content-type': 'application/json'
86+
},
87+
credentials: 'same-origin'
88+
})
89+
.then(response => {
90+
91+
if (response.ok) {
92+
93+
return response;
94+
}
95+
else {
96+
var error = new Error('Error ' + response.status + ': ' + response.statusText)
97+
error.response = response;
98+
throw error;
99+
}
100+
},
101+
////if no responmse from server
102+
error => {
103+
var errmess = new Error(error.message);
104+
throw errmess;
105+
}
106+
)
107+
.then(response => response.json())
108+
.then(response => alert(JSON.stringify(response)))
109+
.catch(error => {
110+
console.log('Post Comments', error.message);
111+
alert('Comment could not be posted\nError' + error.message);
112+
});
113+
114+
}
115+
116+
117+
118+
119+
120+
121+
122+
123+
124+
125+
56126
/**.......... Dishes............................ */
57127
//// thunk: function returns an func
58128
export const fetchDishes = () => (dispatch) => {
@@ -179,4 +249,47 @@ export const promosFailed = (errmess) => ({
179249
export const addPromos = (promos) => ({
180250
type: ActionTypes.ADD_PROMOS,
181251
payload: promos
252+
});
253+
254+
255+
256+
257+
/**.......... leaders............................ */
258+
export const fetchLeaders = () => (dispatch) => {
259+
260+
dispatch( leadersLoading() );
261+
262+
return fetch( baseUrl + 'leaders')
263+
.then(response => {
264+
if (response.ok) {
265+
return response;
266+
}
267+
else {
268+
var error = new Error('Error ' + response.status + ': ' + response.statusText)
269+
error.response = response;
270+
throw error;
271+
}
272+
},
273+
////if no responmse from server
274+
error => {
275+
var errmess = new Error(error.message);
276+
throw errmess;
277+
})
278+
.then(response => response.json())
279+
.then( leaders => dispatch( addLeaders(leaders) ) )
280+
.catch(error => dispatch(leadersFailed(error.message)));
281+
}
282+
283+
export const leadersLoading = () => ({
284+
type: ActionTypes.LEADERS_LOADING
285+
});
286+
287+
export const leadersFailed = (errmess) => ({
288+
type: ActionTypes.LEADERS_FAILED,
289+
payload: errmess
290+
});
291+
292+
export const addLeaders = (leaders) => ({
293+
type: ActionTypes.ADD_LEADERS,
294+
payload: leaders
182295
});

‎confusion/src/redux/ActionTypes.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
export const ADD_COMMENT = 'ADD_COMMENT';
22

3+
export const ADD_FEEDBACK = 'ADD_FEEDBACK';
4+
35
export const DISHES_LOADING = 'DISHES_LOADING';
46
export const DISHES_FAILED = 'DISHES_FAILED';
57
export const ADD_DISHES = 'ADD_DISHES';
@@ -9,4 +11,8 @@ export const COMMENTS_FAILED ='COMMENTS_FAILED';
911

1012
export const PROMOS_LOADING ='PROMOS_LOADING';
1113
export const ADD_PROMOS = 'ADD_PROMOS';
12-
export const PROMOS_FAILED = 'PROMOS_FAILED';
14+
export const PROMOS_FAILED = 'PROMOS_FAILED';
15+
16+
export const LEADERS_LOADING ='LEADERS_LOADING';
17+
export const ADD_LEADERS = 'ADD_LEADERS';
18+
export const LEADERS_FAILED = 'LEADERS_FAILED';

0 commit comments

Comments
 (0)