the filter is created on the events page

src/actions/getAllEvents.js

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

src/components/filtersEvents/FiltersEvents.js

@@ -4,32 +4,19 @@ import { Field, reduxForm } from 'redux-form';
 import './filtersEvents.scss';
 
 let FiltersEvents = props => {
-    const { handleSubmit } = props;
+    const { handleSubmit, getAllEvents } = props;
 
     const submit = value => {
         console.log(value);
-        //postLoginSubmit(value);
+        getAllEvents(value.typeEvent);
     };
 
     return (
         <form className="form" onSubmit={handleSubmit(submit)}>
-            <div>
-                <label htmlFor="country">Country</label>
-                <Field name="country" component="select">
-                    <option value="country1">country1</option>
-                    <option value="country2">country2</option>
-                </Field>
-            </div>
-            <div>
-                <label htmlFor="city">City</label>
-                <Field name="city" component="select">
-                    <option value="city1">city1</option>
-                    <option value="city2">city2</option>
-                </Field>
-            </div>
             <div>
                 <label htmlFor="typeEvent">Type event</label>
                 <Field name="typeEvent" component="select">
+                    <option value="All events">All events</option>
                     <option value="Marathon">Marathon</option>
                     <option value="Triathlon">Triathlon</option>
                     <option value="Cycling">Cycling</option>

src/conteiners/events/Events.js

@@ -16,8 +16,8 @@ export class Events extends React.Component {
     }
 
     render() {
-        const { events } = this.props;
-        //console.log(events);
+        const { events, getAllEvents } = this.props;
+        console.log(events);
         return (
             <>
                 <Sidebar />
@@ -26,8 +26,8 @@ export class Events extends React.Component {
                         <h2>Events</h2>
                     </div>
                     <div className="events-filters">
-                        <h4>Events filters</h4>
-                        <FiltersEvents />
+                        <h4>Events filter</h4>
+                        <FiltersEvents getAllEvents={getAllEvents}/>
                     </div>
                     
                     <div className="events-content">
@@ -35,7 +35,7 @@ export class Events extends React.Component {
 
                         <div className="events-list">
                             {
-                                events.map(event => <EventInfoShort
+                               events.length !== 0 ? events.map(event => <EventInfoShort
                                     key={event._id}
                                     title={event.title}
                                     country={event.country}
@@ -43,7 +43,7 @@ export class Events extends React.Component {
                                     id={event._id}
                                     eventDate={event.eventDate}
                                     imgSrc={event.mainBannerPicture} />
-                                )
+                                ) : <p className="not-found">Not found events</p>
                             }
                         </div>
                     </div>                    

src/styles/custom.scss

@@ -83,4 +83,12 @@ i {
     &:hover {
         background-color: $color-blue;
     }
+}
+
+.not-found {
+    font-size: 2.1rem;
+    margin-top: 2rem;
+    text-align: center;
+    width: 100%;
+    color: $color-blue;
 }