assignemnt 4

MianJawadAhmad · Oct 6, 2019 · 09ece9e · 09ece9e
1 parent 1ccddef
commit 09ece9e
Show file tree

Hide file tree

Showing 7 changed files with 160 additions and 44 deletions.
diff --git a/src/components/AboutComponent.js b/src/components/AboutComponent.js
@@ -1,32 +1,54 @@
 import React from 'react';
 	import { Breadcrumb, BreadcrumbItem, Card, CardBody, CardHeader, Media } from 'reactstrap';
 	import { Link } from 'react-router-dom';
+	import { Loading } from './LoadingComponent';
+ import { baseUrl } from '../shared/baseUrl';
+ import { FadeTransform, Fade, Stagger } from 'react-animation-components';
 
 	function About(props) {
 
-		const leaders = props.leaders.map(leader => {
+		const leaders = props.leaders.leaders.map(leader => {
 	        return (
-				<div key={leader.id} className="col-12 mt-5">
-	                <RenderLeader leader={leader} />
-	            </div>
+				<RenderLeader leader={leader} />
 	        );
 		});
 
 
 		function RenderLeader({ leader }) {
 	        return (
-	            <Media tag="li">
-	                <Media left middle>
-	                    <Media object src={leader.image} alt={leader.name} />
-	                </Media>
-	                <Media body className="ml-5">
-	                    <Media heading>{leader.name}</Media>
-	                    <p>{leader.designation}</p>
-	                    <p>{leader.description}</p>
-	                  </Media>
-	                </Media>
+				<Fade in>
+					<Media tag="li" key={leader.id} className="col-12 mt-5" >
+						<Media left middle>
+							<Media object src={baseUrl + leader.image} alt={leader.name} />
+						</Media>
+						<Media body className="ml-5">
+							<Media heading>{leader.name}</Media>
+							<p>{leader.designation}</p>
+							<p>{leader.description}</p>
+						</Media>
+					</Media>
+				</Fade>
 	        );
-	    }
+		}
+
+		function RenderLeaders() {
+
+			if (props.leaders.isLoading) {
+				return <Loading />;
+			}
+			else if (props.leaders.errMess) {
+				return (
+					<h4>{props.leaders.errMess}</h4>
+				);
+			}
+			else return (
+				<Media list>
+					<Stagger in>
+						{leaders}
+					</Stagger>
+				</Media>
+			);
+		}
 
 	    return(
 	        <div className="container">
@@ -83,9 +105,7 @@ import React from 'react';
 	                    <h2>Corporate Leadership</h2>
 	                </div>
 	                <div className="col-12">
-	                    <Media list>
-	                        {leaders}
-	                    </Media>
+					<RenderLeaders />
 	                </div>
 	            </div>
 	        </div>

diff --git a/src/components/ContactComponent.js b/src/components/ContactComponent.js
@@ -18,9 +18,7 @@ class Contact extends Component {
     }
 
     handleSubmit(values) {
-        console.log('current state:', values);
-        alert('current state:' + JSON.stringify(values));
-
+        this.props.postFeedback(values);
         this.props.resetFeedbackForm();
     }
 

diff --git a/src/components/HomeComponent.js b/src/components/HomeComponent.js
@@ -43,7 +43,7 @@ function Home(props) {
                     <RenderCard item={props.promotion} isLoading={props.promoLoading} errMess={props.promoErrMess} />
                 </div>
                 <div className="col-12 col-md m-1">
-                    <RenderCard item={props.leader} />
+                    <RenderCard item={props.leader} isLoading={props.leadersLoading} errMess={props.leadersErrMess} />
                 </div>
             </div>
         </div>

diff --git a/src/components/MainComponent.js b/src/components/MainComponent.js
@@ -9,7 +9,7 @@ import About from './AboutComponent';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { Switch, Route, Redirect, withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
-import { postComment, fetchDishes, fetchComments, fetchPromos } from '../redux/ActionCreators';
+import { postComment, fetchDishes, fetchComments, fetchPromos, fetchLeaders, postFeedback } from '../redux/ActionCreators';
 import { actions } from 'react-redux-form';
 
 const mapStateToProps = state => {
@@ -26,7 +26,9 @@ const mapDispatchToProps = dispatch => ({
     fetchDishes: () => { dispatch(fetchDishes())},
     resetFeedbackForm: () => { dispatch(actions.reset('feedback'))},
     fetchComments: () => dispatch(fetchComments()),
-    fetchPromos: () => dispatch(fetchPromos())
+    fetchPromos: () => dispatch(fetchPromos()),
+    fetchLeaders: () => { dispatch(fetchLeaders()) },
+    postFeedback: (feedback) => dispatch(postFeedback(feedback))
   });
 
 class Main extends Component {
@@ -38,6 +40,7 @@ class Main extends Component {
         this.props.fetchDishes();
         this.props.fetchComments();
         this.props.fetchPromos();
+        this.props.fetchLeaders();
       }
     render() {
 
@@ -50,7 +53,9 @@ class Main extends Component {
                     promotion={this.props.promotions.promotions.filter((promo) => promo.featured)[0]}
                     promoLoading={this.props.promotions.isLoading}
                     promoErrMess={this.props.promotions.errMess}
-                    leader={this.props.leaders.filter((leader) => leader.featured)[0]}
+                    leader={this.props.leaders.leaders.filter(leader => leader.featured)[0]}
+                     leadersLoading={this.props.leaders.isLoading}
+                     leadersErrMess={this.props.leaders.errMess}
                 />
             );
         }
@@ -77,7 +82,7 @@ class Main extends Component {
                             <Route exact path='/aboutus' component={() => <About leaders={this.props.leaders} />} />} />
                             <Route exact path='/menu' component={() => <Menu dishes={this.props.dishes} />} />
                             <Route path='/menu/:dishId' component={DishWithId} />
-                            <Route exact path='/contactus' component={() => <Contact resetFeedbackForm={this.props.resetFeedbackForm} />} />
+                            <Route exact path="/contactus" component={() => <Contact resetFeedbackForm={this.props.resetFeedbackForm} postFeedback={this.props.postFeedback} />} />
                             <Redirect to="/home" />
                         </Switch>
                         </CSSTransition>

diff --git a/src/redux/ActionCreators.js b/src/redux/ActionCreators.js
@@ -20,25 +20,28 @@ export const postComment = (dishId, rating, author, comment) => (dispatch) => {
     newComment.date = new Date().toISOString();
 
     return fetch(baseUrl + 'comments', {
-        method: "POST",
+        method: 'POST',
         body: JSON.stringify(newComment),
         headers: {
-          "Content-Type": "application/json"
+            'Content-Type': 'application/json'
         },
-        credentials: "same-origin"
+        credentials: 'same-origin'
     })
     .then(response => {
         if (response.ok) {
-          return response;
+            return response;
         } else {
-          var error = new Error('Error ' + response.status + ': ' + response.statusText);
-          error.response = response;
-          throw error;
-        }
-      },
-      error => {
+            var error = new Error('Error ' + response.status + ': ' + response.statusText);
+            error.response = response;
+
             throw error;
-      })
+        }
+    },
+        error => {
+            var errorMessage = new Error(error.errorMessage);
+            throw errorMessage;
+        }
+    )
     .then(response => response.json())
     .then(response => dispatch(addComment(response)))
     .catch(error =>  { console.log('post comments', error.message); alert('Your comment could not be posted\nError: '+error.message); });
@@ -146,4 +149,77 @@ export const promosFailed = (errmess) => ({
 export const addPromos = (promos) => ({
     type: ActionTypes.ADD_PROMOS,
     payload: promos
-});
+});
+
+export const fetchLeaders = () => (dispatch) => {
+    dispatch(leadersLoading(true));
+
+    return fetch(baseUrl + 'leaders')
+        .then(response => {
+            if (response.ok) {
+                return response;
+            } else {
+                var error = new Error('Error ' + response.status + ': ' + response.statusText);
+                error.response = response;
+
+                throw error;
+            }
+        },
+            error => {
+                var errorMessage = new Error(error.errorMessage);
+                throw errorMessage;
+            }
+        )
+
+        .then(response => response.json())
+        .then(leaders => dispatch(addLeaders(leaders)))
+        .catch(error => dispatch(leadersFailed(error.message)))
+}
+
+export const leadersLoading = () => (dispatch) => ({
+    type: ActionTypes.LEADERS_LOADING
+});
+
+export const leadersFailed = (errmess) => ({
+    type: ActionTypes.LEADERS_FAILED,
+    payload: errmess
+});
+
+export const addLeaders = (leaders) => ({
+    type: ActionTypes.ADD_LEADERS,
+    payload: leaders
+}); 
+
+export const postFeedback = (feedback) => (dispatch) => {
+    const newFeedback = Object.assign({ date: new Date().toISOString() }, feedback);
+
+    return fetch(baseUrl + 'feedback', {
+        method: 'POST',
+        body: JSON.stringify(newFeedback),
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        credentials: 'same-origin'
+    })
+        .then(response => {
+            if (response.ok) {
+                return response;
+            } else {
+                var error = new Error('Error ' + response.status + ': ' + response.statusText);
+                error.response = response;
+
+                throw error;
+            }
+        },
+            error => {
+                var errorMessage = new Error(error.errorMessage);
+                throw errorMessage;
+            }
+        )
+        .then(response => response.json())
+        .then(response => dispatch(addComment(response)))
+        .catch(error => {
+            console.log('Post feedback: ' + error.message);
+            alert('Feedback could not be posted:\n' + error.message)
+        })
+}; 
diff --git a/src/redux/ActionTypes.js b/src/redux/ActionTypes.js
@@ -7,4 +7,8 @@ export const ADD_COMMENTS = 'ADD_COMMENTS';
 export const COMMENTS_FAILED = 'COMMENTS_FAILED';
 export const PROMOS_LOADING = 'PROMOS_LOADING';
 export const ADD_PROMOS = 'ADD_PROMOS';
-export const PROMOS_FAILED = 'PROMOS_FAILED';
+
+export const PROMOS_FAILED ='PROMOS_FAILED';
+ export const LEADERS_LOADING = 'LEADERS_LOADING';
+ export const LEADERS_FAILED ='LEADERS_FAILED';
+ export const ADD_LEADERS = 'ADD_LEADERS'; 
diff --git a/src/redux/leaders.js b/src/redux/leaders.js
@@ -1,8 +1,21 @@
-import { LEADERS } from '../shared/leaders';
+import * as ActionTypes from './ActionTypes';
 
-export const Leaders = (state = LEADERS, action) => {
+export const Leaders = (state = {
+    isLoading: true,
+    errMess: null,
+    leaders: []
+}, action) => {
     switch (action.type) {
+        case ActionTypes.ADD_LEADERS:
+            return { ...state, isLoading: false, errMess: null, leaders: action.payload };
+
+        case ActionTypes.LEADERS_LOADING:
+            return { ...state, isLoading: true, errMess: null, leaders: [] };
+
+        case ActionTypes.LEADERS_FAILED:
+            return { ...state, isLoading: false, errMess: action.payload, leaders: [] };
+
         default:
-          return state;
-      }
-};
+            return state;
+    }
+}