continue creating event card page

src/conteiners/eventCard/EventCard.js

@@ -1,27 +1,28 @@
 import React from 'react';
 //import { connect } from "react-redux";
-//import { Link } from "react-router-dom";
-
-//import { getAllEvents } from "../../actions/getAllEvents";
 
 import './eventCard.scss';
 
 import Sidebar from '../../components/sidebar/Sidebar';
 
 export class EventCard extends React.Component {
-    componentDidMount() {
-        //this.props.getAllEvents();
-    }
-
     render() {
-        console.log( this.props);
+        const { event } = this.props;
+        console.log( event );
         return (
             <>
                 <Sidebar />
-                <div className="container-wrap">
-                    <div className="caption-page">
-                        <h2>Event card</h2>
-                    </div>                 
+                <div className="event-card">
+                    <div className="event-card-cap">
+                        <div className="event-card-img">
+                            <img src={event.mainBannerPicture} alt="image" />
+                        </div>
+                        <div className="event-card-title">
+                            <div className="container-wrap">
+                                <h2>{event.title}</h2>
+                            </div>
+                        </div>
+                    </div>                                   
                 </div>
             </>
         )

src/conteiners/eventCard/eventCard.scss

@@ -1,2 +1,27 @@
 @import "../../styles/variables";
 
+.event-card {
+    &-cap {
+        /*display: flex;
+        flex-wrap: wrap;*/
+        position: relative;
+        overflow: hidden;
+    }
+
+    &-img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: -1;
+
+        img {
+            width: 100%;
+        }
+    }
+
+    &-title {
+        background: rgba(0, 0, 0, 0.6);
+        padding: 50px 0;
+    }
+}

src/conteiners/events/Events.js

@@ -1,7 +1,4 @@
 import React from 'react';
-import { connect } from "react-redux";
-
-import { getAllEvents } from "../../actions/getAllEvents";
 
 import './events.scss';
 
@@ -9,14 +6,9 @@ import Sidebar from '../../components/sidebar/Sidebar';
 import FiltersEvents from '../../components/filtersEvents/FiltersEvents';
 import EventInfoShort from '../../components/eventInfoShort/EventInfoShort';
 
-export class Events extends React.Component {
-    componentDidMount() {
-        this.props.getAllEvents();
-    }
-
+export default class Events extends React.Component {
     render() {
         const { events } = this.props;
-        //console.log("events", events , this.props);
         return (
             <>
                 <Sidebar />
@@ -50,15 +42,4 @@ export class Events extends React.Component {
             </>
         )
     }
-}
-
-const mapStateToProps = state => {
-    return {
-        events: state.getEvents.events
-    };
-};
-
-export default connect(
-    mapStateToProps,
-    { getAllEvents }
-)(Events);
+}

src/reducers/getAllEvents.js

@@ -11,7 +11,7 @@ export default (state = initialState, action) => {
         }
 
         case types.GET_REQUEST_SUCCESS_EVENTS: {
-            console.log('events',action.payload.events);
+            //console.log('events',action.payload.events);
             return {
                 ...state,
                 events: action.payload.events

src/router.js

@@ -2,6 +2,8 @@ import React from 'react'
 import { Switch, Route } from "react-router-dom";
 import { connect } from "react-redux";
 
+import { getAllEvents } from "./actions/getAllEvents";
+
 import AdminMainPage from './conteiners/adminMainPage/adminMainPage';
 import AdminAddEventPage from './conteiners/adminAddEventPage/adminAddEventPage';
 import AdminMyEventsPage from './conteiners/adminMyEventsPage/adminMyEventsPage';
@@ -18,22 +20,32 @@ import EventCard from './conteiners/eventCard/EventCard';
 import AdminAddPhotogalarytPage from "./conteiners/adminPhotogalaryPage/adminPhotogalaryPage"
 
 export class Router extends React.Component {
+    componentDidMount() {
+        this.props.getAllEvents();
+    }
+
     render() {
         const { events } = this.props;
 		return(
 			<div className="container">
 			    <Switch>
                     <Route exact path="/" component={Home} />
-                    <Route exact path="/events" component={Events} />
+
+                    <Route exact path="/events" render={ props => (
+                        <Events events={events} />
+                    )} />
+
                     <Route exact path="/result" component={Result} />
                     <Route exact path="/gallery" component={Gallery} />
                     <Route exact path="/reviews" component={Reviews} />
 
                     {
                         events.map(event =>
-                            <Route exact path={`/events/${event._id}`} key={event._id} render={ props => (
-                                <EventCard event={event}/>
-                            )} />                            
+                            <Route exact
+                                path={`/events/${event._id}`}
+                                key={event._id}
+                                render={ props => (<EventCard event={event} />) }
+                            />                            
                         )
                     }
 
@@ -59,5 +71,6 @@ const mapStateToProps = state => {
 };
 
 export default connect(
-    mapStateToProps
+    mapStateToProps,
+    { getAllEvents }
 )(Router);