The Reviews page is finished

src/actions/reviews.js

@@ -1,5 +1,7 @@
 import * as types from "../actionTypes/actionTypes";
 
+const reviewsURL = 'https://api-marathon.herokuapp.com/api/v1/feedback';
+
 export const getReviews = payload => ({
     type: types.GET_REQUEST_REVIEWS,
     payload
@@ -15,9 +17,9 @@ export const getReviewsError = payload => ({
     payload
 });
 
-export const getAllReviews = () => {
+export const getAllReviews = (type = 'All events') => {
     return dispatch => {
-        let promise = fetch("https://api-marathon.herokuapp.com/api/v1/feedback")
+        let promise = fetch(type !== 'All events' ? `${reviewsURL}/?event=${type}` : reviewsURL)
 
         dispatch(getReviews())
 
@@ -45,7 +47,7 @@ export const postReviewError = payload => ({
 
 export const postReviewSubmit = payload => {
     return dispatch => {
-        let promise = fetch("https://api-marathon.herokuapp.com/api/v1/feedback",
+        let promise = fetch(reviewsURL,
             {
                 method: 'POST',
                 body: JSON.stringify(payload),

src/components/filtersReviews/filters-reviews.scss

@@ -0,0 +1,13 @@
+@import "../../styles/variables";
+
+.form-filter {
+    .form-block__select {
+        width: 100%;
+    }
+
+    .btn-group {
+        text-align: center;
+        padding-top: 1rem;
+        padding-bottom: 0;
+    }
+}

src/components/filtersReviews/filtersReviews.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import { Field, reduxForm } from 'redux-form';
+
+import './filters-reviews.scss';
+
+import { customSelect } from "../customFields/customSelect/customSelect";
+
+let FiltersReviews = props => {
+    const { handleSubmit, getRequest, eventTypes, labelType } = props;
+
+    const submit = value => {
+        //console.log(value);
+        getRequest(value.eventType);
+    };
+
+    return (
+        <form className="form-filter" onSubmit={handleSubmit(submit)}>
+            <div>
+                <Field name="eventType" label={labelType} component={customSelect}>
+                    <option>All events</option>
+                    {eventTypes.map( elem => <option key={elem.id} value={elem.id}>{elem.title}</option>)}
+                </Field>
+            </div>
+            <div className="btn-group">
+                <button type="submit" className="btn">Filter</button>
+            </div>            
+        </form>
+    )
+};
+
+FiltersReviews = reduxForm({
+    form: 'filterReviews'
+})(FiltersReviews)
+
+export default FiltersReviews

src/components/review-form/ReviewForm.js

@@ -6,6 +6,7 @@ import './review-form.scss';
 import { customInput } from "../customFields/customInput/customInput";
 import { customTextarea } from "../customFields/customTextarea/customTextarea";
 import { customSelect } from "../customFields/customSelect/customSelect";
+import { validationForms } from "../../utils/validationForms";
 
 let ReviewForm = props => {
     const { handleSubmit, postReviewSubmit, eventsArr, reset } = props;
@@ -20,14 +21,12 @@ let ReviewForm = props => {
 
     return (
         <form className="form" onSubmit={handleSubmit(submit)}>
-            <div>
-                <Field name="event" label="Event Title" component={customSelect}>
-                    <option>Select Event</option>
-                    {eventsArr.map(elem => <option key={elem.id} value={elem.id}>{elem.title}</option>)}
-                </Field>
-            </div>
+            <Field name="event" label="Event Title" component={customSelect}>
+                <option>Select Event</option>
+                {eventsArr.map(elem => <option key={elem.id} value={elem.id}>{elem.title}</option>)}
+            </Field>
             <Field name="name" label="Full name"  type="text" id="name" component={customInput} />
-            <Field name="text" label="Your message" type="text" id="text" component={customTextarea} />
+            <Field name="text" label="Your message" id="text" component={customTextarea} rows="10"/>
 
             <div className="btn-group">
                 <button type="submit" className="btn">Send</button>
@@ -37,7 +36,8 @@ let ReviewForm = props => {
 };
 
 ReviewForm = reduxForm({
-    form: 'reviewForm'
+    form: 'reviewForm',
+    validate: validationForms
 })(ReviewForm)
 
 export default ReviewForm

src/components/settings-form/settings-form.scss

@@ -1 +0,0 @@
-@import "../../styles/variables";

src/components/settings-form/settingsForm.js

@@ -1,56 +0,0 @@
-import React from 'react'
-import { Field, reduxForm } from 'redux-form';
-
-import './settings-form.scss';
-
-import { customInput } from "../customFields/customInput/customInput";
-
-let SettingsForm = props => {
-    //const { handleSubmit, postCheckInSubmit } = props;
-    const { handleSubmit, initialValues } = props;
-    console.log('initialValues',initialValues);
-    console.log(props)
-
-    const onChangeValue = e => {
-        console.log(e.target.value);
-    }
-
-    const submit = value => {
-        console.log(value);        
-        //postCheckInSubmit(value);
-    };
-
-    return (
-        <form className="form" onSubmit={handleSubmit(submit)}>
-            <div>
-                {/*<label htmlFor="name">Name</label>*/}
-                {/*<input name="name" type="text" id="name" value={userInfo.name}/>*/}
-                <Field name="name" component={customInput} id="name" label="Name" onChange={onChangeValue}/>
-            </div>
-            <div>
-                {/*<label htmlFor="phone">Phone</label>*/}
-                <Field name="phone" component={customInput} type="phone" id="phone" label="Phone" onChange={onChangeValue}/>
-            </div>
-            {/*<div>
-                <label htmlFor="email">E-mail</label>
-                <Field name="email" component="input" type="email" id="email"/>
-            </div>
-            <div>
-                <label htmlFor="password">Password</label>
-                <Field name="password" component="input" type="text" id="password"/>
-            </div>
-            <div>
-                <label htmlFor="confirmPassword">Confirm Password</label>
-                <Field name="confirmPassword" component="input" type="text" id="confirmPassword"/>
-            </div>*/}
-            
-            <button type="submit" className="btn">Save</button>
-        </form>
-        )
-};
-
-SettingsForm = reduxForm({
-    form: 'settings'
-})(SettingsForm)
-
-export default SettingsForm

src/conteiners/home/Home.js

@@ -106,7 +106,7 @@ export class Home extends React.Component {
 
                         <div className="events-list">
                             {
-                                events.reverse().map( (event,ind) => ind < 6 && <EventInfoShort
+                                events.length !== 0 ? events.reverse().map( (event,ind) => ind < 6 && <EventInfoShort
                                     key={event._id}
                                     title={event.title}
                                     country={event.country}
@@ -114,7 +114,7 @@ export class Home extends React.Component {
                                     id={event._id}
                                     eventDate={event.eventDate}
                                     imgSrc={event.mainBannerPicture} />
-                                )
+                                ) : <p className="not-found">Not found events</p>
                             }
                         </div>
                     </div>

src/conteiners/reviews/Reviews.js

@@ -9,7 +9,7 @@ import './reviews.scss';
 import Sidebar from '../../components/sidebar/Sidebar';
 import Footer from '../../components/footer/Footer';
 import ReviewForm from '../../components/review-form/ReviewForm';
-//import FiltersEvents from '../../components/filtersEvents/FiltersEvents';
+import FiltersReviews from '../../components/filtersReviews/filtersReviews';
 
 export class Reviews extends React.Component {
     componentDidMount() {
@@ -18,7 +18,7 @@ export class Reviews extends React.Component {
     }
 
     render() {
-        const { postReviewSubmit, events, reviews } = this.props;
+        const { postReviewSubmit, events, reviews, getAllReviews } = this.props;
         const eventsArr = events.map(event => ({
             title: event.title,
             id: event._id
@@ -34,14 +34,14 @@ export class Reviews extends React.Component {
                 </div>
                 <div className="container-wrap">
 
-                    {/*<div className="events-filters">
+                    <div className="events-filters">
                         <h4>Events filter</h4>
-                        <FiltersEvents labelType="Event Title" getRequest={getAllEvents} eventTypes={eventTypes} />
-                    </div>*/}
+                        <FiltersReviews labelType="Event Title" getRequest={getAllReviews} eventTypes={eventsArr} />
+                    </div>
 
                     <div className="reviews-wrap">
                         {
-                            Array.from(reviews).reverse().map((reviewer, ind) => ind < 10 &&
+                            reviews.length !== 0 ? Array.from(reviews).reverse().map((reviewer, ind) => ind < 10 &&
                                 <div className="reviews-item" key={ind}>
                                     <div className="review-content">
                                         <div className="reviews-name">{reviewer.name}</div>
@@ -52,7 +52,7 @@ export class Reviews extends React.Component {
                                         <div className="reviews-text">{reviewer.text}</div>
                                     </div>
                                 </div>
-                            )
+                            ) : <p className="not-found">Not found feedback</p>
                         }
                     </div>
                     <div className="reviews-wrap-add">

src/conteiners/reviews/reviews.scss

@@ -16,7 +16,7 @@
                 font-size: 2.1rem;
                 margin-bottom: 1.5rem;
                 text-align: center;
-                color: $color-mint;
+                color: $color-blue;
             }
 
             .form {

src/reducers/reviews.js

@@ -1,8 +1,7 @@
 import * as types from "../actionTypes/actionTypes";
 
 const initialState = {
-    reviews: [],
-    reloadPage: false
+    reviews: []
 }
 
 export default (state = initialState, action) => {
@@ -12,7 +11,7 @@ export default (state = initialState, action) => {
         }
 
         case types.GET_REQUEST_SUCCESS_REVIEWS: {
-            //console.log('reviews', action.payload.results);
+            //console.log('reviews', action.payload);
             return {
                 ...state,
                 reviews: action.payload.results
@@ -31,10 +30,6 @@ export default (state = initialState, action) => {
         case types.POST_REQUEST_SUCCESS_REVIEW: {
             //console.log('review', action.payload);
             return state;
-            /*return {
-                ...state,
-                reloadPage: !state.reloadPage
-            };*/
         }
 
         case types.POST_REQUEST_ERROR_REVIEW: {

src/styles/custom.scss

@@ -130,7 +130,8 @@ i {
 
 //select error message
 .form-block {
-    &__select {
+    &__select,
+    &__text-area {
         .error {
             font-size: 1.3rem;
             color: $color-error;

src/utils/validationForms.js

@@ -29,5 +29,13 @@ export const validationForms = values => {
 		errors.userCountry = "Required field";
 	}
 
+	if (!values.event) {
+		errors.event = "Required field";
+	}
+
+	if (!values.text) {
+		errors.text = "Required field";
+	}
+
 	return errors;
 };