Feedback connected to server and leaders fetched from server

SohelRaja · Apr 26, 2020 · 92ecbab · 92ecbab
1 parent 8110924
commit 92ecbab
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 12 deletions.
diff --git a/src/components/AboutComponent.js b/src/components/AboutComponent.js
@@ -2,12 +2,13 @@ import React from 'react';
 import { Breadcrumb, BreadcrumbItem, Card, CardBody, CardHeader, Media } from 'reactstrap';
 import { Link } from 'react-router-dom';
 import './../App.css';
+import { baseUrl } from '../shared/baseUrl';
 
 function RenderLeader({leader}){
     return(
         <Media>
             <Media left middle>
-                <Media object src={leader.image} alt={leader.name} className="media-image"/>
+                <Media object src={baseUrl + leader.image} alt={leader.name} className="media-image"/>
             </Media>
             <Media body>
                 <Media heading>{leader.name}</Media>
@@ -19,7 +20,7 @@ function RenderLeader({leader}){
 }
 
 function About(props) {
-    const leaders = props.leaders.map((leader) => {
+    const leaders = props.leaders.leaders.map((leader) => {
         return (
             <div key={leader.id} className="col-12">
                 <RenderLeader leader={leader} />

diff --git a/src/components/ContactComponent.js b/src/components/ContactComponent.js
@@ -17,8 +17,7 @@ class Contact extends Component{
         this.handleSubmit = this.handleSubmit.bind(this);    
     }
     handleSubmit(values) {
-        console.log('Current State is: ' + JSON.stringify(values));
-        alert('Current State is: ' + JSON.stringify(values));
+        this.props.postFeedback(values);
         this.props.resetFeedbackForm();
     }
     render(){

diff --git a/src/components/HomeComponent.js b/src/components/HomeComponent.js
@@ -46,7 +46,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.leaderLoading} errMess={props.leaderErrMess}/>
                 </div>
             </div>
         </div>

diff --git a/src/components/MainComponent.js b/src/components/MainComponent.js
@@ -12,7 +12,7 @@ import Footer from './FooterComponent';
 import About from './AboutComponent';
 import Contact from './ContactComponent';
 import DishDetail from './DishdetailComponent';
-import { postComment, fetchDishes, fetchComments, fetchPromos } from '../redux/ActionCreators';
+import { postComment, fetchDishes, fetchComments, fetchPromos, postFeedback, fetchLeaders } from '../redux/ActionCreators';
 
 
 const mapStateToProps = state => {
@@ -30,7 +30,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{
@@ -43,6 +45,7 @@ class Main extends Component{
         this.props.fetchDishes();
         this.props.fetchComments();
         this.props.fetchPromos();
+        this.props.fetchLeaders();
     }
 
     onDishSelect(dishID) {
@@ -58,7 +61,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]}
+                    leaderLoading={this.props.leaders.isLoading}
+                    leaderErrMess={this.props.leaders.errMess}
                 />
             );
         };
@@ -85,7 +90,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 postFeedback={this.props.postFeedback} resetFeedbackForm={this.props.resetFeedbackForm} />} />} />
                                 <Redirect to="/home" />
                             </Switch>
                         </CSSTransition>

diff --git a/src/redux/ActionCreators.js b/src/redux/ActionCreators.js
@@ -1,6 +1,49 @@
 import * as ActionTypes from './ActionTypes';
 import { baseUrl } from '../shared/baseUrl';
 
+export const addFeedback = (feedback) => ({
+    type: ActionTypes.ADD_FEEDBACK,
+    payload: feedback
+});
+export const postFeedback = (feedback) => (dispatch) => {
+
+    const newFeedback = {
+        firstname: feedback.firstname,
+        lastname: feedback.lastname,
+        telnum: feedback.telnum,
+        email: feedback.email,
+        agree: feedback.agree,
+        contactType: feedback.contactType,
+        message: feedback.message
+    };
+    newFeedback.date = new Date().toISOString();
+
+    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 => {
+            throw error;
+      })
+    .then(response => response.json())
+    .then(response => dispatch(addFeedback(response)))
+    .then(response => { alert('Thank you for your feedback! \n' + JSON.stringify(response.payload));})
+    .catch(error =>  { console.log('post feedback', error.message); alert('Your feedback could not be posted\nError: ' + error.message); });
+};
+
 export const addComment = (comment) => ({
     type: ActionTypes.ADD_COMMENT,
     payload: comment
@@ -146,4 +189,42 @@ export const promosFailed = (errmess) => ({
 export const addPromos = (promos) => ({
     type: ActionTypes.ADD_PROMOS,
     payload: promos
+});
+
+export const fetchLeaders = () => (dispatch) => {
+
+    dispatch(leadersLoading());
+
+    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 errmess = new Error(error.message);
+            throw errmess;
+        }
+    )
+    .then(response => response.json())
+    .then(leaders => dispatch(addLeaders(leaders)))
+    .catch(error => dispatch(leadersFailed(error.message)));
+}
+
+export const leadersLoading = () => ({
+    type: ActionTypes.LEADERS_LOADING
+});
+
+export const leadersFailed = (errmess) => ({
+    type: ActionTypes.LEADERS_FAILED,
+    payload: errmess
+});
+
+export const addLeaders = (leaders) => ({
+    type: ActionTypes.ADD_LEADERS,
+    payload: leaders
 });
diff --git a/src/redux/ActionTypes.js b/src/redux/ActionTypes.js
@@ -1,4 +1,5 @@
 export const ADD_COMMENT = 'ADD_COMMENT';
+
 export const DISHES_LOADING = 'DISHES_LOADING';
 export const DISHES_FAILED = 'DISHES_FAILED';
 export const ADD_DISHES = 'ADD_DISHES';
@@ -8,4 +9,10 @@ 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 ADD_LEADERS = 'ADD_LEADERS';
+export const LEADERS_FAILED = 'LEADERS_FAILED';
+
+export const ADD_FEEDBACK = 'ADD_FEEDBACK';
diff --git a/src/redux/leaders.js b/src/redux/leaders.js
@@ -1,7 +1,18 @@
-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};
+
         default:
           return state;
       }