created request event card

src/actionTypes/actionTypes.js

@@ -50,5 +50,9 @@ export const GET_LOGOUT_USER = "GET_LOGOUT_USER";
 export const GET_LOGOUT_USER_SUCCESS = "GET_LOGOUT_USER_SUCCESS";
 export const GET_LOGOUT_USER_ERROR = "GET_LOGOUT_USER_ERROR";
 
+export const GET_REQUEST_EVENT_CARD = "GET_REQUEST_EVENT_CARD";
+export const GET_REQUEST_SUCCESS_EVENT_CARD = "GET_REQUEST_SUCCESS_EVENT_CARD";
+export const GET_REQUEST_ERROR_EVENT_CARD = "GET_REQUEST_ERROR_EVENT_CARD";
+
 
 // export const PHOTOGALARY_ONCHAGE = "PHOTOGALARY_ONCHAGE";

src/actions/getRequestEvent.js

@@ -0,0 +1,29 @@
+import * as types from "../actionTypes/actionTypes";
+
+export const getEventCard = payload => ({
+    type: types.GET_REQUEST_EVENT_CARD,
+    payload
+});
+
+export const getEventCardSuccess = payload => ({
+    type: types.GET_REQUEST_SUCCESS_EVENT_CARD,
+    payload
+});
+
+export const getEventCardError = payload => ({
+    type: types.GET_REQUEST_ERROR_EVENT_CARD,
+    payload
+});
+
+export const getRequestEvent = id => {
+    return dispatch => {
+        let promise = fetch(`https://api-marathon.herokuapp.com/api/v1/event?_id=${id}`)
+
+        dispatch(getEventCard())
+
+        promise.then(
+            data => data.json().then(data => dispatch(getEventCardSuccess(data))),
+            error => dispatch(getEventCardError(error))
+        )
+    }
+}

src/conteiners/eventCard/EventCard.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { connect } from "react-redux";
 
+import { getRequestEvent } from "../../actions/getRequestEvent";
 import { regEventSubmit } from "../../actions/registrationEvent";
 
 import './eventCard.scss';
