merge with dev

src/actionTypes/actionTypes.js

@@ -80,4 +80,8 @@ export const POST_RESULTS_REQUEST_FAIL = "POST_RESULTS_REQUEST_FAIL";
 
 export const GET_PHOTOGALARU_EVENTS_REQUEST = "GET_PHOTOGALARU_EVENTS_REQUEST";
 export const GET_PHOTOGALARU_EVENTS_REQUEST_SUCCESS = "GET_PHOTOGALARU_EVENTS_REQUEST_SUCCESS";
-export const GET_PHOTOGALARU_EVENTS_REQUEST_FAIL = "GET_PHOTOGALARU_EVENTS_REQUEST_FAIL";
+export const GET_PHOTOGALARU_EVENTS_REQUEST_FAIL = "GET_PHOTOGALARU_EVENTS_REQUEST_FAIL";
+
+export const GET_RESULT = "GET_RESULT";
+export const GET_RESULT_SUCCESS = "GET_RESULT_SUCCESS";
+export const GET_RESULT_ERROR = "GET_RESULT_ERROR";

src/actions/adminMainPageActions.js

@@ -28,7 +28,7 @@ export const postNewEvent = payload => {
 	return async dispatch => {
 		dispatch(postNewEventRequest());
 		try {
-			const { data } = await axios.post("https://api-marathon.herokuapp.com/api/v1/event", payload);
+			const { data } = await axios.post(eventURL, payload);
 			dispatch(postNewEventRequestSuccess(data));
 			console.log("New Event Posted", payload)
 		} catch (error) {
@@ -55,7 +55,7 @@ export const changeEvent = (payload) => {
 	return async dispatch => {
 		dispatch(editEventRequest());
 		try {
-			await axios.put(`https://api-marathon.herokuapp.com/api/v1/event/${payload._id} `, payload);
+			await axios.put(`${eventURL}/${payload._id} `, payload);
 			dispatch(editEventRequestSuccess({payload, id: payload._id}));
 			console.log("Event Changed", payload)
 		} catch (error) {
@@ -133,7 +133,7 @@ const removeEventFail = payload => ({
 export const removeEvent = _id => dispatch => {
 	dispatch(removeEventRequest());
 	return axios
-		.delete(` https://api-marathon.herokuapp.com/api/v1/event/${_id}`)
+		.delete(`${eventURL}/${_id}`)
 		.then(res => dispatch(removeEventSuccess({ res, _id })))
 		.catch(err => dispatch(removeEventFail(err)));
 };

src/actions/getAllEvents.js

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

src/actions/getRequestEvent.js

@@ -1,5 +1,7 @@
 import * as types from "../actionTypes/actionTypes";
 
+const urlEvent = 'https://api-marathon.herokuapp.com/api/v1/event';
+
 export const getEventCard = payload => ({
     type: types.GET_REQUEST_EVENT_CARD,
     payload
@@ -17,7 +19,7 @@ export const getEventCardError = payload => ({
 
 export const getRequestEvent = id => {
     return dispatch => {
-        let promise = fetch(`https://api-marathon.herokuapp.com/api/v1/event?_id=${id}`)
+        let promise = fetch(`${urlEvent}?_id=${id}`)
 
         dispatch(getEventCard())
 

src/actions/getResults.js

@@ -0,0 +1,31 @@
+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
+});
+
+export const getResultsSuccess = payload => ({
+    type: types.GET_RESULT_SUCCESS,
+    payload
+});
+
+export const getResultsError = payload => ({
+    type: types.GET_RESULT_ERROR,
+    payload
+});
+
+export const getResults = (type = 'All events') => {
+    return dispatch => {
+        let promise = fetch(type !== 'All events' ? `${resultsURL}/?event=${type}` : resultsURL)
+
+        dispatch(getResultsSend())
+
+        promise.then(
+            data => data.json().then(data => dispatch(getResultsSuccess(data))),
+            error => dispatch(getResultsError(error))
+        )
+    }
+}

src/actions/getUserInfo.js

@@ -1,5 +1,7 @@
 import * as types from "../actionTypes/actionTypes";
 
+const urlUser = 'https://api-marathon.herokuapp.com/api/v1/users';
+
 export const getUserInfoRequest = payload => ({
     type: types.GET_USERS_INFO,
     payload
@@ -17,7 +19,7 @@ export const getUserInfoRequestError = payload => ({
 
 export const getUserInfo = id => {
     return dispatch => {
-        let promise = fetch(`https://api-marathon.herokuapp.com/api/v1/users/${id}`)
+        let promise = fetch(`${urlUser}/${id}`)
 
         dispatch(getUserInfoRequest())
 

src/actions/logout.js

@@ -18,7 +18,6 @@ export const getLogoutUserError = payload => ({
 export const getLogoutUserSubmit = () => {
     return dispatch => {
         let promise = fetch("https://api-marathon.herokuapp.com/api/v1/auth/logout")
-        //console.log('getLogoutUserSubmit');
 
         dispatch(getLogoutUser())
 

src/actions/photogalaryActions.js

@@ -1,12 +1,8 @@
 import axios from "axios";
 import * as types from "../actionTypes/actionTypes"
 
-// export const photogalaryOnchange = payload => {
-// 	return {
-// 		type: types.PHOTOGALARY_ONCHAGE,
-// 		payload
-// 	};
-// };
+const photogalaryURL = "https://api-marathon.herokuapp.com/api/v1/gallery"
+const eventURL = 'https://api-marathon.herokuapp.com/api/v1/event'
 
 // GET EVENTS
 const getEventsRequest = payload => ({
@@ -27,7 +23,7 @@ const getEventsRequestFail = payload => ({
 export const getEvents = () => dispatch => {
 	dispatch(getEventsRequest());
 	return axios
-		.get("https://api-marathon.herokuapp.com/api/v1/event")
+		.get(eventURL)
 		.then(res => dispatch(getEventsRequestSuccess(res)))
 		.catch(err => dispatch(getEventsRequestFail(err)));
 };
@@ -48,10 +44,10 @@ const getPhotogalaryRequestFail = payload => ({
 	payload
 });
 
-export const getPhotogalary = () => dispatch => {
+export const getPhotogalary = (title = 'All events') => dispatch => {
 	dispatch(getPhotogalaryRequest());
 	return axios
-		.get("https://api-marathon.herokuapp.com/api/v1/gallery")
+		.get(title !== 'All events' ? `${photogalaryURL}/?eventTitle=${title}` : photogalaryURL)
 		.then(res => dispatch(getPhotogalaryRequestSuccess(res)))
 		.catch(err => dispatch(getPhotogalaryRequestFail(err)));
 };
@@ -74,7 +70,7 @@ export const postPhotogalary = payload => {
 	return async dispatch => {
 		dispatch(postPhotogalaryRequest());
 		try {
-			const { data } = await axios.post("https://api-marathon.herokuapp.com/api/v1/gallery", payload);
+			const { data } = await axios.post(photogalaryURL, payload);
 			dispatch(postPhotogalaryRequestSuccess(data));
 			console.log("Photogalary Posted", payload)
 		} catch (error) {
@@ -101,7 +97,7 @@ export const putPhotogalary = (payload) => {
 	return async dispatch => {
 		dispatch(putPhotogalaryRequest());
 		try {
-			await axios.put(`https://api-marathon.herokuapp.com/api/v1/gallery/:${payload._id} `, payload);
+			await axios.put(`${photogalaryURL}/:${payload._id} `, payload);
 			dispatch(putPhotogalaryRequestSuccess({payload, id: payload._id}));
 			console.log("PUT Photogalary success", payload)
 		} catch (error) {

src/actions/registrationEvent.js

@@ -1,23 +1,24 @@
 import * as types from "../actionTypes/actionTypes";
+const urlRegEvent = 'https://api-marathon.herokuapp.com/api/v1/eventUsers';
 
 export const regEvent = payload => ({
-    type: types.POST_REQUEST_CHECKIN,
+    type: types.POST_REGISTRATION_EVENT,
     payload
 });
 
 export const regEventSuccess = payload => ({
-    type: types.POST_REQUEST_SUCCESS_CHECKIN,
+    type: types.POST_REGISTRATION_EVENT_SUCCESS,
     payload
 });
 
 export const regEventError = payload => ({
-    type: types.POST_REQUEST_ERROR_CHECKIN,
+    type: types.POST_REGISTRATION_EVENT_ERROR,
     payload
 });
 
 export const regEventSubmit = payload => {
     return dispatch => {
-        let promise = fetch("https://api-marathon.herokuapp.com/api/v1/eventUsers",
+        let promise = fetch(urlRegEvent,
             {
                 method: 'POST',
                 body: JSON.stringify(payload),

src/actions/reviews.js

@@ -1,5 +1,7 @@
 import * as types from "../actionTypes/actionTypes";
 
+const reviewsURL = 'https://api-marathon.herokuapp.com/api/v1/feedback';
+
 export const getReviews = payload => ({
     type: types.GET_REQUEST_REVIEWS,
     payload
@@ -15,9 +17,9 @@ export const getReviewsError = payload => ({
     payload
 });
 
-export const getAllReviews = () => {
+export const getAllReviews = (type = 'All events') => {
     return dispatch => {
-        let promise = fetch("https://api-marathon.herokuapp.com/api/v1/feedback")
+        let promise = fetch(type !== 'All events' ? `${reviewsURL}/?event=${type}` : reviewsURL)
 
         dispatch(getReviews())
 
@@ -45,7 +47,7 @@ export const postReviewError = payload => ({
 
 export const postReviewSubmit = payload => {
     return dispatch => {
-        let promise = fetch("https://api-marathon.herokuapp.com/api/v1/feedback",
+        let promise = fetch(reviewsURL,
             {
                 method: 'POST',
                 body: JSON.stringify(payload),

src/components/adminEventElement/adminEventElement.js

@@ -1,15 +0,0 @@
-import React from 'react'
-import "./adminEventElement.scss";
-
-
-export default ({img, title, id, onClick, onClickEdit, onClickDelete,  ...rest}) => (
-    <div id = {id} className = "event-tank" color = "#f6f1bf" onClick = {onClick} > 
-        <div className = "event-title">{title}</div>
-        <img className = "event-image" src = {img} alt = "event"/>
-        <div className ="event-buttons-conteiner">
-            <button className="event-button" onClick = {onClickEdit}>Edit Event</button>
-            <button className="event-button" onClick = {onClickDelete}>Delete Event</button>
-        </div>
-        {/* <div className = "event-title">{title}</div> */}
-    </div>
-)

src/components/adminEventElement/adminEventElement.scss

@@ -1,67 +0,0 @@
-@import "../../styles/variables";
-
-// .event-tank {
-//     display:flex;
-//     flex-direction: column;
-//     justify-content: top;
-//     text-align: center;
-//     padding: 10px;
-//     margin: 5px;
-//     // border: 2px solid $color-black;	
-// }
-// .event-image {
-//     width: 100%;
-//     height: 25rem;
-//     padding: 10px;
-//     border: 2px solid $color-mint;
-//     margin-bottom: 5px;
-// }
-// .event-image:hover {
-//     // box-shadow: inset 10px 10px 10px $color-mint;
-//     background: $color-mint;
-// }
-
-// .event-buttons-conteiner{
-//     display: flex;
-//     flex-direction: row;
-//     justify-content: space-between;
-//     margin: 10px;
-// }
-
-// .event-button{
-//     width: 45%;
-//     background-color: $color-mint;
-//     padding: 1rem;
-//     border: none;
-//     border-radius: 3px;
-//     color: #fff;
-//     font-weight: 600;
-// 	font-size: 1.2rem;
-// 	transition: 0.2s;
-// 	// padding: 1rem 5rem;
-// }
-
-// .event-button:hover{
-//     outline: none;
-//     transform: translateY(-1px);
-//     box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
-//     &:after {
-//         transform: scaleX(1.4) scaleY(1.6);
-//         opacity: 0;
-//     }
-// }
-// .event-title {
-//     color: $color-black;
-//     font-size: 1.3rem;
-//     font-weight: 800;
-// }
-// @media (max-width: 600px) {
-//     .event-tank {
-//         padding: 10px;
-//         margin: 0;	
-//     }
-//     .event-title {
-//         font-size: 1rem;
-//         font-weight: 600;
-//     }
-// }

src/components/adminHeader/adminHeader.js

@@ -1,30 +1,30 @@
 import React from "react";
 import { Link, withRouter } from "react-router-dom";
-import { connect } from "react-redux";
 import "./adminHeader.scss";
 import { adminMenu } from "../../state/adminMenu";
 
 const adminHeader = props => {
-	
+
 	const logout = (e) => {
-        localStorage.removeItem('user');
-        props.history.push('/')
-    }
+		localStorage.removeItem('user');
+		props.history.push('/')
+	}
 
 	return (
 		<header className="header" id="header">
 			<div className="header__left-wrapper">
-				<div className="header__logo-box">                    
-				<div className="header__logo">
-                        <Link to="/admin">
-                            Just_<span>tri</span>_it
+				<div className="header__logo-box">
+					<div className="header__logo">
+						<Link to="/admin">
+							Just_<span>tri</span>_it
                         </Link>
-                </div></div>
+					</div>
+				</div>
 				<nav className="header__nav">
 					<ul className="header__list">
 						{adminMenu.map(el =>
 							el.hideWhenAuth && props.user ? null : (
-								<li className="header__item" key={el.id} onClick = { el.logout ? logout : null}>
+								<li className="header__item" key={el.id} onClick={el.logout ? logout : null}>
 									<Link to={el.path}>{el.text}</Link>
 								</li>
 							)
@@ -36,7 +36,4 @@ const adminHeader = props => {
 	);
 };
 
-const mapStateToProps = state => ({
-});
-
-export default connect(mapStateToProps)(withRouter(adminHeader));
+export default withRouter(adminHeader);

src/components/adminMenu/adminMenu.js

@@ -18,7 +18,6 @@ class AdminMenu extends Component {
         return (
             <div className="menu-block">
                 {adminMenu.map(el =>
-
                     el.text !== "Log out" && el.text !== "Main Page" &&
                     <div
                         className="menu-skew"
@@ -26,10 +25,8 @@ class AdminMenu extends Component {
                         onClick={this.clickEventHandler.bind(null, el.path)}
                     >
                         <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

@@ -26,8 +26,7 @@
     
     &:first-child {
       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);
+      background-image: url(https://cdn.pixabay.com/photo/2018/08/09/02/50/person-3593664_1280.jpg);
     }
 
      &:nth-child(2) {
@@ -43,8 +42,7 @@
       clip-path: polygon(0 0,100% 0,86% 100%,0% 100%);
       background-image: url(https://cdn.pixabay.com/photo/2016/07/07/22/58/cycling-1503365_1280.jpg);
     }
-
-    
+   
      &:nth-child(4) {
       flex-grow: 0;
       clip-path: polygon(24% 0,100% 0,100% 100%,0% 100%);
@@ -54,18 +52,9 @@
 
     &:nth-child(5) {
        width: 100%;
-       background-image: 
-    url(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(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;
       font-size: 3rem;
@@ -74,6 +63,7 @@
       text-shadow: 3px 3px 3px #000;
       transition: .5s ease-in-out;
     }
+    
     &:hover {
       opacity: 0.75;
       .menu-text{

src/components/adminPhotogalary/adminPhotogalary.scss

@@ -24,10 +24,10 @@
 	}
 
 	&__photogalary-form__selects{
-	position: relative;
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
+		position: relative;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
 	}
 
 	&__text {
@@ -60,8 +60,7 @@
     &__picture-input {
         display: flex;
         flex-direction: column;
-        width: 100%;
-    
+        width: 100%;    
         font-size: 1.3rem;
         font-weight: 600;
     }
@@ -115,8 +114,7 @@
 			color: $color-mint;
 			border: 1px solid $color-mint;
 			background-color: #eee;
-        }
-        
+        }        
     }
 
 	&__submit-btn {
@@ -154,5 +152,4 @@
 			background-color: #eee;
 		}
 	}
-
 }

src/components/adminPhotogalary/adminPhotogalaryReduxForm.js

@@ -13,24 +13,14 @@ class PhotogalaryReduxForm extends Component {
     }
 
     submit = values => {
-        // console.log('submit props', this.props)
-        // console.log('submit state', this.state)
         const pictures = this.state.addPhotogalaryInitialValue.pictures.reduce((prev, elem) => {
             return prev.concat(elem.value);
         }, []);
 
-        // const eventId = this.props.eventList.find(
-        //     event => event.title === this.state.addPhotogalaryInitialValue.eventTitle
-        // )._id
-
         const submitValues = {
             ...this.state.addPhotogalaryInitialValue,
             pictures: pictures,
-            // _id: eventId
         }
-        // console.log('submit eventId', eventId)
-        console.log('submit values', submitValues)
-        // console.log('pictures', pictures)
 
         this.props.submitHandler(submitValues);
         this.props.reset()
@@ -38,16 +28,15 @@ class PhotogalaryReduxForm extends Component {
 
     onChangeTypeHandler = e => {
         const { name, value } = e.target;
-        // console.log('eventInput', value)
+
         this.setState(prevState => {
-            console.log('prevStateInput', prevState)
             return {
                 ...prevState,
                 addPhotogalaryInitialValue: {
                     ...prevState.addPhotogalaryInitialValue,
                     [name]: value
                 },
-                filteredEventList: [{_id: 1, title: "Choose event"}].concat(
+                filteredEventList: [{_id: 1, title: "Select event"}].concat(
                     this.props.eventList.filter(el => el.eventType === value)
                 )
             };
@@ -56,9 +45,8 @@ class PhotogalaryReduxForm extends Component {
 
     onChangeTitleHandler = e => {
         const { name, value } = e.target;
-        console.log('eventInput', value)
+
         this.setState(prevState => {
-            console.log('prevStateInput', prevState)
             return {
                 ...prevState,
                 addPhotogalaryInitialValue: {
@@ -71,14 +59,15 @@ class PhotogalaryReduxForm extends Component {
 
     onChangePicturesHandler = e => {
         const { value, id } = e.target;
-        console.log('eventPicture', e)
+
         this.setState(prevState => {
-            console.log('prevStatePicture', prevState)
             return {
                 ...prevState,
                 addPhotogalaryInitialValue: {
                     ...prevState.addPhotogalaryInitialValue,
-                    pictures: prevState.addPhotogalaryInitialValue.pictures.map(el => (el.id === id ? { ...el, value } : el))
+                    pictures: prevState.addPhotogalaryInitialValue.pictures.map(
+                        el => (el.id === id ? { ...el, value } : el)
+                    )
                 }
             };
         });
@@ -86,7 +75,6 @@ class PhotogalaryReduxForm extends Component {
 
     addPicture = (e) => {
         this.setState(prevState => {
-            console.log('prevStatePicture-add', prevState)
             return {
                 ...prevState,
                 addPhotogalaryInitialValue: {
@@ -107,7 +95,6 @@ class PhotogalaryReduxForm extends Component {
 
     render() {
         const { filteredEventList, addPhotogalaryInitialValue } = this.state;
-        // console.log(this.state )
 
         const {
             handleSubmit,

src/components/adminResults/adminResultsForm.js

@@ -19,6 +19,8 @@ class AdminResultsForm extends Component {
             onChangeInputTimeHandler
         } = this.props;
 
+        const fullEventList = [{title: "Select Event", _id: 1}].concat(eventList)
+
         return (
             <form className="results-form__results-form__main" onSubmit={handleSubmit(submitHandler)}>
 
@@ -41,8 +43,7 @@ class AdminResultsForm extends Component {
                     onChange={onChangeTitleHandler}
                     className="form-block__select -wide"
                 >   
-                    {console.log('event list', eventList)}
-                    {eventList && eventList.map(elem => <option key={elem._id} id={elem._id} value={elem.title}>{elem.title}</option>)}
+                    {fullEventList && fullEventList.map(elem => <option key={elem._id} id={elem._id} value={elem.title}>{elem.title}</option>)}
                 </Field>
 
                 <div className = 'results-form__table'>  
@@ -52,8 +53,8 @@ class AdminResultsForm extends Component {
                         <div className = 'results-form__header_country'>Country</div>
                         <div className = 'results-form__header_distance'>Distance</div>
                         <div className = 'results-form__header_time'>Time</div>
+                    </div> 
 
-                    </div>              
                 {eventusers && eventusers.map( elem => 
                     <div key={elem._id} className='results-form__user-data'>
                         <div className = "results-form__user-data_name">{elem.name}</div>
@@ -75,7 +76,6 @@ class AdminResultsForm extends Component {
                     <button className="results-form__submit-btn" >Add Results</button>
                 </div>
             </form>
-
         );
     }
 }

src/components/adminResults/adminResultsForm.scss

@@ -2,12 +2,12 @@
 
 .results-form {
 	width: 100%;
-	min-height: 100vh;
+	flex-grow: 1;
 	margin: auto;
 
-	background: -webkit-linear-gradient(top, #fff, $color-blue); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
-	background: -moz-linear-gradient(top, #fff, $color-blue); /* Firefox 3.6-15 */
-	background: -o-linear-gradient(top,  #fff, $color-blue); /* Opera 11.1-12 */
+	background: -webkit-linear-gradient(top, #fff, $color-blue);
+	background: -moz-linear-gradient(top, #fff, $color-blue); 
+	background: -o-linear-gradient(top,  #fff, $color-blue); 
 	background: linear-gradient(to bottom,  #fff, $color-blue);
 
 	&__content {
@@ -35,16 +35,7 @@
 		margin-bottom: 3%;
     }
 
-	&__toggle-span {
-		font-size: 1.6rem;
-		font-weight: bold;
-		color: rgb(102, 104, 223);
-	}
-
 	&__header{
-		// display: flex;
-		// flex-direction: row;
-		// justify-content: space-between;
 		display: grid;
 		grid-template-columns: repeat(5, 1fr);
 		grid-gap: 1rem;
@@ -60,8 +51,6 @@
 	}	
 
 	&__user-data{
-		// display: flex;
-		// justify-content: space-between;
 		display: grid;
 		grid-template-columns: repeat(5, 1fr);
 		align-items: start;

src/components/customFields/customInput/customInput.js

@@ -11,18 +11,18 @@ export const customInput = ({
 	type = "text",
 	required
 }) => (
-	<label htmlFor={id} className ={className} >
-		<span>
-			{label} {required && <span className="input-box__required">*</span>}
-		</span>
-		<input
-			{...inputProps}
-			autoComplete="off"
-			className={error && touched ? "input-box__input input-box__input--fail" : "input-box__input"}
-			id={id}
-			placeholder={placeholder}
-			type={type}
-		/>
-		{error && touched && <span className="input-box__error">{error}</span>}
-	</label>
-);
+		<label htmlFor={id} className={className} >
+			<span>
+				{label} {required && <span className="input-box__required">*</span>}
+			</span>
+			<input
+				{...inputProps}
+				autoComplete="off"
+				className={error && touched ? "input-box__input input-box__input--fail" : "input-box__input"}
+				id={id}
+				placeholder={placeholder}
+				type={type}
+			/>
+			{error && touched && <span className="input-box__error">{error}</span>}
+		</label>
+	);

src/components/customFields/customInput/customInput.scss

@@ -34,12 +34,10 @@
 			font-size: 1.3rem;
 			color:  #cecece;
 		}
-
 	}
 
 	&.-wide{
 		width: 100%;
 		margin-right: 0;
 	}
-
 }

src/components/customFields/customSearchSelect/customSearchSelect.js

@@ -1,104 +0,0 @@
-import React from "react";
-import "./customSearchSelect.scss";
-
-const mock = [{ id: 1, optionName: "ONE" }, { id: 2, optionName: "TWO" }, { id: 3, optionName: "THREE" }];
-
-export const CustomSearchSelect = ({ label, options = mock, emptyLine = false, searchInput = true, reset }) => {
-	const [copyOption, setCopyOption] = React.useState([]);
-	const [show, toggleShow] = React.useState(false);
-	const [value, toggleValue] = React.useState("");
-	const [inputValue, toggleInputValue] = React.useState("");
-	const list = React.createRef();
-
-	React.useEffect(() => {
-		document.addEventListener("mousedown", handleClickOutSide);
-		return () => document.removeEventListener("mousedown", handleClickOutSide);
-	});
-
-	React.useEffect(() => {
-		if (reset) {
-			toggleValue("");
-			toggleInputValue("");
-			setCopyOption(options);
-
-			toggleShow(false);
-		}
-	}, [options, reset]);
-
-	React.useEffect(() => {
-		setCopyOption(options);
-	}, [options]);
-
-	const handleClickOutSide = e => {
-		if (!show) return;
-
-		if (list.current && !list.current.contains(e.target)) {
-			toggleShow(false);
-		}
-	};
-
-	const toggleEvent = optionName => {
-		toggleValue(optionName);
-		toggleInputValue(optionName);
-        toggleShow(false);
-        console.log('toggleValue', optionName)
-	};
-
-	const clickOnEptyLine = () => {
-		toggleValue("");
-		toggleInputValue("");
-
-		toggleShow(false);
-	};
-
-	const chahgeValueEvent = e => {
-		const { value } = e.target;
-		toggleInputValue(e.target.value);
-
-		if (!value) {
-			setCopyOption(options);
-			toggleInputValue(value);
-		} else {
-			const filtered = copyOption.filter(el => el.optionName.toLowerCase().indexOf(value.toLowerCase()) >= 0);
-
-			setCopyOption(filtered);
-			toggleInputValue(value);
-        }
-        console.log('selectValue', value)
-	};
-
-	return (
-		<div className="select">
-			{label && (
-				<label htmlFor="select" className="select__lable">
-					{label}
-				</label>
-			)}
-			<div className="select__value-box" onClick={() => toggleShow(true)}>
-				{searchInput ? null : <span>{value} &nbsp;</span>}
-				<input
-					value={inputValue}
-					autoComplete="off"
-					type={searchInput ? "text" : "hidden"}
-					onChange={chahgeValueEvent}
-					id="select"
-					className="select__input"
-				/>
-			</div>
-			{show && (
-				<ul className="select__list" ref={list}>
-					{emptyLine && (
-						<li className="select__item" onClick={clickOnEptyLine}>
-							&nbsp;
-						</li>
-					)}
-					{copyOption.map(el => (
-						<li className="select__item" key={el.id} onClick={toggleEvent.bind(null, el.optionName)}>
-							{el.optionName}
-						</li>
-					))}
-				</ul>
-			)}
-		</div>
-	);
-};

src/components/customFields/customSearchSelect/customSearchSelect.scss

@@ -1,42 +0,0 @@
-.select {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	position: relative;
-
-	&__list {
-		list-style: none;
-		padding: 0;
-		margin: 0;
-		width: 100%;
-		background-color: #fff;
-
-		position: absolute;
-		left: 0;
-		top: 100%;
-		z-index: 10;
-	}
-
-	&__value-box {
-		border: 1px solid #eee;
-		border-radius: 3px;
-		padding: 0.5rem;
-	}
-
-	&__item {
-		display: flex;
-		padding: 0.5rem;
-		cursor: pointer;
-		&:hover {
-			background-color: #eee;
-		}
-	}
-
-	&__input {
-		border: none;
-		width: 100%;
-		&:focus {
-			outline: none;
-		}
-	}
-}

src/components/customFields/customSelect/customSelect.js

@@ -3,10 +3,10 @@ import "./customSelect.scss";
 
 export const customSelect = ({ label, input, children, id, className = "form-block__select", meta }) => {
 	return (
-		<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 && (
+		<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>
 			)}
 		</div>

src/components/customFields/customSelect/customSelect.scss

@@ -1,10 +1,10 @@
 .form-block__select{
     width: 40%;
-    margin-right: 10%;
+	margin-right: 10%;
+	
 	.select-box {
 		display: flex;
 		flex-direction: column;
-		
 		font-size: 1.3rem;
 		font-weight: 600;
 
@@ -37,6 +37,7 @@
 				color:  #cecece;
 			}
 		}
+		
 		&____option{
 			&:hover {
 				background-color: #5acec2;

src/components/customFields/customTextarea/customTextarea.js

@@ -3,12 +3,12 @@ import "./customTextarea.scss";
 
 export const customTextarea = ({ label, rows, input, placeholder, id, name, meta }) => {
 	return (
-		<div className="form-block__text-area" id = {'textarea_'+id}>
+		<div className="form-block__text-area" id={'textarea_' + id}>
 			<label className="textarea-box">{label}</label>
-			<textarea className="textarea-box__input" {...input} rows={rows} name={name} placeholder={placeholder}/>
-            {meta.error && meta.touched && (
+			<textarea className="textarea-box__input" {...input} rows={rows} name={name} placeholder={placeholder} />
+			{meta.error && meta.touched && (
 				<span className="error">{meta.error}</span>
-			)} 
+			)}
 		</div>
 	)
 }

src/components/customFields/customTextarea/customTextarea.scss

@@ -1,40 +1,40 @@
 .form-block__text-area{
 	width: 100%;
-.textarea-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;
+	.textarea-box {
+		display: flex;
+		flex-direction: column;	
+		font-size: 1.3rem;
+		font-weight: 600;
 
-		&:focus {
-			outline: none;
-			box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
-			border: 2px solid #5acec2;
-		}
+		&__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;
 
-		&--fail {
-			border-bottom: 3px solid #9e4560;
-		}
+			&:focus {
+				outline: none;
+				box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
+				border: 2px solid #5acec2;
+			}
+
+			&--fail {
+				border-bottom: 3px solid #9e4560;
+			}
 
-		&::placeholder {
-			font-size: 1.3rem;
-			color:  #cecece;
+			&::placeholder {
+				font-size: 1.3rem;
+				color:  #cecece;
+			}
 		}
 	}
-}
 }

src/components/eventForm/eventForm.scss

@@ -4,9 +4,9 @@
 	width: 100%;
 	height: 100%;
 	margin: auto;
-	background: -webkit-linear-gradient(top, #fff, $color-blue); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
-	background: -moz-linear-gradient(top, #fff, $color-blue); /* Firefox 3.6-15 */
-	background: -o-linear-gradient(top,  #fff, $color-blue); /* Opera 11.1-12 */
+	background: -webkit-linear-gradient(top, #fff, $color-blue);
+	background: -moz-linear-gradient(top, #fff, $color-blue);
+	background: -o-linear-gradient(top,  #fff, $color-blue); 
 	background: linear-gradient(to bottom,  #fff, $color-blue);
 
 	&__content {
@@ -21,10 +21,10 @@
 	}
 
 	&__event-form__main{
-	position: relative;
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
+		position: relative;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
 	}
 
 	&__text {
@@ -36,7 +36,6 @@
 		font-size: 3rem;
 		letter-spacing: 0.2;
 		font-weight: 600;
-		// text-shadow: 3px 3px 3px #000;
 		margin-bottom: 3%;
     }
 
@@ -66,7 +65,6 @@
 	&__picture {
 		width: 100%;
 		height: 400px;
-
 		overflow: hidden;
 		border: 1px solid $color-mint;
 		margin-bottom: 2rem;
@@ -77,7 +75,6 @@
 		border-radius: 3px;
 		display: block;
 		border: none;
-
 		color: $color-white;
 		background-color: $color-mint;
 		cursor: pointer;
@@ -89,13 +86,14 @@
 		&:focus {
 			outline: none;
 		}
+
 		&:hover {
 			background-color: $color-blue;
 			color: $color-white;
-
 			outline: none;
 			transform: translateY(-1px);
 			box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
+
 			&:after {
 				transform: scaleX(1.4) scaleY(1.6);
 				opacity: 0;

src/components/eventForm/eventReduxForm.js

@@ -9,41 +9,26 @@ import { eventFormValidation } from "../../utils/eventFormValidation";
 const EventReduxForm = ({
     handleSubmit,
     postNewEvent,
-    // resetInitValue,
     showConfirmationMessage,
     reset,
     eventTypes,
     initialValues,
-    // eventFormInitialValue,
     editFormFlag,
     changeEvent
 }) => {
 
     const submit = value => {
-        console.log('submit values', value)
 		if (!editFormFlag) {
             postNewEvent(value)
-            reset();
-            showConfirmationMessage();
 		} else {
             changeEvent(value);
-            reset();
-            showConfirmationMessage();
 		}
-		reset();
+        reset();
+        showConfirmationMessage();
     };
-    
-    console.log('initialValues',initialValues);
-
-    
-	// const resetForm = () => {
-	// 	reset();
-	// 	resetInitValue();
-	// };
 
     return (
         <form className="event-form__event-form__main" onSubmit={handleSubmit(submit)}>
-            {console.log('eventFormInitialValue', initialValues)}
 
             <img className="event-form__picture" alt="Event Bunner" src={initialValues.mainBannerPicture} />
             <Field name="mainBannerPicture" className="input-box -wide"  label="Main Banner Picture" component={customInput} />

src/components/eventInfoShort/EventInfoShort.js

@@ -6,7 +6,6 @@ import './eventInfoShort.scss';
 export class EventInfoShort extends React.Component {
     render() {
         const { title, country, city, eventDate, imgSrc, id } = this.props;
-        const dateArr = new Date(eventDate).toDateString().split(' ');
         return (
             <div className="event-item">
                 <Link to={`/events/${id}`}>
@@ -15,13 +14,11 @@ export class EventInfoShort extends React.Component {
                             <h3 className="caption">{title}</h3>
                             <div className="place">{country}, {city}</div>
                         </div>
-                        <div className="event-date">
-                            {
-                                dateArr.map(
-                                    (el, ind) => ind > 0 ? <span key={ind}>{el} </span> : null
-                                )
-                            }
-                        </div>
+                        {
+                            eventDate && <div className="event-date">
+                                { eventDate.map( (el,ind) =><span key={ind}>{el} </span>) }
+                            </div>
+                        }
                         <div className="bg-black"></div>
                         <div className="event-picture">
                             <img src={imgSrc} alt={title} />

src/components/filtersEvents/FiltersEvents.js

@@ -1,15 +1,12 @@
 import React from 'react'
 import { Field, reduxForm } from 'redux-form';
 
-import './filtersEvents.scss';
-
 import { customSelect } from "../customFields/customSelect/customSelect";
 
 let FiltersEvents = props => {
     const { handleSubmit, getRequest, eventTypes, labelType } = props;
 
     const submit = value => {
-        console.log(value);
         getRequest(value.eventType);
     };
 

src/components/filtersEvents/filtersEvents.scss

@@ -1,13 +0,0 @@
-@import "../../styles/variables";
-
-.form-filter {
-    .form-block__select {
-        width: 100%;
-    }
-
-    .btn-group {
-        text-align: center;
-        padding-top: 1rem;
-        padding-bottom: 0;
-    }
-}

src/components/filtersReviews/filtersReviews.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Field, reduxForm } from 'redux-form';
+
+import { customSelect } from "../customFields/customSelect/customSelect";
+
+let FiltersReviews = props => {
+    const { handleSubmit, getRequest, eventTypes, labelType } = props;
+
+    const submit = value => {
+        getRequest(value.eventType);
+    };
+
+    return (
+        <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 => <option key={elem.id} value={elem.id}>{elem.title}</option>)}
+                </Field>
+            </div>
+            <div className="btn-group">
+                <button type="submit" className="btn">Filter</button>
+            </div>            
+        </form>
+    )
+};
+
+FiltersReviews = reduxForm({
+    form: 'filterReviews'
+})(FiltersReviews)
+
+export default FiltersReviews

src/components/login-form/LoginForm.js

@@ -1,9 +1,8 @@
 import React from 'react'
 import { Field, reduxForm } from 'redux-form';
 
-import './login.scss';
-
 import { customInput } from "../customFields/customInput/customInput";
+import { validationForms } from "../../utils/validationForms";
 
 let LoginForm = props => {
     const { handleSubmit, postLoginSubmit } = props;
@@ -14,7 +13,7 @@ let LoginForm = props => {
 
     return (
         <form className="form" onSubmit={handleSubmit(submit)}>
-            <Field name="email" component={customInput} type="email" id="email" label="E-mail" />
+            <Field name="email" component={customInput} type="email" id="email" label="E-mail"/>
             <Field name="password" component={customInput} type="password" id="password" label="Password"/>
             <button type="submit" className="btn">Sign in</button>
         </form>
@@ -22,7 +21,8 @@ let LoginForm = props => {
 };
 
 LoginForm = reduxForm({
-    form: 'login'
+    form: 'login',
+    validate: validationForms
 })(LoginForm)
 
 export default LoginForm

src/components/login-form/login.scss

@@ -1 +0,0 @@
-@import "../../styles/variables";

src/components/reg-form-event/RegFormEvent.js

@@ -1,10 +1,9 @@
 import React from 'react'
 import { Field, reduxForm } from 'redux-form';
 
-import './reg-form-event.scss';
-
 import { customSelect } from "../customFields/customSelect/customSelect";
 import { customInput } from "../customFields/customInput/customInput";
+import { validationForms } from "../../utils/validationForms";
 
 let RegFormEvent = props => {
     const { handleSubmit, regEventSubmit, eventId, reset } = props;
@@ -12,7 +11,6 @@ let RegFormEvent = props => {
 
     const submit = value => {
         value.event = eventId;
-        //console.log('user-event', value);
         regEventSubmit(value);
         reset();
     };
@@ -35,9 +33,10 @@ let RegFormEvent = props => {
                     <Field name="sex" component="input" type="radio" id="female" value="female" hidden/>
                     <label htmlFor="female">female</label>
                 </div>
+                <div className="required-field">!Required field</div>
             </div>
-
-            <Field name="distance" label="Distance" component={customSelect}>
+            
+            <Field name="distance" label="Distance" required component={customSelect}>
                 {eventTypes.map( (elem,ind) => <option key={ind} value={elem}>{elem}</option>)}
             </Field>
 
@@ -51,7 +50,8 @@ let RegFormEvent = props => {
 };
 
 RegFormEvent = reduxForm({
-    form: 'regFormEvent'
+    form: 'regFormEvent',
+    validate: validationForms
 })(RegFormEvent)
 
 export default RegFormEvent

src/components/reg-form-event/reg-form-event.scss

@@ -1 +0,0 @@
-@import "../../styles/variables";

src/components/registration-form/RegistrationForm.js

@@ -1,17 +1,17 @@
 import React from 'react'
 import { Field, reduxForm } from 'redux-form';
 
-import './registrationForm.scss';
-
 import { customInput } from "../customFields/customInput/customInput";
+import { validationForms } from "../../utils/validationForms";
 
 let RegistrationForm = props => {
-    const { handleSubmit, postCheckInSubmit } = props;
+    const { handleSubmit, postCheckInSubmit, message } = props;
 
     const submit = value => {
-        //console.log(value);        
         postCheckInSubmit(value);
-        props.history.push('/login');
+        if(message !== 'User was successfully register'){
+            props.history.push('/login');
+        }
     };
 
     return (
@@ -29,6 +29,7 @@ let RegistrationForm = props => {
                     <Field name="sex" component="input" type="radio" id="female" value="female" hidden/>
                     <label htmlFor="female">female</label>
                 </div>
+                <div className="required-field">!Required field</div>
             </div>
             <div className="form-item">
                 <Field name="phone" component={customInput} type="phone" id="phone" label="Phone" />
@@ -50,7 +51,8 @@ let RegistrationForm = props => {
 };
 
 RegistrationForm = reduxForm({
-    form: 'registration'
+    form: 'registration',
+    validate: validationForms
 })(RegistrationForm)
 
 export default RegistrationForm

src/components/registration-form/registrationForm.scss

@@ -1 +0,0 @@
-@import "../../styles/variables";

src/components/review-form/ReviewForm.js

@@ -1,33 +1,28 @@
 import React from 'react'
 import { Field, reduxForm } from 'redux-form';
 
-import './review-form.scss';
-
 import { customInput } from "../customFields/customInput/customInput";
 import { customTextarea } from "../customFields/customTextarea/customTextarea";
 import { customSelect } from "../customFields/customSelect/customSelect";
+import { validationForms } from "../../utils/validationForms";
 
 let ReviewForm = props => {
     const { handleSubmit, postReviewSubmit, eventsArr, reset } = props;
-    //console.log(props);
 
     const submit = value => {
         value.date = new Date();
-        //console.log(value);
         postReviewSubmit(value);
         reset()
     };
 
     return (
         <form className="form" onSubmit={handleSubmit(submit)}>
-            <div>
-                <Field name="event" label="Event Title" component={customSelect}>
-                    <option>Select Event</option>
-                    {eventsArr.map(elem => <option key={elem.id} value={elem.id}>{elem.title}</option>)}
-                </Field>
-            </div>
+            <Field name="event" label="Event Title" component={customSelect}>
+                <option>Select Event</option>
+                {eventsArr.map(elem => <option key={elem.id} value={elem.id}>{elem.title}</option>)}
+            </Field>
             <Field name="name" label="Full name"  type="text" id="name" component={customInput} />
-            <Field name="text" label="Your message" type="text" id="text" component={customTextarea} />
+            <Field name="text" label="Your message" id="text" component={customTextarea} rows="10"/>
 
             <div className="btn-group">
                 <button type="submit" className="btn">Send</button>
@@ -37,7 +32,8 @@ let ReviewForm = props => {
 };
 
 ReviewForm = reduxForm({
-    form: 'reviewForm'
+    form: 'reviewForm',
+    validate: validationForms
 })(ReviewForm)
 
 export default ReviewForm

src/components/review-form/review-form.scss

@@ -1 +0,0 @@
-@import "../../styles/variables";

src/components/settings-form/settings-form.scss

@@ -1 +0,0 @@
-@import "../../styles/variables";

src/components/settings-form/settingsForm.js

@@ -1,56 +0,0 @@
-import React from 'react'
-import { Field, reduxForm } from 'redux-form';
-
-import './settings-form.scss';
-
-import { customInput } from "../customFields/customInput/customInput";
-
-let SettingsForm = props => {
-    //const { handleSubmit, postCheckInSubmit } = props;
-    const { handleSubmit, initialValues } = props;
-    console.log('initialValues',initialValues);
-    console.log(props)
-
-    const onChangeValue = e => {
-        console.log(e.target.value);
-    }
-
-    const submit = value => {
-        console.log(value);        
-        //postCheckInSubmit(value);
-    };
-
-    return (
-        <form className="form" onSubmit={handleSubmit(submit)}>
-            <div>
-                {/*<label htmlFor="name">Name</label>*/}
-                {/*<input name="name" type="text" id="name" value={userInfo.name}/>*/}
-                <Field name="name" component={customInput} id="name" label="Name" onChange={onChangeValue}/>
-            </div>
-            <div>
-                {/*<label htmlFor="phone">Phone</label>*/}
-                <Field name="phone" component={customInput} type="phone" id="phone" label="Phone" onChange={onChangeValue}/>
-            </div>
-            {/*<div>
-                <label htmlFor="email">E-mail</label>
-                <Field name="email" component="input" type="email" id="email"/>
-            </div>
-            <div>
-                <label htmlFor="password">Password</label>
-                <Field name="password" component="input" type="text" id="password"/>
-            </div>
-            <div>
-                <label htmlFor="confirmPassword">Confirm Password</label>
-                <Field name="confirmPassword" component="input" type="text" id="confirmPassword"/>
-            </div>*/}
-            
-            <button type="submit" className="btn">Save</button>
-        </form>
-        )
-};
-
-SettingsForm = reduxForm({
-    form: 'settings'
-})(SettingsForm)
-
-export default SettingsForm

src/components/sidebar/Sidebar.js

@@ -19,8 +19,8 @@ const siteMenu = [
         id: 1
     },
     {
-        text: 'Result',
-        href: '/result',
+        text: 'Results',
+        href: '/results',
         id: 2
     },
     {
@@ -44,7 +44,9 @@ export class Sidebar extends React.Component {
 
     render() {
         
-	    const { showSidebar, showSidebarFlag } = this.props;
+        const { showSidebar, showSidebarFlag } = this.props;
+        const role = localStorage.user && JSON.parse(localStorage.user).user.role;
+
         return (
             <div className={ !showSidebarFlag ? 'menu close' : 'menu' }>
                 <nav>
@@ -55,7 +57,7 @@ export class Sidebar extends React.Component {
                     </div>
                     <ul>
 						{
-                            localStorage.user && <li><Link to="/profile">Profile</Link></li>
+                            role && <li><Link to="/profile">Profile</Link></li>
 						}
 						
                         {
@@ -66,10 +68,10 @@ export class Sidebar extends React.Component {
                             )
                         }
 						{
-                            !localStorage.user && <li><Link to="/login">Login</Link></li>
+                            !role && <li><Link to="/login">Login</Link></li>
 						}
                         {
-                            localStorage.user && <li>
+                            role && <li>
                                 <button className="logout" onClick={this.logoutHandler}>
                                     <i className="fa fa-sign-out"></i>
                                 </button>

src/conteiners/adminAddEventPage/adminAddEventPage.js

@@ -4,66 +4,58 @@ import * as actions from "../../actions/adminMainPageActions";
 import AdminHeader from "../../components/adminHeader/adminHeader";
 import Form from "../../components/eventForm/eventReduxForm";
 import ConfirmationMessage from "../../components/confirmationMessage/confirmationMessage";
-// import eventFormInitialValue from "../../state/addEventInitialValue"
 
 class AdminAddEventPage extends Component {
-    state = { 
+    state = {
         confirmationMessageFlag: false
-     };
+    };
 
     componentDidMount() {
-	    this.props.getEvents();
+        this.props.getEvents();
     }
-    
-    // resetInitValue = () => this.setState({ eventFormInitialValue: {} });
 
     showConfirmationMessage = () => {
-        this.setState({confirmationMessageFlag: true })
-        document.location.reload(true);
+        this.setState({ confirmationMessageFlag: true })
     };
+
     closeConfirmationMessage = () => {
-        this.setState({confirmationMessageFlag: false })
+        this.setState({ confirmationMessageFlag: false })
     };
 
     render() {
         const {
             postNewEvent,
             changeEvent,
-            // removeEvent,
             eventFormInitialValue,
             eventTypes,
             editFormFlag
         } = this.props
-        console.log('eventFormInitialValue',eventFormInitialValue);
-
 
-		return (
+        return (
             <>
-            <AdminHeader/>
-            <div className="event-form">
-                <div className="event-form__content">
-                    <h2 className="event-form__form-title">{editFormFlag ? 'CHANGE EVENT' : 'ADD NEW EVENT'}</h2>
-        
-                    <Form 
-                        postNewEvent = {postNewEvent}
-                        changeEvent = {changeEvent}
-                        // removeEvent = {removeEvent}
-                        // resetInitValue = {this.resetInitValue}
-                        showConfirmationMessage = {this.showConfirmationMessage}
-                        initialValues = {eventFormInitialValue}
-                        eventTypes = {eventTypes}
-                        editFormFlag = {editFormFlag}
-                    />
+                <AdminHeader />
+                <div className="event-form">
+                    <div className="event-form__content">
+                        <h2 className="event-form__form-title">{editFormFlag ? 'CHANGE EVENT' : 'ADD NEW EVENT'}</h2>
+
+                        <Form
+                            postNewEvent={postNewEvent}
+                            changeEvent={changeEvent}
+                            showConfirmationMessage={this.showConfirmationMessage}
+                            initialValues={eventFormInitialValue}
+                            eventTypes={eventTypes}
+                            editFormFlag={editFormFlag}
+                        />
+                    </div>
                 </div>
-            </div>
 
-            {this.state.confirmationMessageFlag && 
-                <ConfirmationMessage closeMessage = {this.closeConfirmationMessage}>
-                    <div className = "text">{editFormFlag ? `Event has been changed.` : `New event has beed added.`}</div>
-                </ConfirmationMessage >}
+                {this.state.confirmationMessageFlag &&
+                    <ConfirmationMessage closeMessage={this.closeConfirmationMessage}>
+                        <div className="text">{editFormFlag ? `Event has been changed.` : `New event has beed added.`}</div>
+                    </ConfirmationMessage >}
             </>
-		);
-	}
+        );
+    }
 }
 
 const mapStateToProps = state => ({

src/conteiners/adminMainPage/adminMainPage.js

@@ -3,30 +3,22 @@ import { connect } from "react-redux";
 import "./adminMainPage.scss";
 import Header from '../../components/adminHeader/adminHeader';
 import AdminMenu from '../../components/adminMenu/adminMenu';
-// import Footer from '../../components/footer/Footer';
 
 class AdminMainPage extends Component {
-  
-  render() {
-    // const {
 
-    // } = this.props;
+  render() {
 
     return (
       <div className="admin-main-page-wrapper">
         <Header />
         <AdminMenu />
-        {/* <Footer /> */}
       </div>
     )
   }
 }
 
-
 const mapStateToProps = state => ({
 
 });
 
-export default connect(
-  mapStateToProps
-)(AdminMainPage);
+export default connect(mapStateToProps)(AdminMainPage);

src/conteiners/adminMainPage/adminMainPage.scss

@@ -1,4 +1,3 @@
-
 @import "../../styles/variables";
 
 .admin-main-page-wrapper{

src/conteiners/adminMyEventsPage/adminMyEventsPage.js

@@ -1,8 +1,6 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
-// import { reduxForm, Field } from "redux-form";
 import "./adminMyEventsPage.scss";
-// import { Link } from "react-router-dom";
 import { Redirect } from 'react-router-dom'
 import * as actions from "../../actions/adminMainPageActions";
 import AdminHeader from "../../components/adminHeader/adminHeader";
@@ -11,9 +9,7 @@ import EventInfoShort from "../../components/eventInfoShort/EventInfoShort";
 class AdminAddEventPage extends Component {
 
     state = {
-        filteredEventList: [],
-        // confirmationMessageFlag: false,
-        // editFormFlag: false
+        filteredEventList: []
     };
 
     componentDidMount() {
@@ -23,12 +19,10 @@ class AdminAddEventPage extends Component {
     onChangeTypeHandler = e => {
         const { value } = e.target;
         this.props.getEvents(value)
-        // console.log('eventInput', value)
     };
 
     render() {
         const {
-            // postNewEvent,
             eventList,
             removeEvent,
             editEvent,
@@ -37,10 +31,6 @@ class AdminAddEventPage extends Component {
             eventTypes
         } = this.props
 
-        console.log('eventList', eventList)
-        // console.log('confirmationMessageFlag', this.state.confirmationMessageFlag)
-
-        // console.log("eventFormInitialValue", eventFormInitialValue);
         return (
             <>
                 <AdminHeader />
@@ -49,14 +39,13 @@ class AdminAddEventPage extends Component {
                         <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>
+                            {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}>
-
                                     <EventInfoShort
                                         key={el._id}
                                         title={el.title}
@@ -69,14 +58,14 @@ class AdminAddEventPage extends Component {
                                     />
                                     <div className="event-page__buttons-conteiner">
                                         <button className="event-page__buttons-conteiner__button" onClick={editEvent.bind(null, el._id)} >Edit Event</button>
-                                        <button className="event-page__buttons-conteiner__button" onClick={removeEvent.bind(null,el._id)} >Delete Event</button>
+                                        <button className="event-page__buttons-conteiner__button" onClick={removeEvent.bind(null, el._id)} >Delete Event</button>
                                     </div>
 
                                 </div>
                             )}
                         </div>
 
-                        {editFormFlag && <Redirect to='/admin/add_new_event' /> }
+                        {editFormFlag && <Redirect to='/admin/add_new_event' />}
                     </div>
                 </div>
             </>

src/conteiners/adminMyEventsPage/adminMyEventsPage.scss

@@ -4,9 +4,9 @@
 	width: 100%;
 	height: 100%;
 	margin: auto;
-	background: -webkit-linear-gradient(top, #fff, $color-blue); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
-	background: -moz-linear-gradient(top, #fff, $color-blue); /* Firefox 3.6-15 */
-	background: -o-linear-gradient(top,  #fff, $color-blue); /* Opera 11.1-12 */
+	background: -webkit-linear-gradient(top, #fff, $color-blue);
+	background: -moz-linear-gradient(top, #fff, $color-blue);
+	background: -o-linear-gradient(top,  #fff, $color-blue); 
 	background: linear-gradient(to bottom,  #fff, $color-blue);
 
 	&__select{
@@ -63,7 +63,6 @@
 		font-size: 3rem;
 		letter-spacing: 0.2;
 		font-weight: 600;
-		// text-shadow: 3px 3px 3px #000;
 		margin-bottom: 3%;
 	}
 

src/conteiners/adminPhotogalaryPage/adminPhotogalaryPage.js

@@ -6,9 +6,9 @@ import PhotogalaryForm from "../../components/adminPhotogalary/adminPhotogalaryR
 import ConfirmationMessage from "../../components/confirmationMessage/confirmationMessage";
 
 class AdminAddPhotogalarytPage extends Component {
-    state = { 
+    state = {
         confirmationMessageFlag: false
-     };
+    };
 
     componentDidMount() {
         this.props.getEvents();
@@ -16,11 +16,11 @@ class AdminAddPhotogalarytPage extends Component {
     }
 
     showConfirmationMessage = () => {
-        this.setState({confirmationMessageFlag: true })
-        document.location.reload(true);
+        this.setState({ confirmationMessageFlag: true })
     };
+
     closeConfirmationMessage = () => {
-        this.setState({confirmationMessageFlag: false })
+        this.setState({ confirmationMessageFlag: false })
     };
 
     render() {
@@ -30,37 +30,31 @@ class AdminAddPhotogalarytPage extends Component {
             postPhotogalary,
         } = this.props
 
-        // console.log('page props', this.props)
-        // console.log('eventList', eventList)
-        // console.log('gallery', this.props.gallery)
-
-		// console.log("eventTypes", this.state.eventTypes );
-		return (
+        return (
             <>
                 <AdminHeader />
                 <div className="photogalary-form">
                     <div className="photogalary-form__content">
                         <h2 className="photogalary-form__form-title">ADD PHOTOGALARY</h2>
-                        <PhotogalaryForm 
-                            eventTypes={eventTypes} 
-                            eventList={eventList} 
-                            submitHandler = {postPhotogalary}
+                        <PhotogalaryForm
+                            eventTypes={eventTypes}
+                            eventList={eventList}
+                            submitHandler={postPhotogalary}
                         />
                     </div>
-                    {this.state.confirmationMessageFlag && 
-                        <ConfirmationMessage closeMessage = {this.closeConfirmationMessage}>
-                            <div className = "text">Photogalary has beed added.</div>
+                    {this.state.confirmationMessageFlag &&
+                        <ConfirmationMessage closeMessage={this.closeConfirmationMessage}>
+                            <div className="text">Photogalary has beed added.</div>
                         </ConfirmationMessage >}
                 </div>
             </>
-		);
-	}
+        );
+    }
 }
 
 const mapStateToProps = state => ({
     eventList: state.adminMainPageReducer.eventList,
     eventTypes: state.adminMainPageReducer.eventTypes,
-    // eventFormInitialValue: state.adminMainPageReducer.eventFormInitialValue,
     addPhotogalaryInitialValue: state.photogalaryReducer.addPhotogalaryInitialValue,
     gallery: state.photogalaryReducer.gallery
 });
@@ -68,5 +62,4 @@ const mapStateToProps = state => ({
 export default connect(
     mapStateToProps,
     actions
-    // {getEvents, photogalaryOnchange}
 )(AdminAddPhotogalarytPage);

src/conteiners/adminResultsPage/adminResultsPage.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
-import {getEvents, getEventByTitle} from "../../actions/adminMainPageActions";
-import {getRegistredUsers, resultsPromiseAll} from "../../actions/adminResultsActions";
+import { getEvents, getEventByTitle } from "../../actions/adminMainPageActions";
+import { getRegistredUsers, resultsPromiseAll } from "../../actions/adminResultsActions";
 import AdminHeader from "../../components/adminHeader/adminHeader";
 import ResultsForm from "../../components/adminResults/adminResultsForm";
 import ConfirmationMessage from "../../components/confirmationMessage/confirmationMessage";
@@ -9,15 +9,16 @@ import ConfirmationMessage from "../../components/confirmationMessage/confirmati
 class AdminResultstPage extends Component {
     state = {
         confirmationMessageFlag: false
-     };
+    };
 
-     componentDidMount() {
+    componentDidMount() {
         this.props.getEvents();
     }
 
     showConfirmationMessage = () => {
-        this.setState({confirmationMessageFlag: true })
+        this.setState({ confirmationMessageFlag: true })
     };
+
     closeConfirmationMessage = () => {
         this.setState({ confirmationMessageFlag: false })
     };
@@ -25,11 +26,11 @@ class AdminResultstPage extends Component {
     submitHandler = values => {
         const results = Object.keys(values).slice(2)
             .map(elem => elem = {
-                eventUser: elem, 
-                event: this.props.eventusers.find( user => user._id === elem).event[0],
+                eventUser: elem,
+                event: this.props.eventusers.find(user => user._id === elem).event[0],
                 time: values[elem]
             })
-       
+
         this.props.resultsPromiseAll(results)
         this.showConfirmationMessage()
     }
@@ -41,9 +42,8 @@ class AdminResultstPage extends Component {
 
     onChangeTitleHandler = e => {
         const { value } = e.target;
-        this.props.getEventByTitle(value).then((res) => {
-            this.props.getRegistredUsers(res.payload.data.events[0]._id)
-        })
+        const eventId = this.props.eventList.find(elem => elem.title === value)._id
+        this.props.getRegistredUsers(eventId)
     };
 
     render() {
@@ -53,31 +53,31 @@ class AdminResultstPage extends Component {
             eventusers,
         } = this.props
 
-		return (
+        return (
             <>
                 <AdminHeader />
                 <div className="results-form">
                     <div className="results-form__content">
                         <h2 className="results-form__form-title">RESULTS</h2>
-                        <ResultsForm 
+                        <ResultsForm
                             eventTypes={eventTypes}
                             eventList={eventList}
-                            submitHandler = {this.submitHandler}
-                            onChangeInputTimeHandler = {this.onChangeInputTimeHandler}
+                            submitHandler={this.submitHandler}
+                            onChangeInputTimeHandler={this.onChangeInputTimeHandler}
                             eventusers={eventusers}
-                            onChangeTypeHandler = {this.onChangeTypeHandler}
-                            onChangeTitleHandler = {this.onChangeTitleHandler}
+                            onChangeTypeHandler={this.onChangeTypeHandler}
+                            onChangeTitleHandler={this.onChangeTitleHandler}
                         />
                     </div>
-                    
-                    {this.state.confirmationMessageFlag && 
-                        <ConfirmationMessage closeMessage = {this.closeConfirmationMessage}>
-                            <div className = "text">Results have beed added.</div>
+
+                    {this.state.confirmationMessageFlag &&
+                        <ConfirmationMessage closeMessage={this.closeConfirmationMessage}>
+                            <div className="text">Results have beed added.</div>
                         </ConfirmationMessage >}
                 </div>
             </>
-		);
-	}
+        );
+    }
 }
 
 const mapStateToProps = state => ({
@@ -90,5 +90,5 @@ const mapStateToProps = state => ({
 
 export default connect(
     mapStateToProps,
-    {getEvents, getEventByTitle, getRegistredUsers, resultsPromiseAll}
+    { getEvents, getEventByTitle, getRegistredUsers, resultsPromiseAll }
 )(AdminResultstPage);

src/conteiners/eventCard/EventCard.js

@@ -17,8 +17,6 @@ export class EventCard extends React.Component {
 
     render() {
         const { event, regEventSubmit } = this.props;
-        const dateArr = new Date(event.eventDate).toDateString().split(' ');
-        //console.log(event);
         return (
             <>
                 <Sidebar />
@@ -32,15 +30,11 @@ export class EventCard extends React.Component {
                                 <h2>{event.title}</h2>
                                 <p className="country">{event.country}, {event.city}</p>
                                 <p className="event-type">{event.eventType}</p>
-                                <div className="date">
-                                    <p>
-                                        {
-                                            dateArr.map(
-                                                (el, ind) => ind > 0 ? <span key={ind}>{el} </span> : null
-                                            )
-                                        }
-                                    </p>
-                                </div>
+                                {
+                                    event.eventDate && <div className="date">
+                                        <p>{ event.eventDate.map((el, ind) => <span key={ind}>{el} </span>) }</p>
+                                    </div>
+                                }                                
                             </div>
                             <div className="bg-black"></div>
                         </div>
@@ -60,21 +54,10 @@ export class EventCard extends React.Component {
                                 <div className="overview">
                                     <img src={event.mainBannerPicture} alt="banner" />
                                     <p>{event.overview}</p>
-                                    {/*{
-                                        event.contentVideo && <div className="event-video">
-                                            <video controls loop>
-                                                <source src={video} type="video/mp4" />
-                                                <source src={video} type="video/ogg" />
-                                                <source src={video} type="video/webm" />
-                                                Your browser does not support the video tag.
-                                            </video>
-                                        </div>
-                                    }*/}
                                 </div>
                                 
                                 {
                                     event.map && <div className="map-wrap">
-                                        {/*click open pop-up with map*/}
                                         <img src={event.map.toString()} alt="banner" />
                                     </div>
                                 }
@@ -97,7 +80,10 @@ export class EventCard extends React.Component {
                                     }
                                 </div>
                                 <div className="reg-form-event">
-                                    <RegFormEvent eventId={event._id} regEventSubmit={regEventSubmit}/>
+                                    <RegFormEvent 
+                                        eventId={event._id} 
+                                        regEventSubmit={regEventSubmit}
+                                    />
                                 </div>
                             </div>
                         </div>
@@ -111,7 +97,8 @@ export class EventCard extends React.Component {
 
 const mapStateToProps = state => {
     return {
-        event: state.getEventCard.event
+        event: state.getEventCard.event,
+        eventUsers: state.registrationEvent.eventUsers
     };
 };
 

src/conteiners/eventCard/eventCard.scss

@@ -35,7 +35,6 @@
         color: $color-white;
 
         .bg-black {
-            opacity: 0.8;
             z-index: -1;
         }
 

src/conteiners/events/Events.js

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

src/conteiners/gallery/Gallery.js

@@ -2,20 +2,22 @@ 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;
         return (
             <>
                 <Sidebar/>
@@ -25,9 +27,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 +52,7 @@ class Gallery extends React.Component {
                                         }
                                     </div>
                                 </div>
-                            )
+                            ) : <p className="not-found">Not found gallery</p>
                         }
                     </div>
                 </div>
@@ -56,11 +64,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/home/Home.js

@@ -106,7 +106,7 @@ export class Home extends React.Component {
 
                         <div className="events-list">
                             {
-                                events.reverse().map( (event,ind) => ind < 6 && <EventInfoShort
+                                events.length !== 0 ? events.map( (event,ind) => ind < 6 && <EventInfoShort
                                     key={event._id}
                                     title={event.title}
                                     country={event.country}
@@ -114,7 +114,7 @@ export class Home extends React.Component {
                                     id={event._id}
                                     eventDate={event.eventDate}
                                     imgSrc={event.mainBannerPicture} />
-                                )
+                                ) : <p className="not-found">Not found events</p>
                             }
                         </div>
                     </div>

src/conteiners/home/home.scss

@@ -51,7 +51,6 @@
 
     .bg-black {
         z-index: 3;
-        opacity: 0.8;
     }
 
     .bg-img {

src/conteiners/login/Login.js

@@ -10,7 +10,7 @@ import LoginForm from '../../components/login-form/LoginForm';
 
 export class Login extends React.Component {
     render() {
-        const { postLoginSubmit, message, user } = this.props;
+        const { postLoginSubmit, message } = this.props;
         return (
             <div className="login-page">
                 <div className="form-login">
@@ -20,7 +20,7 @@ export class Login extends React.Component {
                         </Link>
                     </div>
                     {
-                        message === "User already exist" && <h3>{message}!</h3>
+                        message && <h3>{message}</h3>
                     }
                     <LoginForm postLoginSubmit={postLoginSubmit}/>
                     <p className="form-quest">Don't have an account? <Link to="/registration">Sign up now</Link></p>

src/conteiners/login/login.scss

@@ -25,7 +25,7 @@
         }
 
         h3 {
-            font-size: 2.4rem;
+            font-size: 2rem;
             color: $color-error;
             text-align: center;
             font-weight: $bold;

src/conteiners/profile/Profile.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { connect } from "react-redux";
 
 import { getUserInfo } from "../../actions/getUserInfo";
+import { getResults } from "../../actions/getResults";
 
 import './profile.scss';
 
@@ -9,18 +10,16 @@ import manAvatar from '../../assets/img/man.svg';
 import womanAvatar from '../../assets/img/woman.svg';
 
 import Sidebar from '../../components/sidebar/Sidebar';
-//import SettingsForm from '../../components/settings-form/settingsForm';
 
 export class Profile extends React.Component {
     componentDidMount() {
         this.props.getUserInfo(JSON.parse(localStorage.user).user._id)
+        this.props.getResults();
     }
 
     render() {
-        //console.log('profileUser',JSON.parse(localStorage.user).user._id);
-        //const user = JSON.parse(localStorage.user).user;
-        const { user } = this.props;
-        console.log('user',user);
+        const { user, results } = this.props;
+        const userResult = results.filter(result => result.eventUser.email === user.email);
     
         return (
             <>
@@ -63,44 +62,31 @@ export class Profile extends React.Component {
                             <input id="tab1" type="radio" name="tabs" checked readOnly hidden/>
                             <label htmlFor="tab1" className="tab-label">History</label>
 
-                            {/*<input id="tab2" type="radio" name="tabs" readOnly hidden/>
-                            <label htmlFor="tab2" className="tab-label">Settings</label>*/}
-
                             <div className="tab-item" id="content1">
                                <div className="history">
-                                   {/* название ивента, дистанция, время, место */}
                                    <table>
                                        <thead>
                                            <tr>
                                                <th>Event</th>
                                                <th>Distance</th>
                                                <th>Time</th>
-                                               <th>Rating</th>
+                                               <th>Event type</th>
                                            </tr>
                                        </thead>
                                        <tbody>
-                                           <tr>
-                                               <td>ULTRA MARATHON OF THE ATLANTIC 2019</td>
-                                               <td>marathone</td>
-                                               <td>3h40</td>
-                                               <td>39</td>
-                                           </tr>
-                                           <tr>
-                                               <td>CORFU HALF MARATHON</td>
-                                               <td>Half marathone</td>
-                                               <td>2h30</td>
-                                               <td>30</td>
-                                           </tr>
+                                           {
+                                                userResult.length !== 0 ? userResult.map(result => <tr key={result._id}>
+                                                        <td>{result.event.title}</td>
+                                                        <td>{result.eventUser.distance}</td>
+                                                        <td>{result.time}</td>
+                                                        <td>{result.event.eventType}</td>
+                                                    </tr>
+                                                ) : <tr><td colSpan="5"><p className="not-found">Not found results</p></td></tr>
+                                           }
                                        </tbody>
                                    </table>
                                </div>
                             </div>
-
-                            {/*<div className="tab-item" id="content2">
-                                <div className="settings">
-                                    <SettingsForm initialValues={JSON.parse(localStorage.user).user}/>
-                                </div>
-                            </div>*/}
                         </div>
                     </div>
                 </div>
@@ -111,11 +97,12 @@ export class Profile extends React.Component {
 
 const mapStateToProps = state => {
     return {
-        user: state.userInfo.userProfile
+        user: state.userInfo.userProfile,
+        results: state.results.results
     };
 };
 
 export default connect(
     mapStateToProps,
-    { getUserInfo }
+    { getUserInfo, getResults }
 )(Profile);

src/conteiners/profile/profile.scss

@@ -58,95 +58,6 @@
         }
     }
 
-    &-tabs-wrap {
-        padding-bottom: 5rem;
-        text-align: center;
-
-        .tabs-main {
-            max-width: 100%;
-    
-            .tab-item {
-                display: none;
-                padding: 2rem;
-                border: 1px solid $color-mint;
-                border-bottom: 0;
-                text-align: left;
-            }
-    
-            .tab-label {
-                display: inline-block;
-                margin: 0 0 -1px;
-                padding: 1.5rem 5rem;
-                font-weight: $semi-bold;
-                text-align: center;
-                color: $color-grey-3;
-                border: 1px solid transparent;
-                font-size: 1.6rem;
-                width: 30%;
-    
-                &:hover {
-                    color: $color-mint;
-                    cursor: pointer;
-                }
-            }
-    
-            input:checked + .tab-label {
-                color: $color-blue;
-                border: 1px solid $color-mint;
-                border-top: 3px solid $color-mint;
-                border-bottom: 1px solid $color-white;
-            }
-    
-            #tab1:checked ~ #content1,
-            #tab2:checked ~ #content2 {
-                display: block;
-            }
-        }
-
-        .history {
-            overflow-x: auto;
-            
-
-            table {
-                min-width: 380px;
-                width: 100%;
-                border-collapse: collapse;
-                border: 0;
-
-                thead {
-                    tr {
-                        border-bottom: 1px solid $color-mint;
-                    }
-                }
-
-                tbody {
-                    tr {
-                        &:not(:last-child) {
-                            border-bottom: 1px solid $color-mint;
-                        }
-                    }
-                }
-
-                th {
-                    font-size: 1.2rem;
-                    color: $color-blue;
-                    font-weight: $bold;
-                }
-
-                td {
-                    font-size: 1.4rem;
-                }
-
-                th, td {
-                    padding: 10px;
-                    border-collapse: collapse;
-                    border: 0;
-                    //border-bottom: 1px solid $color-mint;
-                }
-            }
-        }
-    }
-
     @media screen and (max-width: $medium) {
         h5 {
             text-align: center;
@@ -189,14 +100,6 @@
                     }
                 }
             }
-        }
-        &-tabs-wrap {
-            .tabs-main {
-                .tab-label {
-                    padding: 1.5rem;
-                    width: 50%;
-                }
-            }
-        }        
+        }    
     }
 }

src/conteiners/registrationPage/RegistrationPage.js

@@ -21,9 +21,9 @@ export class Login extends React.Component {
                         </Link>
                     </div>
                     {
-                        message === "User already exist" && <h3>{message}!</h3>
+                        message && <h3>{message}</h3>
                     }
-                    <RegistrationForm history={history} postCheckInSubmit={this.props.postCheckInSubmit}/>
+                    <RegistrationForm message={message} history={history} postCheckInSubmit={this.props.postCheckInSubmit}/>
                     <p className="form-quest">You have an account? <Link to="/login">Login now</Link></p>
                 </div>
             </div>

src/conteiners/registrationPage/registration-page.scss

@@ -25,7 +25,7 @@
         }
 
         h3 {
-            font-size: 2.4rem;
+            font-size: 2rem;
             color: $color-error;
             text-align: center;
             font-weight: $bold;
@@ -64,6 +64,14 @@
                 padding: 0;
             }
         }
+
+        .reg-radio {
+            margin-bottom: 2rem;
+
+            label {
+                margin-bottom: 1rem;
+            }
+        }
     }
 
     @media (max-width: $small) {

src/conteiners/result/Result.js

@@ -1,18 +1,103 @@
 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 default class Result extends React.Component {
+export class Result extends React.Component {
+    componentDidMount() {
+        this.props.getResults();
+        this.props.getAllEvents();
+    }
     render() {
+        const {marathone, halfMarathone, getResults, eventsArr} = this.props;
         return (
             <>
                 <Sidebar/>
                 <div className="container-wrap events">
                     <div className="caption-page">
-                        <h2>Result page</h2>
+                        <h2>Results page</h2>
+                    </div>
+                </div>
+
+                <div className="container-wrap">
+                    <div className="events-filters">
+                        <h4>Result filter</h4>
+                        <FiltersReviews labelType="Event Title" getRequest={getResults} eventTypes={eventsArr} />
+                    </div>
+
+                    <div className="results-wrap">
+                        <div className="profile-tabs-wrap">
+                            <div className="tabs-main">
+                                <input id="tab1" type="radio" name="tabs" checked readOnly hidden/>
+                                <label htmlFor="tab1" className="tab-label">Marathone</label>
+
+                                <input id="tab2" type="radio" name="tabs" readOnly hidden/>
+                                <label htmlFor="tab2" className="tab-label">Half marathone</label>
+
+                                <div className="tab-item" id="content1">
+                                    <div className="history">
+                                        <table>
+                                            <thead>
+                                                    <tr>
+                                                        <th>User name</th>
+                                                        <th>Event</th>
+                                                        <th>Event type</th>
+                                                        <th>Time</th>
+                                                        <th>User sex</th>
+                                                    </tr>
+                                            </thead>
+                                            <tbody>
+                                                {
+                                                    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>
+                                    </div>
+                                </div>
+
+                                <div className="tab-item" id="content2">
+                                    <div className="history">
+                                        <table>
+                                            <thead>
+                                                    <tr>
+                                                        <th>User name</th>
+                                                        <th>Event</th>
+                                                        <th>Event type</th>
+                                                        <th>Time</th>
+                                                        <th>User sex</th>
+                                                    </tr>
+                                            </thead>
+                                            <tbody>
+                                                {
+                                                    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>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <Footer/>
@@ -20,3 +105,18 @@ export default class Result extends React.Component {
         )
     }
 }
+
+const mapStateToProps = state => {
+    return {
+        results: state.results.results,
+        marathone: state.results.marathoneResults,
+        halfMarathone: state.results.halfMarathoneResults,
+        events: state.getEvents.events,
+        eventsArr: state.getEvents.eventsArrShort
+    };
+};
+
+export default connect(
+    mapStateToProps,
+    { getResults, getAllEvents }
+)(Result);

src/conteiners/result/result.scss

@@ -1 +1,15 @@
 @import "../../styles/variables";
+
+.results-wrap {
+    padding: 5rem 0;
+
+    .history {
+        i.fa {
+            color: $color-blue;
+        }
+
+        table {
+            min-width: 57.5rem;
+        }
+    } 
+}

src/conteiners/reviews/Reviews.js

@@ -9,7 +9,7 @@ import './reviews.scss';
 import Sidebar from '../../components/sidebar/Sidebar';
 import Footer from '../../components/footer/Footer';
 import ReviewForm from '../../components/review-form/ReviewForm';
-//import FiltersEvents from '../../components/filtersEvents/FiltersEvents';
+import FiltersReviews from '../../components/filtersReviews/filtersReviews';
 
 export class Reviews extends React.Component {
     componentDidMount() {
@@ -18,12 +18,8 @@ export class Reviews extends React.Component {
     }
 
     render() {
-        const { postReviewSubmit, events, reviews } = this.props;
-        const eventsArr = events.map(event => ({
-            title: event.title,
-            id: event._id
-        }));
-        //console.log(Array.from(reviews).reverse());
+        const { postReviewSubmit, reviews, getAllReviews, eventsArr } = this.props;
+        
         return (
             <>
                 <Sidebar/>
@@ -34,25 +30,25 @@ export class Reviews extends React.Component {
                 </div>
                 <div className="container-wrap">
 
-                    {/*<div className="events-filters">
-                        <h4>Events filter</h4>
-                        <FiltersEvents labelType="Event Title" getRequest={getAllEvents} eventTypes={eventTypes} />
-                    </div>*/}
+                    <div className="events-filters">
+                        <h4>Reviews filter</h4>
+                        <FiltersReviews labelType="Event Title" getRequest={getAllReviews} eventTypes={eventsArr} />
+                    </div>
 
                     <div className="reviews-wrap">
                         {
-                            Array.from(reviews).reverse().map((reviewer, ind) => ind < 10 &&
+                            reviews.length !== 0 ? reviews.map((reviewer, ind) => ind < 10 &&
                                 <div className="reviews-item" key={ind}>
                                     <div className="review-content">
                                         <div className="reviews-name">{reviewer.name}</div>
                                         <div className="reviews-date">
                                             <i className="fa fa-calendar-o" aria-hidden="true"></i>
-                                        { new Date(reviewer.date).toDateString().slice(4) }
+                                            { reviewer.date }
                                         </div>
                                         <div className="reviews-text">{reviewer.text}</div>
                                     </div>
                                 </div>
-                            )
+                            ) : <p className="not-found">Not found feedback</p>
                         }
                     </div>
                     <div className="reviews-wrap-add">
@@ -70,7 +66,7 @@ const mapStateToProps = state => {
     return {
         reviews: state.allReviews.reviews,
         events: state.getEvents.events,
-        reloadPage: state.allReviews.reloadPage
+        eventsArr: state.getEvents.eventsArrShort
     };
 };
 

src/conteiners/reviews/reviews.scss

@@ -16,7 +16,7 @@
                 font-size: 2.1rem;
                 margin-bottom: 1.5rem;
                 text-align: center;
-                color: $color-mint;
+                color: $color-blue;
             }
 
             .form {

src/index.js

@@ -3,15 +3,11 @@ import ReactDOM from 'react-dom';
 import { BrowserRouter } from "react-router-dom";
 import { Provider } from "react-redux";
 import { createBrowserHistory } from 'history';
-
 import * as serviceWorker from './serviceWorker';
 import './index.scss';
-
 import Router from './router';
-
 import { store } from "./store.js";
 
-
 const history = createBrowserHistory();
 
 ReactDOM.render(
@@ -19,7 +15,7 @@ ReactDOM.render(
         <BrowserRouter>
             <Router history={history} />
         </BrowserRouter>
-    </Provider>, 
+    </Provider>,
     document.getElementById('root')
 );
 

src/private-router.js

@@ -7,9 +7,8 @@ export const PrivateRoute = ({ component: Component, protectedRoute, ...rest })
 		render={props => {
 			if (protectedRoute) {
 				const user = localStorage.getItem("user");
-				//console.log('user')
+
 				if (!user) {
-					//console.log('user')
 					return <Redirect to="/" />;
 				}
 

src/reducers/adminMainPageReducer.js

@@ -4,11 +4,10 @@ import initialState from "../state/addEventInitialValue";
 
 export default (state = initialState, action) => {
 
-    switch (action.type) {
+	switch (action.type) {
 
 		case types.EDIT_EVENT: {
 			const eventFormInitialValue = state.eventList.find(el => el._id === action.payload);
-			console.log(eventFormInitialValue)
 			return {
 				...state,
 				eventFormInitialValue: eventFormInitialValue,
@@ -49,8 +48,12 @@ export default (state = initialState, action) => {
 			return state;
 		}
 		case types.GET_EVENTS_REQUEST_SUCCESS: {
-			const { data } = action.payload;
-			const eventList = data.events
+			const { data } = action.payload;			
+			const eventList = data.events.map( event => ({
+					...event,
+					eventDate: new Date(event.eventDate).toDateString().split(' ').slice(1,4)
+				})
+			)
 			return { ...state, eventList };
 		}
 		case types.GET_EVENTS_REQUEST_FAIL: {
@@ -87,7 +90,7 @@ export default (state = initialState, action) => {
 			return state;
 		}
 
-        default:
-			return state; 
-    }
+		default:
+			return state;
+	}
 }

src/reducers/adminResultsReduser.js

@@ -3,7 +3,7 @@ import initialState from "../state/addEventInitialValue";
 
 export default (state = initialState, action) => {
 
-    switch (action.type) {
+	switch (action.type) {
 
 		//GET REGISTRED USERS
 		case types.GET_REGISTRED_USERS: {
@@ -11,9 +11,7 @@ export default (state = initialState, action) => {
 		}
 		case types.GET_REGISTRED_USERS_SUCCESS: {
 			const { data } = action.payload;
-            const eventusers = data.eventusers
-            // console.log('state', state)
-            // console.log('result reduser users', eventusers)
+			const eventusers = data.eventusers
 			return { ...state, eventusers };
 		}
 		case types.GET_EVENTS_REQUEST_FAIL: {
@@ -24,8 +22,8 @@ export default (state = initialState, action) => {
 		case types.POST_RESULTS_REQUEST_SUCCESS: {
 			console.log('reducer results success', action.payload)
 			return {
-			...state,
-			addEventMessage: "Results have been added"
+				...state,
+				addEventMessage: "Results have been added"
 			}
 		}
 		case types.POST_RESULTS_REQUEST_FAIL: {
@@ -33,7 +31,7 @@ export default (state = initialState, action) => {
 			return { ...state, error: action.payload }
 		}
 
-        default:
-			return state; 
-    }
+		default:
+			return state;
+	}
 }

src/reducers/combineReducers.js

@@ -12,6 +12,8 @@ import logout from "./logout";
 import allReviews from "./reviews";
 import adminResultsReduser from "./adminResultsReduser"
 import userInfo from "./getUserInfo"
+import results from "./getResults";
+import registrationEvent from "./registrationEvent";
 
 export default combineReducers({
 	form: formReducer,
@@ -25,5 +27,7 @@ export default combineReducers({
     allReviews,
     logout,
     adminResultsReduser,
-    userInfo
+    userInfo,
+    results,
+    registrationEvent
 });

src/reducers/getAllEvents.js

@@ -1,7 +1,9 @@
 import * as types from "../actionTypes/actionTypes";
 
 const initialState = {
-    events: []
+    events: [],
+    eventsArrTitles: [],
+    eventsArrShort: []
 }
 
 export default (state = initialState, action) => {
@@ -10,11 +12,25 @@ export default (state = initialState, action) => {
             return state;
         }
 
-        case types.GET_REQUEST_SUCCESS_EVENTS: {
-            //console.log('events',action.payload.events);
+        case types.GET_REQUEST_SUCCESS_EVENTS: {            
+            const allEvents = action.payload.events.reverse().map( event => ({
+                    ...event,
+                    eventDate: new Date(event.eventDate).toDateString().split(' ').slice(1,4)
+                })
+            )
+
+            const eventsTitles = allEvents.map(event => event.title); 
+
+            const eventsArr = allEvents.map(event => ({
+                title: event.title,
+                id: event._id
+            }));
+
             return {
                 ...state,
-                events: action.payload.events
+                events: allEvents,
+                eventsArrTitles: eventsTitles,
+                eventsArrShort: eventsArr
             };
         }
 

src/reducers/getRequestEvent.js

@@ -11,10 +11,12 @@ export default (state = initialState, action) => {
         }
 
         case types.GET_REQUEST_SUCCESS_EVENT_CARD: {
-            //console.log('event', action.payload.events[0]);
             return {
                 ...state,
-                event: action.payload.events[0]
+                event: {
+                    ...action.payload.events[0],
+                    eventDate: new Date(action.payload.events[0].eventDate).toDateString().split(' ').slice(1,4)
+                }
             };
         }
 

src/reducers/getResults.js

@@ -0,0 +1,38 @@
+import * as types from "../actionTypes/actionTypes";
+
+const initialState = {
+    results: [],
+    marathoneResults: [],
+    halfMarathoneResults: [],
+}
+
+export default (state = initialState, action) => {
+    switch (action.type) {
+        case types.GET_RESULT: {
+            return state;
+        }
+
+        case types.GET_RESULT_SUCCESS: {            
+            const resultsArr = action.payload.results;
+            //console.log(resultsArr);
+            const marathoneResultsArr = resultsArr.filter( elem => elem.eventUser.distance === "Marathone" );
+            
+            const halfMarathoneResultsArr = resultsArr.filter( elem => elem.eventUser.distance === "Half marathone" );
+
+            return {
+                ...state,
+                results: action.payload.results,
+                marathoneResults: marathoneResultsArr,
+                halfMarathoneResults: halfMarathoneResultsArr
+            };
+        }
+
+        case types.GET_RESULT_ERROR: {
+            console.log('error results');
+            return state;
+        }
+
+        default:
+            return state;
+    }
+}

src/reducers/getUserInfo.js

@@ -10,9 +10,7 @@ export default (state = initialState, action) => {
             return state;
         }
 
-        case types.GET_USERS_INFO_SUCCESS: {
-            //console.log('userprofile',action.payload.user);
-            
+        case types.GET_USERS_INFO_SUCCESS: {            
             return {
                 ...state,
                 userProfile: action.payload.user

src/reducers/login.js

@@ -11,8 +11,7 @@ export default (state = initialState, action) => {
             return state;
         }
 
-        case types.POST_REQUEST_SUCCESS_LOGIN: {   
-            console.log('action.payload.user',action.payload.message);
+        case types.POST_REQUEST_SUCCESS_LOGIN: {
             return {
                 ...state,
                 user: action.payload.user,
@@ -21,8 +20,10 @@ export default (state = initialState, action) => {
         }
 
         case types.POST_REQUEST_ERROR_LOGIN: {
-            console.log('error', action.payload.message);
-            return state;
+            return {
+                ...state,
+                message: action.payload.message
+            };
         }
 
         default:

src/reducers/logout.js

@@ -10,13 +10,11 @@ export default (state = initialState, action) => {
             return state;
         }
 
-        case types.GET_LOGOUT_USER_SUCCESS: {
-            //console.log('logout',action.payload.logOut);            
+        case types.GET_LOGOUT_USER_SUCCESS: {   
             return state
         }
 
         case types.GET_LOGOUT_USER_ERROR: {
-            console.log('error');
             return state;
         }
 

src/reducers/photogalaryReducer.js

@@ -3,9 +3,9 @@ import initialState from "../state/addEventInitialValue";
 
 export default (state = initialState, action) => {
 
-    switch (action.type) {
-        
-        // GET ALL EVENTS
+	switch (action.type) {
+
+		// GET ALL EVENTS
 		case types.GET_EVENTS_REQUEST: {
 			return state;
 		}
@@ -16,23 +16,20 @@ export default (state = initialState, action) => {
 		}
 		case types.GET_EVENTS_REQUEST_FAIL: {
 			return state;
-        }
+		}
 
-        // GET PHOTOGAARY
+		// GET PHOTOGALARY
 		case types.GET_PHOTOGALARY_REQUEST: {
 			return state;
 		}
 		case types.GET_PHOTOGALARY_REQUEST_SUCCESS: {
-            console.log('GET_PHOTOGALARY reducer data', action.payload.data.gallery)
-			//const { data } = action.payload;
-			//const gallery = data.data.gallery;
-            return { ...state, gallery: action.payload.data.gallery  };
+			return { ...state, gallery: action.payload.data.gallery };
 		}
 		case types.GET_PHOTOGALARY_REQUEST_FAIL: {
 			return state;
-        }
-        
-        //POST PHOTOGAARY
+		}
+
+		//POST PHOTOGALARY
 		case types.POST_PHOTOGALARY_REQUEST_SUCCESS: {
 			console.log('reducer post photogalary success', action.payload)
 			return state
@@ -42,34 +39,18 @@ export default (state = initialState, action) => {
 			return { ...state, error: action.payload }
 		}
 
-		//PUT PHOTOGAARY
+		//PUT PHOTOGALARY
 		case types.PUT_PHOTOGALARY_REQUEST_SUCCESS: {
 			console.log('reducer PUT photogalary success', action.payload)
 			return state
-			
+
 		}
 		case types.PUT_PHOTOGALARY_REQUEST_FAIL: {
 			console.log('reducer PUT photogalary fail', action.payload)
 			return { ...state, error: action.payload }
 		}
 
-		// // REMOVE
-		// case types.REMOVE_EVENT_REQUEST: {
-		// 	return state;
-		// }
-		// case types.REMOVE_EVENT_REQUEST_SUCCESS: {
-		// 	const { _id } = action.payload;
-		// 	return {
-		// 		...state,
-		// 		eventList: state.eventList.filter(el => el._id !== _id)
-		// 	};
-		// }
-
-		// case types.REMOVE_EVENT_REQUEST_FAIL: {
-		// 	return state;
-		// }
-
-        default:
-			return state; 
-    }
+		default:
+			return state;
+	}
 }

src/reducers/registration.js

@@ -11,7 +11,6 @@ export default (state = initialState, action) => {
         }
 
         case types.POST_REQUEST_SUCCESS_CHECKIN: {
-            console.log('some', action.payload.message );
             return {
                 ...state,
                 message: action.payload.message
@@ -19,8 +18,10 @@ export default (state = initialState, action) => {
         }
 
         case types.POST_REQUEST_ERROR_CHECKIN: {
-            console.log('error');
-            return state;
+            return {
+                ...state,
+                message: action.payload.message
+            };
         }
 
         default:

src/reducers/registrationEvent.js

@@ -1,7 +1,7 @@
 import * as types from "../actionTypes/actionTypes";
 
 const initialState = {
-    user: {}
+    eventUsers: []
 }
 
 export default (state = initialState, action) => {
@@ -11,12 +11,11 @@ export default (state = initialState, action) => {
         }
 
         case types.POST_REGISTRATION_EVENT_SUCCESS: {
-            console.log('regEventUser', action.payload );
             return state;
         }
 
         case types.POST_REGISTRATION_EVENT_ERROR: {
-            console.log('error');
+            console.log(action.payload.message);
             return state;
         }
 

src/reducers/reviews.js

@@ -2,7 +2,7 @@ import * as types from "../actionTypes/actionTypes";
 
 const initialState = {
     reviews: [],
-    reloadPage: false
+    message: ''
 }
 
 export default (state = initialState, action) => {
@@ -12,16 +12,23 @@ export default (state = initialState, action) => {
         }
 
         case types.GET_REQUEST_SUCCESS_REVIEWS: {
-            //console.log('reviews', action.payload.results);
+            const allReviews = action.payload.results.reverse().map( res => ({
+                    ...res,
+                    date: new Date(res.date).toDateString().slice(4)
+                })
+            )
+
             return {
                 ...state,
-                reviews: action.payload.results
+                reviews: allReviews
             };
         }
 
         case types.GET_REQUEST_ERROR_REVIEWS: {
-            console.log('error reviews', action.payload.message);
-            return state;
+            return {
+                ...state,
+                message: action.payload.message
+            };
         }
 
         case types.POST_REQUEST_REVIEW: {
@@ -29,17 +36,14 @@ export default (state = initialState, action) => {
         }
 
         case types.POST_REQUEST_SUCCESS_REVIEW: {
-            //console.log('review', action.payload);
             return state;
-            /*return {
-                ...state,
-                reloadPage: !state.reloadPage
-            };*/
         }
 
         case types.POST_REQUEST_ERROR_REVIEW: {
-            console.log('error reviews', action.payload.message);
-            return state;
+            return {
+                ...state,
+                message: action.payload.message
+            };
         }
 
         default:

src/router.js

@@ -1,6 +1,7 @@
-import React, {useEffect } from "react";
+import React, { useEffect } from "react";
 import { Switch, withRouter } from "react-router-dom";
 import { connect } from "react-redux";
+import { PrivateRoute } from "./private-router";
 
 import AdminMainPage from './conteiners/adminMainPage/adminMainPage';
 import AdminAddEventPage from './conteiners/adminAddEventPage/adminAddEventPage';
@@ -16,11 +17,8 @@ import Login from './conteiners/login/Login';
 import RegistrationPage from './conteiners/registrationPage/RegistrationPage';
 import Events from './conteiners/events/Events';
 import EventCard from './conteiners/eventCard/EventCard';
-
 import Profile from './conteiners/profile/Profile';
 
-import { PrivateRoute } from "./private-router";
-
 const PAGENOTFOUND = () => <div>PAGE 404 NOT FOUND</div>;
 
 const route = [
@@ -37,18 +35,18 @@ const route = [
 		path: "/events",
 		protected: false,
 		component: Events
-    },
-    {
-        id: 3,
-        exact: true,
-        path: "/events/:id",
-        protected: false,
-        component: EventCard
-    },
+	},
+	{
+		id: 3,
+		exact: true,
+		path: "/events/:id",
+		protected: false,
+		component: EventCard
+	},
 	{
 		id: 4,
 		exact: true,
-		path: "/result",
+		path: "/results",
 		protected: false,
 		component: Result
 	},
@@ -58,74 +56,74 @@ const route = [
 		path: "/gallery",
 		protected: false,
 		component: Gallery
-    },
-    {
+	},
+	{
 		id: 6,
 		exact: true,
 		path: "/reviews",
 		protected: false,
 		component: Reviews
-    },
-    {
+	},
+	{
 		id: 7,
 		exact: true,
 		path: "/login",
 		protected: false,
 		component: Login
-    },
-    {
+	},
+	{
 		id: 8,
 		exact: true,
 		path: "/registration",
 		protected: false,
 		component: RegistrationPage
-    },
-    {
+	},
+	{
 		id: 9,
 		exact: true,
 		path: "/profile",
-        protected: true,
-        hasAccess: 'user',
+		protected: true,
+		hasAccess: 'user',
 		component: Profile
-    },
-    {
+	},
+	{
 		id: 10,
 		exact: true,
 		path: "/admin",
-        protected: true,
-        hasAccess: 'admin',
+		protected: true,
+		hasAccess: 'admin',
 		component: AdminMainPage
-    },
-    {
+	},
+	{
 		id: 11,
 		exact: true,
 		path: "/admin/add_new_event",
-        protected: true,
-        hasAccess: 'admin',
+		protected: true,
+		hasAccess: 'admin',
 		component: AdminAddEventPage
-    },
-    {
+	},
+	{
 		id: 12,
 		exact: true,
 		path: "/admin/photogalary",
-        protected: true,
-        hasAccess: 'admin',
+		protected: true,
+		hasAccess: 'admin',
 		component: AdminAddPhotogalarytPage
-    },
-    {
+	},
+	{
 		id: 13,
 		exact: true,
 		path: "/admin/results",
-        protected: true,
-        hasAccess: 'admin',
+		protected: true,
+		hasAccess: 'admin',
 		component: AdminResultsPage
 	},
 	{
 		id: 14,
 		exact: true,
 		path: "/admin/my_events",
-        protected: true,
-        hasAccess: 'admin',
+		protected: true,
+		hasAccess: 'admin',
 		component: AdminMyEventsPage
 	},
 	{
@@ -136,7 +134,7 @@ const route = [
 
 const Router = withRouter(({ history, user }) => {
 	useEffect(() => {
-		const userl = JSON.parse(localStorage.user).user; 
+		const userl = localStorage.user ? JSON.parse(localStorage.user).user : null;
 
 		if (userl) {
 			const userRole = userl.role;
@@ -144,8 +142,8 @@ const Router = withRouter(({ history, user }) => {
 			if (userRole === 'admin') {
 				history.push("/admin");
 			}
-			
-            if (userRole === 'user') {
+
+			if (userRole === 'user') {
 				history.push("/profile");
 			}
 		}
@@ -160,18 +158,18 @@ const Router = withRouter(({ history, user }) => {
 						key={el.id}
 						exact={el.exact}
 						path={el.path}
-                        component={el.component}
+						component={el.component}
 					/>
-                ))}
+				))}
 			</Switch>
 		</div>
 	);
 });
 
 const mapStateToProps = state => {
-    return {
+	return {
 		user: state.login.user
-    };
+	};
 };
 
 export default connect(

src/state/addEventInitialValue.js

@@ -1,94 +1,36 @@
-export default{
+export default {
 
-eventFormInitialValue: {
-    mainBannerPicture: "https://tokyo2020.org/assets/img/pages/news/20180802-01-photo-main.jpg",
-    title: "",
-    eventType: "",
-    eventDate: "",
-    country: "",
-    city: "",
-    overview: "",
-    contentPicture: "",
-    contentVideo: "",
-    marathoneDistancePrice: "",
-    halfmarathoneDistancePrice: "",
-    ageLimit: "",
-    awardMedals: "",
-    maximumTime: "",
-    aidStations: "",
-    equipmentStorage: "",
-    parking: "",
-    refreshments: "",
-    map: "",
-    addEventMessage: null
-},
+    eventFormInitialValue: {
+        mainBannerPicture: "https://tokyo2020.org/assets/img/pages/news/20180802-01-photo-main.jpg",
+        title: "",
+        eventType: "",
+        eventDate: "",
+        country: "",
+        city: "",
+        overview: "",
+        contentPicture: "",
+        contentVideo: "",
+        marathoneDistancePrice: "",
+        halfmarathoneDistancePrice: "",
+        ageLimit: "",
+        awardMedals: "",
+        maximumTime: "",
+        aidStations: "",
+        equipmentStorage: "",
+        parking: "",
+        refreshments: "",
+        map: "",
+        addEventMessage: null
+    },
 
-eventList: [],
-editFormFlag: false,
-gallery: [],
-// eventusers: [],
+    eventList: [],
+    editFormFlag: false,
+    gallery: [],
 
-eventTypes: [
-    { optionName: 'Select Event Type', id: 1 },
-    { optionName: 'Triathlon', id: 2 },
-    { optionName: 'Marathon', id: 3 },
-    { optionName: 'Cycling', id: 4 }
-],
-
-// addPhotogalaryInitialValue: {
-//     eventType: "",
-//     eventTitle: "",
-//     pictures: [
-//         {
-//             id: '1',
-//             name: `picture_1}`,
-//             value: ""
-//         },
-//         {
-//             id: '2',
-//             name: `picture_2`,
-//             value: ""
-//         },
-//         {
-//             id: '3',
-//             name: `picture_3`,
-//             value: ""
-//         },
-//         {
-//             id: '4',
-//             name: `picture_4`,
-//             value: ""
-//         },
-//         {
-//             id: '5',
-//             name: `picture_5`,
-//             value: ""
-//         },
-//         {
-//             id: '6',
-//             name: `picture_6`,
-//             value: ""
-//         },
-//         {
-//             id: '7',
-//             name: `picture_7`,
-//             value: ""
-//         },
-//         {
-//             id: '8',
-//             name: `picture_8`,
-//             value: ""
-//         },
-//         {
-//             id: '9',
-//             name: `picture_9`,
-//             value: ""
-//         },
-//         {
-//             id: '10',
-//             name: `picture_10`,
-//             value: ""
-//         }
-//     ]
-// }
+    eventTypes: [
+        { optionName: 'Select Event Type', id: 1 },
+        { optionName: 'Triathlon', id: 2 },
+        { optionName: 'Marathon', id: 3 },
+        { optionName: 'Cycling', id: 4 }
+    ]
 }

src/state/adminMenu.js

@@ -1,10 +1,8 @@
 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: "Add Photogalery", logout: false },
 	{ path: "/admin/results", id: 4, text: "Add Results", logout: false },
-	// { path: "/admin/feedbacks", id: 5, text: "Feedbacks", logout: false },
-	{ path: "/", id: 6, text: "Go to WebSite", logout: false },
-	{ path: "/", id: 7, text: "Log out", logout: true }
+	{ path: "/", id: 5, text: "Go to WebSite", logout: false },
+	{ path: "/", id: 6, text: "Log out", logout: true }
 ];

src/styles/base.scss

@@ -17,15 +17,6 @@ html {
     @media (max-width: small) {
         font-size: 50% !important;
     }
-    // @include breakpoint(lg) {
-    // 	font-size: 56.25% !important;
-    // }
-    // @include breakpoint(md) {
-    // 	font-size: 50% !important;
-    // }
-    // @include breakpoint(sm) {
-    // 	font-size: 62.5% !important;
-    // }
 }
 
 body,
@@ -115,4 +106,8 @@ button {
 	cursor: pointer;
     outline: none;
     box-shadow: none;
+}
+
+.stop-scroling {
+    overflow: hidden;
 }

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;
@@ -19,7 +15,7 @@ body, #root {
 .container {
     display: flex;
     flex-direction: column;
-    height: 100%;
+    min-height: 100%;
 
     &-wrap {
         flex-grow: 1;
@@ -105,66 +101,3 @@ i {
     width: 100%;
     color: $color-blue;
 }
-
-//for the login and registration pages
-.form-quest {
-    font-size: 1.4rem;
-    margin-top:2rem;
-
-    a {
-        color: $color-mint;
-        transition: 0.5s;
-
-        &:hover {
-            color: $color-blue;
-        }
-    }
-}
-
-//radio button
-.reg-radio {
-    display: flex;
-    flex-wrap: wrap;
-
-    .radio-label {
-        width: 50%;
-
-        label {
-            display: block;
-            padding: 0 1rem 0 2.5rem;
-            font-size: 1.4rem;
-            position: relative;
-
-            &:before {
-                content: '';
-                display: inline-block;
-                position: absolute;
-                top: 50%;
-                left: 0;
-                transform: translateY(-50%);
-                width: 1.7rem;
-                height: 1.7rem;
-                border-radius: 50%;
-                border: 1px solid $color-mint;
-                background: $color-white;
-            }
-        }
-
-        input {
-            &:checked + label {
-                &:after {
-                    content: '';
-                    display: inline-block;
-                    position: absolute;
-                    top: 50%;
-                    left: 0.5rem;
-                    transform: translateY(-50%);
-                    width: 0.7rem;
-                    height: 0.7rem;
-                    border-radius: 50%;
-                    background: $color-blue;
-                }
-            }
-        }
-    }
-}

src/styles/filters.scss

@@ -13,3 +13,15 @@
         font-size: 1.4rem;
     }
 }
+
+.form-filter {
+    .form-block__select {
+        width: 100%;
+    }
+
+    .btn-group {
+        text-align: center;
+        padding-top: 1rem;
+        padding-bottom: 0;
+    }
+}

src/styles/form-field.scss

@@ -0,0 +1,17 @@
+//input-box error message
+.input-box {
+    &__error {
+        color: $color-error;
+    }
+}
+
+//select error message
+.form-block {
+    &__select,
+    &__text-area {
+        .error {
+            font-size: 1.3rem;
+            color: $color-error;
+        }
+    }
+}

src/styles/history-table.scss

@@ -0,0 +1,41 @@
+//table
+.history {
+    overflow-x: auto;
+    
+    table {
+        min-width: 38rem;
+        width: 100%;
+        border-collapse: collapse;
+        border: 0;
+
+        thead {
+            tr {
+                border-bottom: 1px solid $color-mint;
+            }
+        }
+
+        tbody {
+            tr {
+                &:not(:last-child) {
+                    border-bottom: 1px solid $color-mint;
+                }
+            }
+        }
+
+        th {
+            font-size: 1.2rem;
+            color: $color-blue;
+            font-weight: $bold;
+        }
+
+        td {
+            font-size: 1.4rem;
+        }
+
+        th, td {
+            padding: 10px;
+            border-collapse: collapse;
+            border: 0;
+        }
+    }
+}

src/styles/login-reg.scss

@@ -0,0 +1,14 @@
+//for the login and registration pages
+.form-quest {
+    font-size: 1.4rem;
+    margin-top:2rem;
+
+    a {
+        color: $color-mint;
+        transition: 0.5s;
+
+        &:hover {
+            color: $color-blue;
+        }
+    }
+}

src/styles/main.scss

@@ -3,4 +3,9 @@
 @import "base";
 @import "custom";
 @import "logo";
-@import "filters";
+@import "login-reg";
+@import "form-field";
+@import "filters";
+@import "reg-radio";
+@import "tabs";
+@import "history-table";

src/styles/reg-radio.scss

@@ -0,0 +1,58 @@
+//radio button
+.reg-radio {
+    display: flex;
+    flex-wrap: wrap;
+    border-top: 1px solid $color-grey-light;
+    border-bottom: 1px solid $color-grey-light;
+    padding: 1rem 0.2rem 0.5rem;
+
+    .radio-label {
+        width: 50%;
+
+        label {
+            display: block;
+            padding: 0 1rem 0 2.5rem;
+            margin-bottom: 1rem;
+            font-size: 1.4rem;
+            position: relative;
+
+            &:before {
+                content: '';
+                display: inline-block;
+                position: absolute;
+                top: 50%;
+                left: 0;
+                transform: translateY(-50%);
+                width: 1.7rem;
+                height: 1.7rem;
+                border-radius: 50%;
+                border: 1px solid $color-mint;
+                background: $color-white;
+            }
+        }
+
+        input {
+            &:checked + label {
+                &:after {
+                    content: '';
+                    display: inline-block;
+                    position: absolute;
+                    top: 50%;
+                    left: 0.5rem;
+                    transform: translateY(-50%);
+                    width: 0.7rem;
+                    height: 0.7rem;
+                    border-radius: 50%;
+                    background: $color-blue;
+                }
+            }
+        }
+    }
+
+    .required-field {
+        width: 100%;
+        color: $color-blue;
+        font-size: 1.3rem;
+        font-weight: $semi-bold;
+    }
+}

src/styles/tabs.scss

@@ -0,0 +1,59 @@
+//tabs
+.profile {
+    &-tabs-wrap {
+        padding-bottom: 5rem;
+        text-align: center;
+    
+        .tabs-main {
+            max-width: 100%;
+    
+            .tab-item {
+                display: none;
+                padding: 2rem;
+                border: 1px solid $color-mint;
+                border-bottom: 0;
+                text-align: left;
+            }
+    
+            .tab-label {
+                display: inline-block;
+                margin: 0 0 -1px;
+                padding: 1.5rem 5rem;
+                font-weight: $semi-bold;
+                text-align: center;
+                color: $color-grey-3;
+                border: 1px solid transparent;
+                font-size: 1.6rem;
+                width: 30%;
+    
+                &:hover {
+                    color: $color-mint;
+                    cursor: pointer;
+                }
+            }
+    
+            input:checked + .tab-label {
+                color: $color-blue;
+                border: 1px solid $color-mint;
+                border-top: 3px solid $color-mint;
+                border-bottom: 1px solid $color-white;
+            }
+    
+            #tab1:checked ~ #content1,
+            #tab2:checked ~ #content2 {
+                display: block;
+            }
+        }
+    }
+
+    @media screen and (max-width: $small) {
+        &-tabs-wrap {
+            .tabs-main {
+                .tab-label {
+                    padding: 1.5rem;
+                    width: 50%;
+                }
+            }
+        }        
+    }
+}

src/styles/variables.scss

@@ -2,7 +2,7 @@
 $color-blue: #1f7394;
 $color-white: #ffffff;
 $color-black: #000000;
-$color-error: #c60000;
+$color-error: #9e4560;
 $color-grey-light: #eeeeee;
 $color-mint: #5acec2;
 $color-grey-2: #f5f5f5;

src/utils/eventFormValidation.js

@@ -2,23 +2,23 @@ export const eventFormValidation = values => {
 	const errors = {};
 
 	if (!values.title) {
-		errors.title = "Required";
+		errors.title = "Required field";
 	}
 
 	if (!values.eventType) {
-		errors.eventType = "Required";
+		errors.eventType = "Required field";
 	}
 
 	if (!values.country) {
-		errors.country = "Required";
+		errors.country = "Required field";
     }
     
     if (!values.city) {
-		errors.city = "Required";
+		errors.city = "Required field";
     }
     
     if (!values.eventDate) {
-		errors.eventDate = "Required";
+		errors.eventDate = "Required field";
 	}
 
 	return errors;

src/utils/validationForms.js

@@ -0,0 +1,41 @@
+export const validationForms = values => {
+	const errors = {};
+
+	if (!values.email) {
+		errors.email = "Invalid e-mail";
+	}
+
+	if (!values.password) {
+		errors.password = "Required field";
+    }
+    
+    if (!values.confirmPassword) {
+		errors.confirmPassword = "Required field";
+    }
+    
+    if (!values.name) {
+		errors.name = "Required field";
+    }
+    
+    if (!values.phone) {
+		errors.phone = "Invalid phone number";
+    }
+    
+    if (!values.distance) {
+		errors.distance = "Required field";
+    }
+    
+    if (!values.userCountry) {
+		errors.userCountry = "Required field";
+	}
+
+	if (!values.event) {
+		errors.event = "Required field";
+	}
+
+	if (!values.text) {
+		errors.text = "Required field";
+	}
+
+	return errors;
+};