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.js

@@ -7,7 +7,7 @@ class AdminMenu extends Component {
     constructor(props) {
         super(props);
 
-        this.state = {adminMenu};
+        this.state = { adminMenu };
     }
 
     clickEventHandler = (e) => {
@@ -15,23 +15,24 @@ class AdminMenu extends Component {
         this.props.history.push(elem.path)
     }
 
-    render(){
-        return(
-            <div className = "menu-block">
+    render() {
+        return (
+            <div className="menu-block">
                 {adminMenu.map(el =>
-                                el.text !== "Log out" && el.text !== "Main Page" &&
-                                <div 
-                                className="menu-skew" 
-                                path = {el.path}  
-                                key={el.id} 
-                                id = {el.id} 
-                                onClick = {this.clickEventHandler}
-                                >
-                                    <h2 className = "menu-text">{el.text.toUpperCase()}</h2>
-                                    {/* <Link to={el.path} className = "menu-text"> {el.text.toUpperCase()} </Link> */}
-                                </div>
-							)
-						}
+
+                    el.text !== "Log out" && el.text !== "Main Page" &&
+                    <div
+                        className="menu-skew"
+                        path={el.path}
+                        key={el.id}
+                        id={el.id}
+                        onClick={this.clickEventHandler}
+                    >
+                        <h2 className="menu-text">{el.text.toUpperCase()}</h2>
+                        {/* <Link to={el.path} className = "menu-text">{el.text.toUpperCase()}</Link> */}
+                    </div>
+                )}
+
             </div>
         )
     }

src/components/adminMenu/adminMenu.scss

@@ -10,7 +10,7 @@
     position: relative;
     top: 0px;
     left: 0;
-    height: 350px;
+    height: 220px;
     width: 40%;
     overflow: hidden;
     transition: 0.3s;
@@ -22,11 +22,12 @@
     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%);
        background-image: 
-    url(https://43nnuk1fz4a72826eo14gwfb-wpengine.netdna-ssl.com/wp-content/uploads/2016/09/Jens-Group-Ride_Blog.jpg);
+    url(https://i2-prod.mirror.co.uk/incoming/article12948642.ece/ALTERNATES/s615/0_xxxxxxx.jpg);
     }
 
      &:nth-child(2) {
@@ -34,26 +35,36 @@
       clip-path: polygon(12% 0,100% 0,100% 100%,0% 100%);
       margin-left: -7%;
       flex-grow: 2;
-      
-      background-image: url(https://www.getthegloss.com/media/image/marathon.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%);
-      background-image: url(https://images.fitnessmagazine.mdpcdn.com/sites/fitnessmagazine.com/files/styles/slide/public/800_triathletes-swimming.jpg?itok=vEUQ17sh);
+      background-image: url(https://cdn.pixabay.com/photo/2016/07/07/22/58/cycling-1503365_1280.jpg);
     }
+
     
-     &:last-child {
+     &:nth-child(4) {
       flex-grow: 0;
       clip-path: polygon(24% 0,100% 0,100% 100%,0% 100%);
       margin-left: -8.5%;
-      background-image: url(https://cdn.shopify.com/s/files/1/0235/4757/articles/CMP-201903-SinchBikes_KGorge-Highres-6214_600x300_crop_center.jpg?v=1561970623);
+      background-image: url(https://cdn.pixabay.com/photo/2017/06/06/18/06/jogging-2377983_1280.jpg);
     }
 
-    &:hover {
-      opacity: 0.5;
+    &:nth-child(5) {
+      clip-path: polygon(0 0,100% 0,80% 100%,0% 100%);
+       background-image: 
+    url(https://cdn.pixabay.com/photo/2018/08/09/02/50/person-3593664_1280.jpg);
     }
+
+     &:nth-child(6) {
+      right: -100px;
+      clip-path: polygon(12% 0,100% 0,100% 100%,0% 100%);
+      margin-left: -7%;
+      flex-grow: 2;
+      background-image: url(https://cdn.pixabay.com/photo/2018/08/12/11/02/swim-3600519_1280.jpg);
+    } 
     
     .menu-text{
       color: $color-white;
@@ -61,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;
+      }
     }
   }
 }
@@ -88,10 +107,20 @@
         clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
       }
       
-       &:last-child {
+      &:nth-child(4) {
         clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
         margin-left: 0;
       }
+  
+      &:nth-child(5) {
+        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+      }
+  
+       &:nth-child(6) {
+        right: 0;
+        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+        margin-left: 0;
+      } 
       
       .menu-text{
         font-size: 2rem;

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;

src/conteiners/adminPhotogalaryPage/adminPhotogalaryPage.js

@@ -31,7 +31,7 @@ class AdminAddPhotogalarytPage extends Component {
         console.log('eventList', eventList)
         console.log('gallery', this.props.gallery)
 
-		// console.log("eventTypes", this.state.eventTypes);
+		// console.log("eventTypes", this.state.eventTypes );
 		return (
             <>
                 <AdminHeader />

src/router.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, {useState, useEffect } from "react";
 import { Switch, Route, withRouter } from "react-router-dom";
 import { connect } from "react-redux";
 
@@ -7,6 +7,7 @@ import { getAllEvents } from "./actions/getAllEvents";
 import AdminMainPage from './conteiners/adminMainPage/adminMainPage';
 import AdminAddEventPage from './conteiners/adminAddEventPage/adminAddEventPage';
 import AdminMyEventsPage from './conteiners/adminMyEventsPage/adminMyEventsPage';
+import AdminAddPhotogalarytPage from "./conteiners/adminPhotogalaryPage/adminPhotogalaryPage"
 
 import Home from './conteiners/home/Home';
 import Result from './conteiners/result/Result';
@@ -18,7 +19,6 @@ import Events from './conteiners/events/Events';
 import EventCard from './conteiners/eventCard/EventCard';
 
 import Profile from './conteiners/profile/Profile';
-import AdminAddPhotogalarytPage from "./conteiners/adminPhotogalaryPage/adminPhotogalaryPage"
 
 import { PrivateRoute } from "./private-router";
 
@@ -30,7 +30,8 @@ const route = [
 		exact: true,
 		path: "/",
 		protected: false,
-        component: Home,
+		component: Home,
+		events: true
 	},
 	{
 		id: 2,
@@ -121,6 +122,17 @@ const route = [
 ];
 
 // export const Router = withRouter(({ history }) => {
+
+// 	const [events, setEvents] = useState([]);
+
+// 	useEffect(() => {
+// 		fetch("https://api-marathon.herokuapp.com/api/v1/event")
+// 			.then(response => response.json())
+// 			.then(json => setEvents(json));
+// 	}, []);
+
+// 	console.log('events', events)
+
 // 	useEffect(() => {
 // 		const user = localStorage.getItem("user");
 // 		if (user) {
@@ -136,6 +148,7 @@ const route = [
 
 // 	return (
 // 		<div className="container">
+// 			{console.log('events', events)}
 // 			<Switch>
 // 				{route.map(el => (
 // 					<PrivateRoute
@@ -144,9 +157,19 @@ const route = [
 // 						exact={el.exact}
 // 						path={el.path}
 //                         component={el.component}
-//                         events={el.events}
+//                         events = {el.events && events}
 // 					/>
 // 				))}
+				
+// 				{
+// 					events.map(event =>
+// 						<Route exact
+// 							path={`/events/${event._id}`}
+// 							key={event._id}
+// 							render={ props => (<EventCard event={event} />) }
+// 						/>                            
+// 					)
+// 				}
 // 			</Switch>
 // 		</div>
 // 	);

src/state/adminMenu.js

@@ -2,7 +2,9 @@ export const adminMenu = [
 	{ path: "/admin", id: 0, text: "Main Page", logout: false },
 	{ path: "/admin/add_new_event", id: 1, text: "Add New Event", logout: false },
 	{ path: "/admin/my_events", id: 2, text: "My Events", logout: false },
-    { path: "/admin/photogalary", id: 3, text: "Photogalery", logout: false },
-    { path: "/admin/feedbacks", id: 4, text: "Feedbacks", logout: false },
-	{ path: "/", id: 5, text: "Log out", logout: true }
+	{ path: "/admin/feedbacks", id: 3, text: "Feedbacks", logout: false },
+    { path: "/admin/photogalary", id: 4, text: "Add Photogalery", logout: false },
+	{ path: "/admin/results", id: 5, text: "Add Results", logout: false },
+	{ path: "/", id: 6, text: "Go to WebSite", logout: false },
+	{ path: "/", id: 7, text: "Log out", logout: true }
 ];