add events on the home page

src/components/sidebar/Sidebar.js

@@ -37,6 +37,7 @@ export class Sidebar extends React.Component {
 
     logout(e) {
         localStorage.removeItem('showProfile');
+        document.location.reload(true);
     }
 
     render() {

src/conteiners/home/Home.js

@@ -1,20 +1,29 @@
 import React from 'react';
 
 import './home.scss';
+import logo from '../../assets/img/logo.png';
+import videoBg from '../../assets/img/video-bg.mp4';
 
 import Sidebar from '../../components/sidebar/Sidebar';
+import EventInfoShort from '../../components/eventInfoShort/EventInfoShort';
 
 export default class Home extends React.Component {
     state = {
-        videoURL: 'https://gcs-vimeo.akamaized.net/exp=1562893179~acl=%2A%2F1021052489.mp4%2A~hmac=6ef33efd6a7867f05a06d888e576e87a48b2f33f42ca65ed7e78cd0d7a5cf3b0/vimeo-prod-skyfire-std-us/01/2799/9/238996987/1021052489.mp4'
+        videoURL: 'https://gcs-vimeo.akamaized.net/exp=1564520542~acl=%2A%2F1021052489.mp4%2A~hmac=faf2d737dfcc461ab05364a37b61f39c7e8afda27ec51769eb01027130e159be/vimeo-prod-skyfire-std-us/01/2799/9/238996987/1021052489.mp4'
     }
 
     render() {
+        const { events } = this.props;
+        console.log(events);
         return (
             <>
                 <Sidebar history={this.props.history}/>
                 <div className="hero">
-                    <div className="container-wrap">
+                    <div className="container-wrap hero-wrap">
+                        <div className="hero-logo">
+                            <img src={logo} alt="logo" />
+                            <h3><span>Just</span>tri it</h3>
+                        </div>
                         <h1>International competitions among professionals and amateurs</h1>                       
                     </div>                    
 
@@ -22,11 +31,32 @@ export default class Home extends React.Component {
                     <div className="bg-img"></div>
 
                     <video id="background-video" loop autoPlay>
-                        <source src={this.state.videoURL} type="video/mp4" />
-                        <source src={this.state.videoURL} type="video/ogg" />
+                        <source src={videoBg} type="video/mp4" />
+                        <source src={videoBg} type="video/ogg" />
                         Your browser does not support the video tag.
                     </video>
                 </div>
+                <div className="container-wrap home events">
+                    <div className="events-content">
+                        <h4>Last Events</h4>
+
+                        <div className="events-list">
+                            {
+                                events.reverse().map((event, ind) =>
+                                    ind < 4 && <EventInfoShort
+                                        key={event._id}
+                                        title={event.title}
+                                        country={event.country}
+                                        city={event.city}
+                                        id={event._id}
+                                        eventDate={event.eventDate}
+                                        imgSrc={event.mainBannerPicture}
+                                    />
+                                )
+                            }
+                        </div>
+                    </div>
+                </div>
             </>
         )
     }

src/conteiners/home/home.scss

@@ -7,8 +7,44 @@
     display: flex;
     align-items: center;
 
+    &-wrap {
+    }
+
+    &-logo {
+        position: relative;
+        z-index: 4;
+
+        @media (min-width: 992px) {
+            display: flex;
+            align-content: center;
+            margin-bottom: 30px;
+        }
+
+        img {
+            max-width: 250px;
+        }
+
+        h3 {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            padding-left: 50px;
+            padding-top: 15px;
+            font-size: 6rem;
+            text-transform: uppercase;
+            color: $color-white;
+            font-weight: $bold;
+            line-height: 1;
+
+            span {
+                display: block;
+                font-size: 10rem;
+            }
+        }
+    }
+
     h1 {
-        font-size: 36px;
+        font-size: 4rem;
         color: $color-white;
         position: relative;
         z-index: 4;
@@ -55,4 +91,15 @@
             display: none;
         }
     }
+}
+
+.home {
+    &.events {
+        padding-top: 60px;
+        background-image: url('../../assets/img/girl-bg.jpg');
+    }
+
+    .event-content {
+        min-height: 180px;
+    }
 }

src/index.js

@@ -2,7 +2,7 @@ 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 { createBrowserHistory } from 'history';
 
 import * as serviceWorker from './serviceWorker';
 import './index.scss';
@@ -11,7 +11,7 @@ import Router from './router';
 import { store } from "./store.js";
 
 
-const history = createHistory();
+const history = createBrowserHistory();
 
 ReactDOM.render(
     <Provider store={store}>

src/router.js

@@ -31,7 +31,9 @@ export class Router extends React.Component {
 		return(
 			<div className="container">
 			    <Switch>
-                    <Route exact path="/" component={Home} />
+                    <Route exact path="/" render={props => (
+                        <Home events={events} />
+                    )} />
 
                     <Route exact path="/events" render={ props => (
                         <Events events={events} />