creting registration on the event

src/actionTypes/actionTypes.js

@@ -42,5 +42,9 @@ 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 PHOTOGALARY_ONCHAGE = "PHOTOGALARY_ONCHAGE";

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/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,58 @@ 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*/}
+                                        <a href="#">
+                                            <img src={event.map} alt="map" />
+                                        </a>
+                                    </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 +110,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/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;
+    }
+}