src/actionTypes/actionTypes.js

@@ -42,5 +42,13 @@ export const PUT_PHOTOGALARY_REQUEST = "PUT_PHOTOGALARY_REQUEST";
 export const PUT_PHOTOGALARY_REQUEST_SUCCESS = "PUT_PHOTOGALARY_REQUEST_SUCCESS";
 export const PUT_PHOTOGALARY_REQUEST_FAIL = "PUT_PHOTOGALARY_REQUEST_FAIL";
 
+export const POST_REGISTRATION_EVENT = "POST_REGISTRATION_EVENT";
+export const POST_REGISTRATION_EVENT_SUCCESS = "POST_REGISTRATION_EVENT_SUCCESS";
+export const POST_REGISTRATION_EVENT_ERROR = "POST_REGISTRATION_EVENT_ERROR";
+
+export const GET_LOGOUT_USER = "GET_LOGOUT_USER";
+export const GET_LOGOUT_USER_SUCCESS = "GET_LOGOUT_USER_SUCCESS";
+export const GET_LOGOUT_USER_ERROR = "GET_LOGOUT_USER_ERROR";
+
 
 // export const PHOTOGALARY_ONCHAGE = "PHOTOGALARY_ONCHAGE";

src/actions/adminMainPageActions.js

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

src/actions/login.js

@@ -34,4 +34,11 @@ export const postLoginSubmit = payload => {
             error => dispatch(postLoginError(error))
         )
     }
+}
+
+export const writeLocalStorage = user => {
+    localStorage.setItem(
+        "user",
+        JSON.stringify(user)
+    )
 }

src/actions/logout.js

@@ -0,0 +1,35 @@
+import * as types from "../actionTypes/actionTypes";
+
+export const getLogoutUser = payload => ({
+    type: types.GET_LOGOUT_USER,
+    payload
+});
+
+export const getLogoutUserSuccess = payload => ({
+    type: types.GET_LOGOUT_USER_SUCCESS,
+    payload
+});
+
+export const getLogoutUserError = payload => ({
+    type: types.GET_LOGOUT_USER_ERROR,
+    payload
+});
+
+export const getLogoutUserSubmit = () => {
+    return dispatch => {
+        let promise = fetch("https://api-marathon.herokuapp.com/api/v1/auth/logout")
+        console.log('getLogoutUserSubmit');
+
+        dispatch(getLogoutUser())
+
+        promise.then(
+            data => data.json().then(data => dispatch(getLogoutUserSuccess(data))),
+            error => dispatch(getLogoutUserError(error))
+        )
+    }
+}
+
+export const clearLocalStorage = () => {
+    localStorage.removeItem('user');
+    document.location.reload(true);
+}

src/actions/registrationEvent.js

@@ -0,0 +1,37 @@
+import * as types from "../actionTypes/actionTypes";
+
+export const regEvent = payload => ({
+    type: types.POST_REQUEST_CHECKIN,
+    payload
+});
+
+export const regEventSuccess = payload => ({
+    type: types.POST_REQUEST_SUCCESS_CHECKIN,
+    payload
+});
+
+export const regEventError = payload => ({
+    type: types.POST_REQUEST_ERROR_CHECKIN,
+    payload
+});
+
+export const regEventSubmit = payload => {
+    return dispatch => {
+        let promise = fetch("https://api-marathon.herokuapp.com/api/v1/eventUser",
+            {
+                method: 'POST',
+                body: JSON.stringify(payload),
+                headers: {
+                    "Content-type": "application/json"
+                }
+            }
+        )
+
+        dispatch(regEvent())
+
+        promise.then(
+            data => data.json().then(data => dispatch(regEventSuccess(data))),
+            error => dispatch(regEventError(error))
+        )
+    }
+}

src/components/adminMenu/adminMenu.js

