router

src/actions/adminMainPageActions.js

@@ -1,6 +1,8 @@
 import axios from "axios";
 import * as types from "../actionTypes/actionTypes"
 
+const eventURL = 'https://api-marathon.herokuapp.com/api/v1/event'
+
 export const editEvent = payload => {
 	return {
 		type: types.EDIT_EVENT,
@@ -79,10 +81,10 @@ const getEventsRequestFail = payload => ({
 	payload
 });
 
-export const getEvents = () => dispatch => {
+export const getEvents = (type = 'Select Event Type') => dispatch => {
 	dispatch(getEventsRequest());
 	return axios
-		.get("https://api-marathon.herokuapp.com/api/v1/event")
+		.get( type !== 'Select Event Type' ? `${eventURL}/?eventType=${type}` : eventURL)
 		.then(res => dispatch(getEventsRequestSuccess(res)))
 		.catch(err => dispatch(getEventsRequestFail(err)));
 };

src/components/adminMenu/adminMenu.scss

@@ -22,6 +22,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    transition: .5s ease-in-out;
     
     &:first-child {
       clip-path: polygon(0 0,100% 0,80% 100%,0% 100%);
@@ -34,14 +35,12 @@
       clip-path: polygon(12% 0,100% 0,100% 100%,0% 100%);
       margin-left: -7%;
       flex-grow: 2;
-      //  https://cdn.pixabay.com/photo/2014/01/24/13/32/marathon-250987_1280.jpg
       background-image: url(https://cdn.pixabay.com/photo/2014/01/24/13/32/marathon-250987_1280.jpg);
     } 
     
      &:nth-child(3){
       flex-grow: 2;
       clip-path: polygon(0 0,100% 0,86% 100%,0% 100%);
-      //https://cdn.pixabay.com/photo/2016/07/07/22/58/cycling-1503365_1280.jpg
       background-image: url(https://cdn.pixabay.com/photo/2016/07/07/22/58/cycling-1503365_1280.jpg);
     }
 
@@ -64,13 +63,8 @@
       clip-path: polygon(12% 0,100% 0,100% 100%,0% 100%);
       margin-left: -7%;
       flex-grow: 2;
-      // https://cdn.pixabay.com/photo/2018/08/12/11/02/swim-3600519_1280.jpg
       background-image: url(https://cdn.pixabay.com/photo/2018/08/12/11/02/swim-3600519_1280.jpg);
     } 
-
-    &:hover {
-      opacity: 0.5;
-    }
     
     .menu-text{
       color: $color-white;
@@ -78,6 +72,14 @@
       letter-spacing: 0.2;
       font-weight: 600;
       text-shadow: 3px 3px 3px #000;
+      transition: .5s ease-in-out;
+    }
+    &:hover {
+      opacity: 0.75;
+      .menu-text{
+        color: $color-mint;
+        font-size: 3.5rem;
+      }
     }
   }
 }

src/components/adminPhotogalary/adminPhotogalaryReduxForm.js

@@ -9,7 +9,7 @@ class PhotogalaryReduxForm extends Component {
 
     state = {
         addPhotogalaryInitialValue,
-        filteredEventList: [{ _id: 0, title: 'Choose Event' }]
+        filteredEventList: []
     }
 
     submit = values => {
@@ -47,7 +47,7 @@ class PhotogalaryReduxForm extends Component {
                     ...prevState.addPhotogalaryInitialValue,
                     [name]: value
                 },
-                filteredEventList: prevState.filteredEventList.concat(
+                filteredEventList: [{id: 1, title: "Choose event"}].concat(
                     this.props.eventList.filter(el => el.eventType === value)
                 )
             };
@@ -123,6 +123,7 @@ class PhotogalaryReduxForm extends Component {
                     required
                     component={customSelect}
                     onChange={this.onChangeTypeHandler}
+                    className="form-block__select -wide"
                 >
                     {eventTypes.map(elem => <option key={elem.id} value={elem.optionName}>{elem.optionName}</option>)}
                 </Field>
@@ -133,6 +134,7 @@ class PhotogalaryReduxForm extends Component {
                     required
                     component={customSelect}
                     onChange={this.onChangeTitleHandler}
+                    className="form-block__select -wide"
                 >
                     {filteredEventList.map(elem => <option key={elem._id} value={elem.title}>{elem.title}</option>)}
                 </Field>

src/components/customFields/customSelect/customSelect.js

@@ -1,11 +1,11 @@
 import React from "react";
 import "./customSelect.scss";
 
-export const customSelect = ({ label, input, children, id, meta }) => {
+export const customSelect = ({ label, input, children, id, className = "form-block__select", meta }) => {
 	return (
-		<div className="form-block__select" id = {'select_'+id}>
-			<label className="select-box" htmlFor={id}>{label}</label>
-			<select {...input} className = "select-box__input" >{children}</select>
+		<div className={className} id = {'select_'+id}>
+			<label className= "select-box" htmlFor={id}>{label}</label>
+			<select {...input} className = "select-box__input">{children}</select>
             {meta.error && meta.touched && (
 				<span className="error">{meta.error}</span>
 			)}

src/components/customFields/customSelect/customSelect.scss

@@ -1,46 +1,50 @@
 .form-block__select{
     width: 40%;
     margin-right: 10%;
-.select-box {
-	display: flex;
-	flex-direction: column;
-	
-	font-size: 1.3rem;
-	font-weight: 600;
+	.select-box {
+		display: flex;
+		flex-direction: column;
+		
+		font-size: 1.3rem;
+		font-weight: 600;
 
-	&__input {
-		font-family: inherit;
-		color: inherit;
-		font-size: 1.5rem;
-		padding: 0.5rem 1rem;
-		border-radius: 2px;
-		background-color: rgba(255, 255, 255, 0.5);
-		border: none;
-		border: 2px solid #eee;
-		width: 100%;
-		display: block;
-        transition: all 0.3s;
-        margin-bottom: 1rem;
+		&__input {
+			font-family: inherit;
+			color: inherit;
+			font-size: 1.5rem;
+			padding: 0.5rem 1rem;
+			border-radius: 2px;
+			background-color: rgba(255, 255, 255, 0.5);
+			border: none;
+			border: 2px solid #eee;
+			width: 100%;
+			display: block;
+			transition: all 0.3s;
+			margin-bottom: 1rem;
 
-		&:focus {
-			outline: none;
-			box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
-			border: 2px solid #5acec2;
-		}
+			&:focus {
+				outline: none;
+				box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
+				border: 2px solid #5acec2;
+			}
 
-		&--fail {
-			border-bottom: 3px solid #9e4560;
-		}
+			&--fail {
+				border-bottom: 3px solid #9e4560;
+			}
 
-		&::placeholder {
-			font-size: 1.3rem;
-			color:  #cecece;
+			&::placeholder {
+				font-size: 1.3rem;
+				color:  #cecece;
+			}
 		}
-    }
-    &____option{
-        &:hover {
-            background-color: #5acec2;
-        }
-    }
-}
+		&____option{
+			&:hover {
+				background-color: #5acec2;
+			}
+		}
+	}
+
+	&.-wide{
+		width: 80%;
+	}
 }

src/conteiners/adminMyEventsPage/adminMyEventsPage.js

@@ -11,38 +11,32 @@ import AdminHeader from "../../components/adminHeader/adminHeader";
 import ConfirmationMessage from "../../components/confirmationMessage/confirmationMessage";
 // import {customSelect} from "../../components/customFields/customSelect/customSelect";
 import EventInfoShort from "../../components/eventInfoShort/EventInfoShort";
+import { customSelect as CustomSelect } from "../../components/customFields/customSelect/customSelect";
 
 class AdminAddEventPage extends Component {
 
     state = {
+        filteredEventList: [],
         // confirmationMessageFlag: false,
         // editFormFlag: false
     };
-
+    //?eventType=''
     componentDidMount() {
         this.props.getEvents();
     }
 
-    // resetInitValue = () => this.setState({ eventFormInitialValue: {} });
-
-    // showConfirmationMessage = () => this.setState({confirmationMessageFlag: true });
-    // closeConfirmationMessage = () => this.setState({confirmationMessageFlag: false });
-
-
-    // editItem = item =>
-    // this.setState(prevState => ({
-    //     ...prevState,
-    //     showFormFlag: true,
-    //     eventList: prevState.eventList.map(el => (el.id === item.id ? item : el))
-    // }));
-
-    // setInitialValues = id =>
-    // this.setState(prevState => {
-    //     console.log('prevState', prevState)
-    //     return {
-    //     ...prevState,
-    //     eventFormInitialValue: prevState.eventList.find(el => el._id === id)
-    // }});
+    onChangeTypeHandler = e => {
+        const { name, value } = e.target;
+        this.props.getEvents(value)
+        console.log('eventInput', value)
+        // this.setState(prevState => {
+        //     console.log('prevStateInput', prevState)
+        //     return {
+        //         ...prevState,
+        //         filteredEventList: this.props.eventList.filter(el => el.eventType === value)
+        //     };
+        // });
+    };
 
     render() {
         const {
@@ -52,7 +46,7 @@ class AdminAddEventPage extends Component {
             editEvent,
             eventFormInitialValue,
             editFormFlag,
-            // eventTypes
+            eventTypes
         } = this.props
 
         console.log('eventList', eventList)
@@ -66,7 +60,12 @@ class AdminAddEventPage extends Component {
                     <div className="event-page__content">
                         <h2 className="event-page__title">MY EVENTS</h2>
 
+                        <select className="event-page__select" onChange={this.onChangeTypeHandler} label="Event Type">
+                                    {eventTypes.map(elem => <option key={elem.id} value={elem.optionName}>{elem.optionName}</option>)}
+                                </select>
+
                         <div className="events-list">
+
                             {eventList && eventList.map(el =>
                                 <div className="event-page__container" key={el._id}>
 
@@ -89,24 +88,9 @@ class AdminAddEventPage extends Component {
                             )}
                         </div>
 
-                        {editFormFlag && <Redirect to='/admin/add_new_event' /> 
-                            // <Form
-                            //     eventFormInitialValue={eventFormInitialValue}
-                            //     eventTypes={eventTypes}
-
-                            //     postNewEvent={postNewEvent}
-                            //     editItem={this.editItem}
-                            //     resetInitValue={this.resetInitValue}
-                            //     showConfirmationMessage={this.showConfirmationMessage}
-                            // />
-                        }
+                        {editFormFlag && <Redirect to='/admin/add_new_event' /> }
                     </div>
                 </div>
-
-                {/* {this.state.confirmationMessageFlag &&
-                    <ConfirmationMessage closeMessage={this.closeConfirmationMessage}>
-                        <div className="text">Event has beed changed.</div>
-                    </ConfirmationMessage >} */}
             </>
         );
     }
@@ -115,7 +99,7 @@ class AdminAddEventPage extends Component {
 const mapStateToProps = state => ({
     eventList: state.adminMainPageReducer.eventList,
     eventFormInitialValue: state.adminMainPageReducer.eventFormInitialValue,
-    // eventTypes: state.adminMainPageReducer.eventTypes,
+    eventTypes: state.adminMainPageReducer.eventTypes,
     editFormFlag: state.adminMainPageReducer.editFormFlag,
 });
 

src/conteiners/adminMyEventsPage/adminMyEventsPage.scss

@@ -9,8 +9,34 @@
 	background: -o-linear-gradient(top,  #fff, $color-blue); /* Opera 11.1-12 */
 	background: linear-gradient(to bottom,  #fff, $color-blue);
 
+	&__select{
+		font-family: inherit;
+		color: inherit;
+		font-size: 1.5rem;
+		padding: 0.5rem 1rem;
+		border-radius: 2px;
+		background-color: rgba(255, 255, 255, 0.5);
+		border: none;
+		border: 2px solid #eee;
+		width: 100%;
+		display: block;
+		transition: all 0.3s;
+		margin-bottom: 1rem;
+
+		&:focus {
+			outline: none;
+			box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
+			border: 2px solid #5acec2;
+		}
+	}
+
+	.events-list{
+		margin-top: 3%;
+	}
+
 	&__content {
 		max-width: 1000px;
+		min-height: 100vh;
 		position: relative;
 		margin: auto;
 		padding: 2rem;