Merge branch 'dev' of http://gitlab.a-level.com.ua/Entony/FEA_12_TRIATHLON into Marina

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/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/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/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;
+    }
+}