@@ -19,6 +19,7 @@ class AdminMenu extends Component {
         return (
             <div className="menu-block">
                 {adminMenu.map(el =>
+
                     el.text !== "Log out" && el.text !== "Main Page" &&
                     <div
                         className="menu-skew"
@@ -31,6 +32,7 @@ class AdminMenu extends Component {
                         {/* <Link to={el.path} className = "menu-text">{el.text.toUpperCase()}</Link> */}
                     </div>
                 )}
+
             </div>
         )
     }

src/components/adminMenu/adminMenu.scss

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

src/components/adminPhotogalary/adminPhotogalaryReduxForm.js

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

src/components/customFields/customSelect/customSelect.js

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

src/components/customFields/customSelect/customSelect.scss

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

src/components/login-form/LoginForm.js

@@ -15,11 +15,11 @@ let LoginForm = props => {
         <form className="form" onSubmit={handleSubmit(submit)}>
             <div>
                 <label htmlFor="email">E-mail</label>
-                <Field name="email" component="input" type="text" />
+                <Field name="email" component="input" type="text" id="email" />
             </div>
             <div>
                 <label htmlFor="password">Password</label>
-                <Field name="password" component="input" type="text" />
+                <Field name="password" component="input" type="text" id="password" />
             </div>
             <button type="submit">Sign in</button>
         </form>

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

@@ -0,0 +1,63 @@
+import React from 'react'
+import { Field, reduxForm } from 'redux-form';
+
+import './reg-form-event.scss';
+
+let RegFormEvent = props => {
+    const { handleSubmit, regEventSubmit, eventType } = props;
+
+    const submit = value => {
+        value.event = [
+            {
+                type: eventType
+            }
+        ];
+
+        //regEventSubmit(value);
+        console.log(value);
+    };
+
+    return (
+        <form className="form" onSubmit={handleSubmit(submit)}>
+             <div>
+                <label htmlFor="name">Full name</label>
+                <Field name="name" component="input" type="text" id="name"/>
+            </div>
+            <div>
+                <label htmlFor="phone">Phone</label>
+                <Field name="phone" component="input" type="phone" id="phone"/>
+            </div>
+            <div>
+                <label htmlFor="email">E-mail</label>
+                <Field name="email" component="input" type="text" />
+            </div>
+            <div>
+                <label htmlFor="male">Male</label>
+                <Field name="sex" component="input" type="radio" id="male" value="male" checked="checked"/>
+
+                <label htmlFor="female">female</label>
+                <Field name="sex" component="input" type="radio" id="female" value="female"/>
+            </div>
+            <div>
+                <label>Distance</label>
+                <Field name="eventType" component="select">
+                    <option value="male">Half marathone</option>
+                    <option value="female">Marathone</option>
+                </Field>
+            </div>
+            <div>
+                <label htmlFor="userCountry">Country</label>
+                <Field name="userCountry" component="input" type="text" id="userCountry"/>
+            </div>
+            <div className="btn-group">
+                <button className="btn" type="submit">Register</button>
+            </div>
+        </form>
+        )
+};
+
+RegFormEvent = reduxForm({
+    form: 'regFormEvent'
+})(RegFormEvent)
+
+export default RegFormEvent

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

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

src/components/registration-form/RegistrationForm.js

@@ -15,7 +15,7 @@ let RegistrationForm = props => {
         <form className="form" onSubmit={handleSubmit(submit)}>
             <div>
                 <label htmlFor="name">Full name</label>
-                <Field name="name" component="input" type="text" />
+                <Field name="name" component="input" type="text" id="name"/>
             </div>
             <div>
                 <label htmlFor="male">male</label>
@@ -23,27 +23,22 @@ let RegistrationForm = props => {
 
                 <label htmlFor="female">female</label>
                 <Field name="sex" component="input" type="radio" id="female" value="female"/>
-
-                {/*<Field name="sex" component="select">
-                    <option value="male">male</option>
-                    <option value="female">female</option>
-                </Field>*/}
             </div>
             <div>
                 <label htmlFor="phone">Phone</label>
-                <Field name="phone" component="input" type="phone" />
+                <Field name="phone" component="input" type="phone" id="phone"/>
             </div>
             <div>
                 <label htmlFor="email">E-mail</label>
-                <Field name="email" component="input" type="email" />
+                <Field name="email" component="input" type="email" id="email"/>
             </div>
             <div>
                 <label htmlFor="password">Password</label>
-                <Field name="password" component="input" type="text" />
+                <Field name="password" component="input" type="text" id="password"/>
             </div>
             <div>
                 <label htmlFor="confirmPassword">Confirm Password</label>
-                <Field name="confirmPassword" component="input" type="text" />
+                <Field name="confirmPassword" component="input" type="text" id="confirmPassword"/>
             </div>
             
             <button type="submit">Check in</button>

src/components/registration-form/registrationForm.scss

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

src/components/sidebar/Sidebar.js

@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import { connect } from "react-redux";
 
 import { showSidebar } from "../../actions/show-sidebar";
+import { getLogoutUserSubmit } from "../../actions/logout";
 
 import './sidebar.scss';
 
@@ -35,14 +36,8 @@ const siteMenu = [
 ];
 
 export class Sidebar extends React.Component {
-    logout(e) {
-        localStorage.removeItem('showProfile');
-        document.location.reload(true);
-    }
-
     render() {
-        //console.log(this.props)
-	    const { showSidebar, showSidebarFlag } = this.props;
+	    const { showSidebar, showSidebarFlag, getLogoutUserSubmit } = this.props;
         return (
             <div className={ !showSidebarFlag ? 'menu close' : 'menu' }>
                 <nav>
@@ -53,7 +48,7 @@ export class Sidebar extends React.Component {
                     </div>
                     <ul>
 						{
-                            localStorage.showProfile && <li><Link to="/profile">Profile</Link></li>
+                            localStorage.user && <li><Link to="/profile">Profile</Link></li>
 						}
 						
                         {
@@ -64,11 +59,11 @@ export class Sidebar extends React.Component {
                             )
                         }
 						{
-                            !localStorage.showProfile && <li><Link to="/login">Login</Link></li>
+                            !localStorage.user && <li><Link to="/login">Login</Link></li>
 						}
                         {
-                            localStorage.showProfile && <li>
-                                <button className="logout" onClick={this.logout}>
+                            localStorage.user && <li>
+                                <button className="logout" onClick={getLogoutUserSubmit}>
                                     <i className="fa fa-sign-out"></i>
                                 </button>
                             </li>
@@ -94,5 +89,5 @@ const mapStateToProps = state => {
 
 export default connect(
     mapStateToProps,
-    { showSidebar }
+    { showSidebar, getLogoutUserSubmit }
 )(Sidebar);

src/conteiners/adminMyEventsPage/adminMyEventsPage.js

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

src/conteiners/adminMyEventsPage/adminMyEventsPage.scss

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

src/conteiners/eventCard/EventCard.js

@@ -1,15 +1,19 @@
 import React from 'react';
-//import { connect } from "react-redux";
+import { connect } from "react-redux";
+
+import { regEventSubmit } from "../../actions/registrationEvent";
 
 import './eventCard.scss';
 
 import Sidebar from '../../components/sidebar/Sidebar';
 import Footer from '../../components/footer/Footer';
+import RegFormEvent from '../../components/reg-form-event/RegFormEvent';
 
 export class EventCard extends React.Component {
     render() {
-        const { event } = this.props;
+        const { event, regEventSubmit } = this.props;
         const dateArr = new Date(event.eventDate).toDateString().split(' ');
+        const video = event.contentVideo;
         console.log( event );
         return (
             <>
@@ -43,34 +47,56 @@ export class EventCard extends React.Component {
                     <div className="container-wrap">
                         <div className="event-card-info">
                             <div className="info-content">
-                                <p><span>Age limit: </span>{event.ageLimit}</p>
-                                <p><span>Aid stations: </span>{event.aidStations}</p>
-                                <p><span>Award medals: </span>{event.awardMedals}</p>
-                                <p><span>Equipment storage: </span>{event.equipmentStorage}</p>
-
-                                <div className="price">
-                                    <h3>Price</h3>
-                                    <p><span>Half marathone: </span>{event.halfmarathoneDistancePrice}</p>
-                                    <p><span>Marathone: </span>{event.marathoneDistancePrice}</p>
-                                </div>
+                                <p>Age limit: <span>{event.ageLimit}</span></p>
+                                <p>Aid stations: <span>{event.aidStations}</span></p>
+                                <p>Award medals: <span>{event.awardMedals}</span></p>
+                                <p>Equipment storage: <span>{event.equipmentStorage}</span></p>
                                 
-                                <p><span>Maximum time: </span>{event.maximumTime}</p>
+                                <p>Maximum time: <span>{event.maximumTime}</span></p>
+                                <p>Parking: <span>{event.parking}</span></p>
+                                <p>Refreshments: <span>{event.refreshments}</span></p>
 
                                 <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>
                                 
-                                <p><span>Parking: </span>{event.parking}</p>
-                                <p><span>Refreshments: </span>{event.refreshments}</p>
+                                {
+                                    event.map && <div className="map-wrap">
+                                        {/* click open pop-up with map*/}
+                                        <img src={event.map} alt="map" />
+                                    </div>
+                                }
 
-                                {/*{event.contentVideo}
-                                {event.mainBannerPicture}
-                                {event.map}
-                                */}
                             </div>
                             <div className="reg-form">
-                                <div className="btn-group">
-                                    <button className="btn" type="button">Register</button>
+                                <div className="price">
+                                    <h3>Price</h3>
+                                    {
+                                        event.halfmarathoneDistancePrice && <div className="cost">
+                                            <h6>Half marathone:</h6>
+                                            <span>{event.halfmarathoneDistancePrice}</span>
+                                        </div>
+                                    }
+                                    {
+                                        event.marathoneDistancePrice && <div className="cost">
+                                            <h6>Marathone:</h6>
+                                            <span>{event.marathoneDistancePrice}</span>
+                                        </div>
+                                    }
+                                </div>
+                                <div>
+                                    <RegFormEvent eventType={event.eventType} regEventSubmit={regEventSubmit}/>
                                 </div>
                             </div>
                         </div>
@@ -82,15 +108,15 @@ export class EventCard extends React.Component {
     }
 }
 
-export default EventCard;
+//export default EventCard;
 
 /*const mapStateToProps = state => {
     return {
         events: state.getEvents.events
     };
-};
+};*/
 
 export default connect(
-    mapStateToProps,
-    { getAllEvents }
-)(Events);*/
+    null,
+    { regEventSubmit }
+)(EventCard);

src/conteiners/eventCard/eventCard.scss

@@ -21,6 +21,11 @@
             bottom: 0;
             right: 0;
             transform: translate(-50%,-50%);
+            width: 100%;
+
+            @media (max-width: $xsmall) {
+                width: auto;
+            }
         }
     }
 
@@ -82,21 +87,40 @@
         .info-content {
             width: 50%;
             padding: 0 1rem;
-
-            .price {
-                margin: 3rem 0;
-            }
             
             .overview {
-                margin: 4rem 0;
+                margin: 3rem 0;
+                padding: 2rem 0;
+                border-bottom: 1px solid $color-grey-light;
+                border-top: 1px solid $color-grey-light;
+
+                p {
+                    font-weight: $normal;
+                    font-size: 1.6rem;
+                    margin-top: 2rem;
+                }
+
+                img {
+                    width: 100%;
+                }
+
+                .event-video {
+                    video {
+                        width: 100%;
+                        height: auto;
+                    }
+                }
             }
 
             p {
                 font-size: 1.4rem;
                 margin-bottom: 1.5rem;
+                font-weight: $bold;
+                text-align: justify;
 
                 span {
-                    font-weight: $bold;
+                    font-weight: $normal;
+                    font-size: 1.6rem;
                 }
             }
 
@@ -104,6 +128,12 @@
                 font-size: 2.4rem;
                 font-weight: $bold;
             }
+
+            .map-wrap {
+                img {
+                    width: 100%;
+                }
+            }
         }
 
         .reg-form {
@@ -136,4 +166,36 @@
             width: 100%;
         }
     }
+}
+
+.price {
+    margin: 3rem 0;
+    max-width: 25rem;
+    background: $color-grey-light;
+    margin: 0 auto;
+    text-align: center;
+    padding: 1.5rem;
+
+    h3 {
+        font-size: 2.4rem;
+        font-weight: $bold;
+        margin-bottom: 2rem;
+    }
+
+    .cost {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        h6 {
+            font-weight: 400;
+            font-size: 1.6rem;
+        }
+
+        span {
+            color: $color-blue;
+            font-size: 2.4rem;
+            font-weight: $bold;
+        }
+    }
 }

src/conteiners/login/Login.js

@@ -4,6 +4,8 @@ import { Link } from "react-router-dom";
 
 import { postLoginSubmit } from "../../actions/login";
 
+import './login.scss';
+
 import LoginForm from '../../components/login-form/LoginForm';
 
 export class Login extends React.Component {
@@ -14,7 +16,7 @@ export class Login extends React.Component {
         return (
             <div>
                 <LoginForm postLoginSubmit={postLoginSubmit} history={ history }/>
-                <p>Don't have an account? <Link to="/registration">Sign up now</Link></p>
+                <p className="form-quest">Don't have an account? <Link to="/registration">Sign up now</Link></p>
             </div>
         )
     }

src/conteiners/login/login.scss

@@ -0,0 +1,7 @@
+@import "../../styles/variables";
+
+.form-quest {
+    a {
+        color: $color-mint;
+    }
+}

src/conteiners/registrationPage/RegistrationPage.js

@@ -4,6 +4,8 @@ import { Link } from "react-router-dom";
 
 import { postCheckInSubmit } from "../../actions/registration";
 
+import './registration-page.scss';
+
 import RegistrationForm from '../../components/registration-form/RegistrationForm';
 
 export class Login extends React.Component {
@@ -11,7 +13,7 @@ export class Login extends React.Component {
         return (
             <div>
                 <RegistrationForm postCheckInSubmit={this.props.postCheckInSubmit}/>
-                <p>You have an account? <Link to="/login">Login now</Link></p>
+                <p className="form-quest">You have an account? <Link to="/login">Login now</Link></p>
             </div>
         )
     }

src/conteiners/registrationPage/registration-page.scss

@@ -0,0 +1,7 @@
+@import "../../styles/variables";
+
+.form-quest {
+    a {
+        color: $color-mint;
+    }
+}

src/reducers/combineReducers.js

@@ -7,6 +7,7 @@ import login from "./login";
 import registration from "./registration";
 import getEvents from "./getAllEvents";
 import photogalaryReducer from "./photogalaryReducer"
+import logout from "./logout";
 
 export default combineReducers({
 	form: formReducer,
@@ -15,5 +16,6 @@ export default combineReducers({
     registration,
     getEvents,
     sidebar,
-    photogalaryReducer
+    photogalaryReducer,
+    logout
 });

src/reducers/login.js

@@ -1,8 +1,9 @@
 import * as types from "../actionTypes/actionTypes";
+import { writeLocalStorage } from "../actions/login";
 
 const initialState = {
     user: {},
-	showProfile: false
+    showProfile: false
 }
 
 export default (state = initialState, action) => {
@@ -12,14 +13,8 @@ export default (state = initialState, action) => {
         }
 
         case types.POST_REQUEST_SUCCESS_LOGIN: {
-            //action.payload.message
-            console.log('user:', action.payload.user);
-            //localStorage.setItem('userName', `${action.payload.user.name}`);
-            localStorage.setItem('showProfile', "true");
-            localStorage.setItem(
-                "user",
-                JSON.stringify(action.payload.user)
-            )
+            writeLocalStorage(action.payload.user);
+            
             return {
                 ...state,
                 user: action.payload.user,
@@ -28,7 +23,7 @@ export default (state = initialState, action) => {
         }
 
         case types.POST_REQUEST_ERROR_LOGIN: {
-            console.log('error');
+            console.log('error', action.payload.message);
             return state;
         }
 

src/reducers/logout.js

@@ -0,0 +1,29 @@
+import * as types from "../actionTypes/actionTypes";
+import { clearLocalStorage } from "../actions/logout";
+
+const initialState = {
+    logOut: false
+}
+
+export default (state = initialState, action) => {
+    switch (action.type) {
+        case types.GET_LOGOUT_USER: {
+            return state;
+        }
+
+        case types.GET_LOGOUT_USER_SUCCESS: {
+            //console.log('logout',action.payload.logOut);
+            clearLocalStorage();
+            
+            return state
+        }
+
+        case types.GET_LOGOUT_USER_ERROR: {
+            console.log('error');
+            return state;
+        }
+
+        default:
+            return state;
+    }
+}

src/reducers/registrationEvent.js

@@ -0,0 +1,26 @@
+import * as types from "../actionTypes/actionTypes";
+
+const initialState = {
+    user: {}
+}
+
+export default (state = initialState, action) => {
+    switch (action.type) {
+        case types.POST_REGISTRATION_EVENT: {
+            return state;
+        }
+
+        case types.POST_REGISTRATION_EVENT_SUCCESS: {
+            console.log('regEventUser', action.payload );
+            return state;
+        }
+
+        case types.POST_REGISTRATION_EVENT_ERROR: {
+            console.log('error');
+            return state;
+        }
+
+        default:
+            return state;
+    }
+}