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

src/components/login-form/LoginForm.js

@@ -4,11 +4,11 @@ import { Field, reduxForm } from 'redux-form';
 import './login.scss';
 
 let LoginForm = props => {
-    const { handleSubmit, postLoginSubmit } = props;
+    const { handleSubmit, postLoginSubmit, history } = props;
 
     const submit = value => {
-        //console.log(value);
         postLoginSubmit(value);
+        history.push('/profile');
     };
 
     return (

src/components/sidebar/Sidebar.js

@@ -33,8 +33,15 @@ const siteMenu = [
 ];
 
 export class Sidebar extends React.Component {
+   // const {history} = this.props;
+
+    logout(e) {
+        localStorage.removeItem('showProfile');
+    }
+
     render() {
-	const { showProfile } = this.props;
+        console.log(this.props)
+	//const { showProfile } = this.props;
         return (
             <div className="menu">
                 <nav>
@@ -45,7 +52,7 @@ export class Sidebar extends React.Component {
                     </div>
                     <ul>
 						{
-							showProfile && <li><Link to="/profile">Profile</Link></li>
+                            localStorage.showProfile && <li><Link to="/profile">Profile</Link></li>
 						}
 						
                         {
@@ -56,10 +63,10 @@ export class Sidebar extends React.Component {
                             )
                         }
 						{
-							!showProfile && <li><Link to="/login">Login</Link></li>
+                            !localStorage.showProfile && <li><Link to="/login">Login</Link></li>
 						}
-						{
-							showProfile && <li><button>Logout</button></li>
+                        {
+                            localStorage.showProfile && <li><button onClick={this.logout}>Logout</button></li>
 						}
 						
                     </ul>

src/conteiners/eventCard/EventCard.js

@@ -8,6 +8,7 @@ import Sidebar from '../../components/sidebar/Sidebar';
 export class EventCard extends React.Component {
     render() {
         const { event } = this.props;
+        const dateArr = new Date(event.eventDate).toDateString().split(' ');
         console.log( event );
         return (
             <>
@@ -15,14 +16,47 @@ export class EventCard extends React.Component {
                 <div className="event-card">
                     <div className="event-card-cap">
                         <div className="event-card-img">
-                            <img src={event.mainBannerPicture} alt="image" />
+                            <img src={event.mainBannerPicture} alt="banner" />
                         </div>
                         <div className="event-card-title">
                             <div className="container-wrap">
                                 <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>
+                                <div>
+                                    <button>Register</button>
+                                </div>
                             </div>
                         </div>
-                    </div>                                   
+                    </div>            
+                    <div className="container-wrap">
+                        <div className="event-card-info">
+                            <p>{event.ageLimit}</p>
+                            <p>{event.aidStations}</p>
+                            <p>{event.awardMedals}</p>
+                            <p>{event.equipmentStorage}</p>
+                            <p>{event.halfmarathoneDistancePrice}</p>
+                            <p>{event.marathoneDistancePrice}</p>
+                            <p>{event.maximumTime}</p>
+                            <p>{event.overview}</p>
+                            <p>{event.parking}</p>
+                            <p>{event.refreshments}</p>
+
+                            {/*{event.contentVideo}
+                             {event.mainBannerPicture}
+                             {event.map}
+                             */}
+                        </div>
+                    </div>
                 </div>
             </>
         )

src/conteiners/eventCard/eventCard.scss

@@ -2,18 +2,17 @@
 
 .event-card {
     &-cap {
-        /*display: flex;
-        flex-wrap: wrap;*/
         position: relative;
         overflow: hidden;
     }
 
     &-img {
         position: absolute;
-        top: 0;
+        top: 50%;
         left: 0;
         right: 0;
         z-index: -1;
+        transform: translateY(-50%);
 
         img {
             width: 100%;
@@ -21,7 +20,54 @@
     }
 
     &-title {
-        background: rgba(0, 0, 0, 0.6);
-        padding: 50px 0;
+        background: rgba($color-black, 0.7);
+        padding: 60px 0 40px;
+        color: $color-white;
+
+        h2 {
+            font-size: 3rem;
+            font-weight: $bold;
+        }
+
+        .country {
+            font-size: 2rem;
+            font-weight: $light;
+        }
+
+        .event-type {
+            font-size: 2rem;
+            margin-bottom: 10px;
+        }
+
+        .date {
+            text-align: right;
+
+            p {
+                display: inline-block;
+                font-weight: $bold;
+                font-size: 2rem;
+                padding: 0 10px;
+                background: rgba($color-white, 0.7);
+                color: $color-black;
+            }
+
+            span {
+                &:first-child {
+                    font-weight: $normal;
+                }
+
+                &:last-child {
+                    font-size: 1.4rem;
+                    font-weight: $normal;
+                }
+            }
+        }
+    }
+
+    &-info {
+        p {
+            font-size: 1.4rem;
+            margin-bottom: 10px;
+        }
     }
 }

src/conteiners/home/Home.js

@@ -12,7 +12,7 @@ export default class Home extends React.Component {
     render() {
         return (
             <>
-                <Sidebar/>
+                <Sidebar history={this.props.history}/>
                 <div className="hero">
                     <div className="container-wrap">
                         <h1>International competitions among professionals and amateurs</h1>                       

src/conteiners/login/Login.js

@@ -9,9 +9,11 @@ import LoginForm from '../../components/login-form/LoginForm';
 export class Login extends React.Component {
     render() {
         const { postLoginSubmit } = this.props;
+        const history = this.props.history;
+        //console.log(this.props);
         return (
             <div>
-                <LoginForm postLoginSubmit={postLoginSubmit} />
+                <LoginForm postLoginSubmit={postLoginSubmit} history={ history }/>
                 <p>Don't have an account? <Link to="/registration">Sign up now</Link></p>
             </div>
         )

src/index.js

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

src/reducers/login.js

@@ -14,6 +14,12 @@ 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)
+            )
             return {
                 ...state,
                 user: action.payload.user,

src/router.js

@@ -54,7 +54,7 @@ export class Router extends React.Component {
                     <Route exact path="/login" component={Login} />
                     <Route exact path="/registration" component={RegistrationPage} />
 
-					<Route exact path="/profile" component={Profile} />
+                    <Route exact path="/profile" component={Profile} />
                     
 			           
 			        <Route exact path = '/admin' component = {AdminMainPage} />