created reviews page

src/components/filtersEvents/FiltersEvents.js

@@ -6,18 +6,17 @@ import './filtersEvents.scss';
 import { customSelect } from "../customFields/customSelect/customSelect";
 
 let FiltersEvents = props => {
-    const { handleSubmit, getAllEvents } = props;
-    const eventTypes = ['All events','Marathon','Triathlon','Cycling'];
+    const { handleSubmit, getRequest, eventTypes, labelType } = props;
 
     const submit = value => {
         console.log(value);
-        getAllEvents(value.eventType);
+        getRequest(value.eventType);
     };
 
     return (
         <form className="form-filter" onSubmit={handleSubmit(submit)}>
             <div>
-                <Field name="eventType" label="Event Type" component={customSelect}>
+                <Field name="eventType" label={labelType} component={customSelect}>
                     {eventTypes.map( (elem,ind) => <option key={ind} value={elem}>{elem}</option>)}
                 </Field>
             </div>

src/components/reg-form-event/RegFormEvent.js

@@ -7,14 +7,14 @@ import { customSelect } from "../customFields/customSelect/customSelect";
 import { customInput } from "../customFields/customInput/customInput";
 
 let RegFormEvent = props => {
-    const { handleSubmit, regEventSubmit, eventId } = props;
+    const { handleSubmit, regEventSubmit, eventId, reset } = props;
     const eventTypes = ['Select distance', 'Half marathone','Marathone'];
 
     const submit = value => {
         value.event = eventId;
-
-        console.log('user-event', value);
+        //console.log('user-event', value);
         regEventSubmit(value);
+        reset();
     };
 
     return (

src/components/review-form/ReviewForm.js

@@ -5,19 +5,27 @@ import './review-form.scss';
 
 import { customInput } from "../customFields/customInput/customInput";
 import { customTextarea } from "../customFields/customTextarea/customTextarea";
+import { customSelect } from "../customFields/customSelect/customSelect";
 
 let ReviewForm = props => {
-    //const { handleSubmit, postReviewSubmit } = props;
-    const { handleSubmit } = props;
+    const { handleSubmit, postReviewSubmit, eventsArr, reset } = props;
+    //console.log(props);
 
     const submit = value => {
-        value.date = new Date().toDateString().slice(4);
-        console.log(value);
-        //postReviewSubmit(value);
+        value.date = new Date();
+        //console.log(value);
+        postReviewSubmit(value);
+        reset()
     };
 
     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="name" label="Full name"  type="text" id="name" component={customInput} />
             <Field name="text" label="Your message" type="text" id="text" component={customTextarea} />
 

src/conteiners/events/Events.js

@@ -17,6 +17,7 @@ export class Events extends React.Component {
 
     render() {
         const { events, getAllEvents } = this.props;
+        const eventTypes = ['All events', 'Marathon', 'Triathlon', 'Cycling'];
         //console.log(events);
         return (
             <>
@@ -27,7 +28,7 @@ export class Events extends React.Component {
                     </div>
                     <div className="events-filters">
                         <h4>Events filter</h4>
-                        <FiltersEvents getAllEvents={getAllEvents}/>
+                        <FiltersEvents labelType="Event Type" getRequest={getAllEvents} eventTypes={eventTypes}/>
                     </div>
                     
                     <div className="events-content">

src/conteiners/events/events.scss

@@ -12,12 +12,6 @@
         font-size: 1.4rem;
     }
 
-    &-filters {
-        background: $color-white;
-        margin: 0 0 1.5rem;
-        padding: 1.6rem;
-    }
-
     &-content {
         background: $color-white;
         padding: 3rem 1.6rem;

src/conteiners/reviews/Reviews.js

@@ -2,50 +2,28 @@ import React from 'react';
 import { connect } from "react-redux";
 
 import { getAllReviews, postReviewSubmit } from "../../actions/reviews";
+import { getAllEvents } from "../../actions/getAllEvents";
 
 import './reviews.scss';
 
 import Sidebar from '../../components/sidebar/Sidebar';
 import Footer from '../../components/footer/Footer';
 import ReviewForm from '../../components/review-form/ReviewForm';
-
-const reviewsInitial = [
-    {
-        name: "Unknown Raccoon",
-        date: new Date("07-10-2019").toDateString().slice(4),
-        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-    },
-    {
-        name: "Htoto Echo",
-        date: new Date("07-29-2019").toDateString().slice(4),
-        text: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-    },
-    {
-        name: "Vasya Petrovich",
-        date: new Date("08-06-2019").toDateString().slice(4),
-        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-    },
-    {
-        name: "Petya Petrov",
-        date: new Date("08-07-2019").toDateString().slice(4),
-        text: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-    },
-    {
-        name: "Tanya Sash",
-        date: new Date("08-08-2019").toDateString().slice(4),
-        text: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-    }
-]
+//import FiltersEvents from '../../components/filtersEvents/FiltersEvents';
 
 export class Reviews extends React.Component {
     componentDidMount() {
-        this.props.getAllReviews()
+        this.props.getAllReviews();
+        this.props.getAllEvents();
     }
 
     render() {
-        const { postReviewSubmit } = this.props;
-        //const { reviews, postReviewSubmit } = this.props;
-        //console.log(reviews);
+        const { postReviewSubmit, events, reviews } = this.props;
+        const eventsArr = events.map(event => ({
+            title: event.title,
+            id: event._id
+        }));
+        //console.log(Array.from(reviews).reverse());
         return (
             <>
                 <Sidebar/>
@@ -55,15 +33,21 @@ export class Reviews extends React.Component {
                     </div>
                 </div>
                 <div className="container-wrap">
+
+                    {/*<div className="events-filters">
+                        <h4>Events filter</h4>
+                        <FiltersEvents labelType="Event Title" getRequest={getAllEvents} eventTypes={eventTypes} />
+                    </div>*/}
+
                     <div className="reviews-wrap">
                         {
-                            reviewsInitial.reverse().map((reviewer, ind) => ind < 10 &&
+                            Array.from(reviews).reverse().map((reviewer, ind) => ind < 10 &&
                                 <div className="reviews-item" key={ind}>
-                                <div className="review-content">
+                                    <div className="review-content">
                                         <div className="reviews-name">{reviewer.name}</div>
                                         <div className="reviews-date">
                                             <i className="fa fa-calendar-o" aria-hidden="true"></i>
-                                            {reviewer.date}
+                                        { new Date(reviewer.date).toDateString().slice(4) }
                                         </div>
                                         <div className="reviews-text">{reviewer.text}</div>
                                     </div>
@@ -73,7 +57,7 @@ export class Reviews extends React.Component {
                     </div>
                     <div className="reviews-wrap-add">
                         <h3>Send your reviews</h3>
-                        <ReviewForm postReviewSubmit={postReviewSubmit}/>
+                        <ReviewForm postReviewSubmit={postReviewSubmit} eventsArr={eventsArr}/>
                     </div>
                 </div>
                 <Footer/>
@@ -84,11 +68,13 @@ export class Reviews extends React.Component {
 
 const mapStateToProps = state => {
     return {
-        reviews: state.allReviews.reviews
+        reviews: state.allReviews.reviews,
+        events: state.getEvents.events,
+        reloadPage: state.allReviews.reloadPage
     };
 };
 
 export default connect(
     mapStateToProps,
-    { getAllReviews, postReviewSubmit }
+    { getAllReviews, postReviewSubmit, getAllEvents }
 )(Reviews);

src/conteiners/reviews/reviews.scss

@@ -25,7 +25,7 @@
                 margin: 0 auto;
             }
 
-            .input-box {
+            .input-box, .form-block__select {
                 width: 100%;
                 margin-bottom: 2rem;
             }

src/reducers/reviews.js

@@ -1,7 +1,8 @@
 import * as types from "../actionTypes/actionTypes";
 
 const initialState = {
-    reviews: []
+    reviews: [],
+    reloadPage: false
 }
 
 export default (state = initialState, action) => {
@@ -11,15 +12,15 @@ export default (state = initialState, action) => {
         }
 
         case types.GET_REQUEST_SUCCESS_REVIEWS: {
-            //console.log('reviews',action.payload.reviews);
+            //console.log('reviews', action.payload.results);
             return {
                 ...state,
-                reviews: action.payload.reviews
+                reviews: action.payload.results
             };
         }
 
         case types.GET_REQUEST_ERROR_REVIEWS: {
-            console.log('error reviews');
+            console.log('error reviews', action.payload.message);
             return state;
         }
 
@@ -28,11 +29,16 @@ 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: {
-            console.log('error reviews');
+            console.log('error reviews', action.payload.message);
             return state;
         }
 

src/styles/filters.scss

@@ -0,0 +1,15 @@
+.events-filters {
+    background: $color-white;
+    margin: 0 0 1.5rem;
+    padding: 1.6rem;
+
+    label {
+        margin-bottom: 1rem;
+    }
+
+    h4 {
+        margin-bottom: 1.5rem;
+        text-align: center;
+        font-size: 1.4rem;
+    }
+}

src/styles/main.scss

@@ -2,4 +2,5 @@
 @import "variables";
 @import "base";
 @import "custom";
-@import "logo";
+@import "logo";
+@import "filters";