added filter on the results page

src/actions/getResults.js

@@ -1,5 +1,7 @@
 import * as types from "../actionTypes/actionTypes";
 
+const resultsURL = 'https://api-marathon.herokuapp.com/api/v1/results'
+
 export const getResultsSend = payload => ({
     type: types.GET_RESULT,
     payload
@@ -15,9 +17,9 @@ export const getResultsError = payload => ({
     payload
 });
 
-export const getResults = () => {
+export const getResults = (type = 'All events') => {
     return dispatch => {
-        let promise = fetch('https://api-marathon.herokuapp.com/api/v1/results')
+        let promise = fetch(type !== 'All events' ? `${resultsURL}/?event=${type}` : resultsURL)
 
         dispatch(getResultsSend())
 

src/components/filtersEvents/FiltersEvents.js

@@ -9,7 +9,7 @@ let FiltersEvents = props => {
     const { handleSubmit, getRequest, eventTypes, labelType } = props;
 
     const submit = value => {
-        console.log(value);
+        //console.log(value);
         getRequest(value.eventType);
     };
 

src/conteiners/result/Result.js

@@ -2,19 +2,22 @@ import React from 'react';
 import { connect } from "react-redux";
 
 import { getResults } from "../../actions/getResults";
+import { getAllEvents } from "../../actions/getAllEvents";
 
 import './result.scss';
 
 import Sidebar from '../../components/sidebar/Sidebar';
 import Footer from '../../components/footer/Footer';
+import FiltersReviews from '../../components/filtersReviews/filtersReviews';
 
 export class Result extends React.Component {
     componentDidMount() {
         this.props.getResults();
+        this.props.getAllEvents();
     }
     render() {
-        const {marathone, halfMarathone} = this.props;
-        console.log('result page',marathone);
+        const {marathone, halfMarathone, getResults, eventsArr} = this.props;
+        //console.log('result page',marathone);
         return (
             <>
                 <Sidebar/>
@@ -25,6 +28,11 @@ export class Result extends React.Component {
                 </div>
 
                 <div className="container-wrap">
+                    <div className="events-filters">
+                        <h4>Events filter</h4>
+                        <FiltersReviews labelType="Event Title" getRequest={getResults} eventTypes={eventsArr} />
+                    </div>
+
                     <div className="results-wrap">
                         <div className="profile-tabs-wrap">
                             <div className="tabs-main">
@@ -36,30 +44,26 @@ export class Result extends React.Component {
 
                                 <div className="tab-item" id="content1">
                                     <div className="history">
-                                        {/* имя, название ивента, тип ивента, время, пол, место */}
-                                        {/* фильтрация по тайтлу ивента,по типу ивента */}
                                         <table>
                                             <thead>
                                                     <tr>
                                                         <th>User name</th>
                                                         <th>Event</th>
                                                         <th>Event type</th>
-                                                        {/*<th>Distance</th>*/}
-                                                        {/*<th>rating</th>*/}
                                                         <th>Time</th>
                                                         <th>User sex</th>
                                                     </tr>
                                             </thead>
                                             <tbody>
                                                 {
-                                                    marathone.map(result =><tr key={result._id}>
+                                                    marathone.length !== 0 ? marathone.map(result =><tr key={result._id}>
                                                             <td>{result.eventUser.name}</td>
                                                             <td>{result.event.title}</td>
                                                             <td>{result.event.eventType}</td>
                                                             <td>{result.time}</td>
                                                             <td><i className={`fa fa-${result.eventUser.sex === 'female' ? 'female' : 'male'}`} aria-hidden="true"></i></td>
                                                         </tr>
-                                                    )
+                                                    ) : <tr><td colSpan="5"><p className="not-found">Not found results</p></td></tr>
                                                 }
                                             </tbody>
                                         </table>
@@ -68,30 +72,26 @@ export class Result extends React.Component {
 
                                 <div className="tab-item" id="content2">
                                     <div className="history">
-                                        {/* имя, название ивента, тип ивента, время, пол, место */}
-                                        {/* фильтрация по тайтлу ивента,по типу ивента */}
                                         <table>
                                             <thead>
                                                     <tr>
                                                         <th>User name</th>
                                                         <th>Event</th>
                                                         <th>Event type</th>
-                                                        {/*<th>Distance</th>*/}
-                                                        {/*<th>rating</th>*/}
                                                         <th>Time</th>
                                                         <th>User sex</th>
                                                     </tr>
                                             </thead>
                                             <tbody>
                                                 {
-                                                    halfMarathone.map(result =><tr key={result._id}>
+                                                    halfMarathone.length !== 0 ? halfMarathone.map(result =><tr key={result._id}>
                                                             <td>{result.eventUser.name}</td>
                                                             <td>{result.event.title}</td>
                                                             <td>{result.event.eventType}</td>
                                                             <td>{result.time}</td>
                                                             <td><i className={`fa fa-${result.eventUser.sex === 'female' ? 'female' : 'male'}`} aria-hidden="true"></i></td>
                                                         </tr>
-                                                    )
+                                                    ) : <tr><td colSpan="5"><p className="not-found">Not found results</p></td></tr>
                                                 }
                                             </tbody>
                                         </table>
@@ -111,11 +111,13 @@ const mapStateToProps = state => {
     return {
         results: state.results.results,
         marathone: state.results.marathoneResults,
-        halfMarathone: state.results.halfMarathoneResults
+        halfMarathone: state.results.halfMarathoneResults,
+        events: state.getEvents.events,
+        eventsArr: state.getEvents.eventsArrShort
     };
 };
 
 export default connect(
     mapStateToProps,
-    { getResults }
+    { getResults, getAllEvents }
 )(Result);

src/conteiners/reviews/Reviews.js

@@ -18,11 +18,7 @@ export class Reviews extends React.Component {
     }
 
     render() {
-        const { postReviewSubmit, events, reviews, getAllReviews } = this.props;
-        const eventsArr = events.map(event => ({
-            title: event.title,
-            id: event._id
-        }));
+        const { postReviewSubmit, reviews, getAllReviews, eventsArr } = this.props;
         
         return (
             <>
@@ -69,7 +65,8 @@ export class Reviews extends React.Component {
 const mapStateToProps = state => {
     return {
         reviews: state.allReviews.reviews,
-        events: state.getEvents.events
+        events: state.getEvents.events,
+        eventsArr: state.getEvents.eventsArrShort
     };
 };
 

src/reducers/getAllEvents.js

@@ -1,7 +1,8 @@
 import * as types from "../actionTypes/actionTypes";
 
 const initialState = {
-    events: []
+    events: [],
+    eventsArrShort: []
 }
 
 export default (state = initialState, action) => {
@@ -12,9 +13,17 @@ export default (state = initialState, action) => {
 
         case types.GET_REQUEST_SUCCESS_EVENTS: {
             //console.log('events',action.payload.events);
+            
+            const allEvents = action.payload.events;
+            const eventsArr = allEvents.map(event => ({
+                title: event.title,
+                id: event._id
+            }));
+
             return {
                 ...state,
-                events: action.payload.events
+                events: allEvents,
+                eventsArrShort: eventsArr
             };
         }