creating events page

src/components/eventInfoShort/EventInfoShort.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Link } from "react-router-dom";
+
+import './eventInfoShort.scss';
+
+export class EventInfoShort extends React.Component {
+    render() {
+        const { title, country, city, eventDate, imgSrc, id } = this.props;
+        const dateArr = new Date(eventDate).toDateString().split(' ');
+        return (
+            <div className="event-item">
+                <Link to={`/events/${id}`}>
+                    <div className="event-content">
+                        <div className="event-cap">
+                            <h3>{title}</h3>
+                            <div className="place">{country}, {city}</div>
+                        </div>
+                        <div className="event-date">
+                            {
+                                dateArr.map(
+                                    (el, ind) => ind > 0 ? <span>{el} </span> : null
+                                )
+                            }
+                        </div>
+                        <div className="bg"></div>
+                        <div className="event-picture">
+                            <img src={imgSrc} alt={title} />
+                        </div>
+                    </div>
+                </Link>
+            </div>
+        )
+    }
+}
+
+export default EventInfoShort;

src/components/eventInfoShort/eventInfoShort.scss

@@ -0,0 +1,127 @@
+@import "../../styles/variables";
+
+.event {
+    &-item {
+        padding: 0 5px 20px 5px;
+
+        a {
+            display: block;
+            height: 100%;
+
+            &:hover {
+                .event-cap,
+                .event-date {
+                    color: $color-white;
+                }
+
+                .bg,
+                .event-picture {
+                    display: block;
+                }
+            }
+        }
+    }
+
+    &-content {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        height: 100%;
+        padding: 10px;
+        border-top: solid 3px $color-blue;
+        background: $color-grey-2;
+
+        h3 {
+            font-size: 1.3rem;
+            text-transform: uppercase;
+        }
+
+        .place {
+            font-size: 1.4rem;
+        }
+
+        .bg {
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.6);
+            z-index: 2;
+        }
+    }
+
+    &-cap {
+        position: relative;
+        z-index: 3;
+        color: $color-white;
+    }
+
+    &-date {
+        position: relative;
+        text-align: right;
+        z-index: 3;
+        font-size: 1.4rem;
+        color: $color-white;
+
+        span {
+            &:first-child {
+                font-weight: $semi-bold;
+            }
+
+            &:last-child {
+                display: block;
+                font-size: 1.1rem;
+            }
+        }
+    }
+
+    &-picture {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow: hidden;
+
+        img {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%,-50%);
+            width: 100%;
+        }
+    }
+
+    @media (min-width: 768px) {
+        &-item {
+            width: 50%;
+
+            a {
+                &:hover {
+                    .event-cap,
+                    .event-date {
+                        color: $color-white;
+                    }
+
+                    .bg,
+                    .event-picture {
+                        display: block;
+                    }
+                }
+            }
+        }
+
+        &-date,
+        &-cap {
+            color: $color-black;
+        }
+
+        &-picture, &-content .bg {
+            display: none;
+        }
+    }
+}

src/components/sidebar/sidebar.scss

@@ -1,7 +1,7 @@
 @import "../../styles/variables";
 
 .menu {
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
     z-index: 1000;
@@ -17,7 +17,7 @@
         }
 
         .menu-skew {
-            left: -160px;
+            left: -200px;
             opacity: 1;
 
             .img-bg {

src/conteiners/events/Events.js

@@ -7,19 +7,37 @@ import { getAllEvents } from "../../actions/getAllEvents";
 import './events.scss';
 
 import Sidebar from '../../components/sidebar/Sidebar';
+import EventInfoShort from '../../components/eventInfoShort/EventInfoShort';
 
 export class Events extends React.Component {
     componentDidMount() {
         this.props.getAllEvents();
-        console.log('events' , this.props.events);
     }
 
     render() {
+        const { events } = this.props;
+        console.log("events", events , this.props);
         return (
             <>
                 <Sidebar />
                 <div className="container-wrap">
-                    page Events
+                    <div className="events-content">
+                        Events
+
+                        <div className="events-list">
+                            {
+                                events.map(event => <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/events/events.scss

@@ -1 +1,16 @@
 @import "../../styles/variables";
+
+.events {
+    &-content {
+        padding: 50px 0;
+    }
+
+    &-list {
+        margin: 0 -5px;
+
+        @media (min-width: 768px) {
+            display: flex;
+            flex-wrap: wrap;
+        }
+    }
+}

src/reducers/getAllEvents.js

@@ -1,7 +1,7 @@
 import * as types from "../actionTypes/actionTypes";
 
 const initialState = {
-    events: {}
+    events: []
 }
 
 export default (state = initialState, action) => {
@@ -12,7 +12,10 @@ export default (state = initialState, action) => {
 
         case types.GET_REQUEST_SUCCESS_EVENTS: {
             console.log('events',action.payload.events);
-            return state;
+            return {
+                ...state,
+                events: action.payload.events
+            };
         }
 
         case types.GET_REQUEST_ERROR_EVENTS: {

src/router.js

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

src/styles/base.scss

@@ -97,7 +97,7 @@ acronym {
 
 body {
     font-family: $typo-1;
-    line-height: 1.7 !important;
+    line-height: 1.5 !important;
     font-size: inherit !important;
     box-sizing: border-box;
     min-width: 320px;
@@ -125,10 +125,9 @@ button {
 
 .container {
     &-wrap {
-        //max-width: 1440px;
         width: 100%;
         //padding-left: 16px;
-        padding-right: 16px;
-        padding-left: 380px;
+        padding-right: 50px;
+        padding-left: 330px;
     }
 }

src/styles/variables.scss

@@ -4,6 +4,7 @@ $color-white: #ffffff;
 $color-black: #000000;
 $color-grey-light: #eeeeee;
 $color-mint: #5acec2;
+$color-grey-2: #f5f5f5;
 
 //font-weight
 $light: 300;