added filter on the gallery page

src/actions/photogalaryActions.js

@@ -44,10 +44,10 @@ const getPhotogalaryRequestFail = payload => ({
 	payload
 });
 
-export const getPhotogalary = () => dispatch => {
+export const getPhotogalary = (title = 'All events') => dispatch => {
 	dispatch(getPhotogalaryRequest());
 	return axios
-		.get(photogalaryURL)
+		.get(title !== 'All events' ? `${photogalaryURL}/?eventTitle=${title}` : photogalaryURL)
 		.then(res => dispatch(getPhotogalaryRequestSuccess(res)))
 		.catch(err => dispatch(getPhotogalaryRequestFail(err)));
 };

src/components/filtersEvents/FiltersEvents.js

@@ -17,6 +17,7 @@ let FiltersEvents = props => {
         <form className="form-filter" onSubmit={handleSubmit(submit)}>
             <div>
                 <Field name="eventType" label={labelType} component={customSelect}>
+                    <option value="All events">All events</option>
                     {eventTypes.map( (elem,ind) => <option key={ind} value={elem}>{elem}</option>)}
                 </Field>
             </div>

src/components/filtersReviews/filtersReviews.js

@@ -17,7 +17,7 @@ let FiltersReviews = props => {
         <form className="form-filter" onSubmit={handleSubmit(submit)}>
             <div>
                 <Field name="eventType" label={labelType} component={customSelect}>
-                    <option>All events</option>
+                    <option value="All events">All events</option>
                     {eventTypes.map( elem => <option key={elem.id} value={elem.id}>{elem.title}</option>)}
                 </Field>
             </div>

src/conteiners/events/Events.js

@@ -17,7 +17,7 @@ export class Events extends React.Component {
 
     render() {
         const { events, getAllEvents } = this.props;
-        const eventTypes = ['All events', 'Marathon', 'Triathlon', 'Cycling'];
+        const eventTypes = ['Marathon', 'Triathlon', 'Cycling'];
         //console.log(events);
         return (
             <>

src/conteiners/gallery/Gallery.js

@@ -2,20 +2,23 @@ import React from 'react';
 import { connect } from "react-redux";
 
 import { getPhotogalary } from "../../actions/photogalaryActions";
+import { getAllEvents } from "../../actions/getAllEvents";
 
 import './gallery.scss';
 
 import Sidebar from '../../components/sidebar/Sidebar';
 import Footer from '../../components/footer/Footer';
+import FiltersEvents from '../../components/filtersEvents/FiltersEvents';
 
 class Gallery extends React.Component {
     componentDidMount() {
-        this.props.getPhotogalary()
+        this.props.getPhotogalary();
+        this.props.getAllEvents();
     }
 
     render() {
-        const { gallery } = this.props;
-        //console.log('gallery', this.props.gallery);
+        const { gallery, eventsArrTitles, getPhotogalary } = this.props;
+        //console.log('gallery', gallery);
         return (
             <>
                 <Sidebar/>
@@ -25,9 +28,15 @@ class Gallery extends React.Component {
                     </div>
                 </div>
                 <div className="container-wrap">
+
+                    <div className="events-filters">
+                        <h4>Gallery filter</h4>
+                        <FiltersEvents labelType="Event Title" getRequest={getPhotogalary} eventTypes={eventsArrTitles} />
+                    </div>
+
                     <div className="gallery-wrap">
                         {
-                            gallery.map((item,ind) => 
+                            gallery.length !== 0 ? gallery.map((item,ind) => 
                                 <div className="gallery-item" key={ind}>
                                     <h3>{item.eventTitle}</h3>
                                     <h5>{item.eventType}</h5>
@@ -44,7 +53,7 @@ class Gallery extends React.Component {
                                         }
                                     </div>
                                 </div>
-                            )
+                            ) : <p className="not-found">Not found gallery</p>
                         }
                     </div>
                 </div>
@@ -56,11 +65,12 @@ class Gallery extends React.Component {
 
 const mapStateToProps = state => {
     return {
-        gallery: state.photogalaryReducer.gallery
+        gallery: state.photogalaryReducer.gallery,
+        eventsArrTitles: state.getEvents.eventsArrTitles
     };
 };
 
 export default connect(
     mapStateToProps,
-    { getPhotogalary }
+    { getPhotogalary, getAllEvents }
 )(Gallery);

src/conteiners/result/Result.js

@@ -29,7 +29,7 @@ export class Result extends React.Component {
 
                 <div className="container-wrap">
                     <div className="events-filters">
-                        <h4>Events filter</h4>
+                        <h4>Result filter</h4>
                         <FiltersReviews labelType="Event Title" getRequest={getResults} eventTypes={eventsArr} />
                     </div>
 

src/conteiners/reviews/Reviews.js

@@ -31,7 +31,7 @@ export class Reviews extends React.Component {
                 <div className="container-wrap">
 
                     <div className="events-filters">
-                        <h4>Events filter</h4>
+                        <h4>Reviews filter</h4>
                         <FiltersReviews labelType="Event Title" getRequest={getAllReviews} eventTypes={eventsArr} />
                     </div>
 

src/reducers/getAllEvents.js

@@ -2,6 +2,7 @@ import * as types from "../actionTypes/actionTypes";
 
 const initialState = {
     events: [],
+    eventsArrTitles: [],
     eventsArrShort: []
 }
 
@@ -15,6 +16,9 @@ export default (state = initialState, action) => {
             //console.log('events',action.payload.events);
             
             const allEvents = action.payload.events;
+
+            const eventsTitles = allEvents.map(event => event.title); 
+
             const eventsArr = allEvents.map(event => ({
                 title: event.title,
                 id: event._id
@@ -23,6 +27,7 @@ export default (state = initialState, action) => {
             return {
                 ...state,
                 events: allEvents,
+                eventsArrTitles: eventsTitles,
                 eventsArrShort: eventsArr
             };
         }

src/styles/custom.scss

@@ -1,10 +1,6 @@
-/*html {
-    min-height: 100vh;
+html, body, #root {
     height: 100%;
 }
-body, #root {
-    height: 100vh;
-}*/
 
 .button-position-bottom {
 	max-width: 1000px;