diff --git a/src/components/AboutComponent.js b/src/components/AboutComponent.js index 12ecd02..a40285b 100644 --- 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( - + {leader.name} @@ -19,7 +20,7 @@ function RenderLeader({leader}){ } function About(props) { - const leaders = props.leaders.map((leader) => { + const leaders = props.leaders.leaders.map((leader) => { return (
diff --git a/src/components/ContactComponent.js b/src/components/ContactComponent.js index e10468b..baa6dc8 100644 --- 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 index c3501df..6a1a9d7 100644 --- a/src/components/HomeComponent.js +++ b/src/components/HomeComponent.js @@ -46,7 +46,7 @@ function Home(props) {
- +
diff --git a/src/components/MainComponent.js b/src/components/MainComponent.js index 158bc8f..94d6ff1 100644 --- 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{ } />} /> } /> - } />} /> + } />} /> diff --git a/src/redux/ActionCreators.js b/src/redux/ActionCreators.js index ce14a7d..5039ccd 100644 --- 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 }); \ No newline at end of file diff --git a/src/redux/ActionTypes.js b/src/redux/ActionTypes.js index 9960c83..da3daad 100644 --- 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'; \ No newline at end of file +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'; \ No newline at end of file diff --git a/src/redux/leaders.js b/src/redux/leaders.js index 93763c5..814a45b 100644 --- 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; }