@@ -10,10 +11,14 @@ import Footer from '../../components/footer/Footer';
 import RegFormEvent from '../../components/reg-form-event/RegFormEvent';
 
 export class EventCard extends React.Component {
+    componentDidMount() {
+        this.props.getRequestEvent(this.props.match.params.id);
+    }
+
     render() {
         const { event, regEventSubmit } = this.props;
         const dateArr = new Date(event.eventDate).toDateString().split(' ');
-        console.log( event );
+        //console.log(event);
         return (
             <>
                 <Sidebar />
@@ -36,9 +41,6 @@ export class EventCard extends React.Component {
                                         }
                                     </p>
                                 </div>
-                                {/*<div>
-                                    <button>Register</button>
-                                </div>*/}
                             </div>
                             <div className="bg-black"></div>
                         </div>
@@ -72,8 +74,8 @@ export class EventCard extends React.Component {
                                 
                                 {
                                     event.map && <div className="map-wrap">
-                                        {/* click open pop-up with map*/}
-                                        <img src={event.map} alt="map" />
+                                        {/*click open pop-up with map*/}
+                                        <img src={event.map.toString()} alt="banner" />
                                     </div>
                                 }
 
@@ -107,15 +109,13 @@ export class EventCard extends React.Component {
     }
 }
 
-//export default EventCard;
-
-/*const mapStateToProps = state => {
+const mapStateToProps = state => {
     return {
-        events: state.getEvents.events
+        event: state.getEventCard.event
     };
-};*/
+};
 
 export default connect(
-    null,
-    { regEventSubmit }
+    mapStateToProps,
+    { regEventSubmit, getRequestEvent }
 )(EventCard);

src/conteiners/events/Events.js

@@ -1,4 +1,7 @@
 import React from 'react';
+import { connect } from "react-redux";
+
+import { getAllEvents } from "../../actions/getAllEvents";
 
 import './events.scss';
 
@@ -7,7 +10,11 @@ import FiltersEvents from '../../components/filtersEvents/FiltersEvents';
 import EventInfoShort from '../../components/eventInfoShort/EventInfoShort';
 import Footer from '../../components/footer/Footer';
 
-export default class Events extends React.Component {
+export class Events extends React.Component {
+    componentDidMount() {
+        this.props.getAllEvents();
+    }
+
     render() {
         const { events } = this.props;
         return (
@@ -44,4 +51,15 @@ export default class Events extends React.Component {
             </>
         )
     }
-}
+}
+
+const mapStateToProps = state => {
+    return {
+        events: state.getEvents.events
+    };
+};
+
+export default connect(
+    mapStateToProps,
+    { getAllEvents }
+)(Events);

src/conteiners/home/Home.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from "react-redux";
 
-import { getAllEvents } from "./actions/getAllEvents";
+import { getAllEvents } from "../../actions/getAllEvents";
 
 import './home.scss';
 
@@ -76,11 +76,9 @@ export class Home extends React.Component {
 
     render() {
         const { events } = this.props;
-        //console.log(events);
         return (
             <>
-                {/*<Sidebar history={this.props.history}/>*/}
-                <Sidebar />
+                <Sidebar/>
                 <div className="hero">
                     <div className="container-wrap">
                         <div className="hero-wrap">
@@ -106,7 +104,7 @@ export class Home extends React.Component {
                     <div className="events-content">
                         <h4>Last Events</h4>
 
-                        {/* <div className="events-list">
+                        <div className="events-list">
                             {
                                 events.reverse().map( (event,ind) => ind < 6 && <EventInfoShort
                                     key={event._id}
@@ -118,7 +116,7 @@ export class Home extends React.Component {
                                     imgSrc={event.mainBannerPicture} />
                                 )
                             }
-                        </div> */}
+                        </div>
                     </div>
                 </div>
 
@@ -144,14 +142,12 @@ export class Home extends React.Component {
 }
 
 const mapStateToProps = state => {
-    //console.log('state',state)
     return {
-        // events: state.getEvents.events,
-        user: state.login.user
+        events: state.getEvents.events
     };
 };
 
 export default connect(
-    mapStateToProps
-    // { getAllEvents }
-)(Router);
+    mapStateToProps,
+    { getAllEvents }
+)(Home);

src/reducers/combineReducers.js

@@ -6,6 +6,7 @@ import sidebar from "./show-sidebar";
 import login from "./login";
 import registration from "./registration";
 import getEvents from "./getAllEvents";
+import getEventCard from "./getRequestEvent";
 import photogalaryReducer from "./photogalaryReducer"
 import logout from "./logout";
 
@@ -15,6 +16,7 @@ export default combineReducers({
     login,
     registration,
     getEvents,
+    getEventCard,
     sidebar,
     photogalaryReducer,
     logout

src/reducers/getRequestEvent.js

@@ -0,0 +1,29 @@
+import * as types from "../actionTypes/actionTypes";
+
+const initialState = {
+    event: []
+}
+
+export default (state = initialState, action) => {
+    switch (action.type) {
+        case types.GET_REQUEST_EVENT_CARD: {
+            return state;
+        }
+
+        case types.GET_REQUEST_SUCCESS_EVENT_CARD: {
+            //console.log('event', action.payload.events[0]);
+            return {
+                ...state,
+                event: action.payload.events[0]
+            };
+        }
+
+        case types.GET_REQUEST_ERROR_EVENT_CARD: {
+            console.log('error event card');
+            return state;
+        }
+
+        default:
+            return state;
+    }
+}

src/router.js

@@ -30,8 +30,7 @@ const route = [
 		exact: true,
 		path: "/",
 		protected: false,
-		component: Home,
-		// events: true
+		component: Home
 	},
 	{
 		id: 2,
@@ -43,7 +42,7 @@ const route = [
     {
         id: 3,
         exact: true,
-        path: "/events:id",
+        path: "/events/:id",
         protected: false,
         component: EventCard
     },
@@ -143,11 +142,8 @@ const Router = withRouter(({ history, user }) => {
 		}
 	}, [user]);
 
-	//console.log('user', user)
-
 	return (
 		<div className="container">
-			{/* {console.log('events', events)}  */}
 			<Switch>
 				{route.map(el => (
 					<PrivateRoute
@@ -156,33 +152,19 @@ const Router = withRouter(({ history, user }) => {
 						exact={el.exact}
 						path={el.path}
                         component={el.component}
-                        // events = {el.events && events}
 					/>
                 ))}
-				
-				{/* {
-					events.map(event =>
-						<Route exact
-							path={`/events/${event._id}`}
-							key={event._id}
-							render={ props => (<EventCard event={event} />) }
-						/>                            
-					)
-				} */}
 			</Switch>
 		</div>
 	);
 });
 
 const mapStateToProps = state => {
-	//console.log('state',state)
     return {
-		// events: state.getEvents.events,
 		user: state.login.user
     };
 };
 
 export default connect(
     mapStateToProps
-    // { getAllEvents }
 )(Router);