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/actions/registrationEvent.js

@@ -17,7 +17,7 @@ export const regEventError = payload => ({
 
 export const regEventSubmit = payload => {
     return dispatch => {
-        let promise = fetch("https://api-marathon.herokuapp.com/api/v1/eventUser",
+        let promise = fetch("https://api-marathon.herokuapp.com/api/v1/eventUsers",
             {
                 method: 'POST',
                 body: JSON.stringify(payload),

src/components/adminHeader/adminHeader.js

@@ -8,7 +8,7 @@ const adminHeader = props => {
 	
 	const logout = (e) => {
         localStorage.removeItem('user');
-        document.location.reload(true);
+        props.history.push('/')
     }
 
 	return (

src/components/adminMenu/adminMenu.js

@@ -11,8 +11,7 @@ class AdminMenu extends Component {
     }
 
     clickEventHandler = (e) => {
-        const elem = adminMenu.find(el => el.id === +e.target.id)
-        this.props.history.push(elem.path)
+        this.props.history.push(e)
     }
 
     render() {
@@ -23,10 +22,8 @@ class AdminMenu extends Component {
                     el.text !== "Log out" && el.text !== "Main Page" &&
                     <div
                         className="menu-skew"
-                        path={el.path}
                         key={el.id}
-                        id={el.id}
-                        onClick={this.clickEventHandler}
+                        onClick={this.clickEventHandler.bind(null, el.path)}
                     >
                         <h2 className="menu-text">{el.text.toUpperCase()}</h2>
                         {/* <Link to={el.path} className = "menu-text">{el.text.toUpperCase()}</Link>  */}

src/components/login-form/LoginForm.js

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

src/components/reg-form-event/RegFormEvent.js

@@ -4,17 +4,13 @@ import { Field, reduxForm } from 'redux-form';
 import './reg-form-event.scss';
 
 let RegFormEvent = props => {
-    const { handleSubmit, regEventSubmit, eventType } = props;
+    const { handleSubmit, regEventSubmit, eventId } = props;
 
     const submit = value => {
-        value.event = [
-            {
-                type: eventType
-            }
-        ];
-
-        //regEventSubmit(value);
-        console.log(value);
+        value.event = eventId;
+
+        console.log('user-event', value);
+        regEventSubmit(value);
     };
 
     return (
@@ -40,9 +36,9 @@ let RegFormEvent = props => {
             </div>
             <div>
                 <label>Distance</label>
-                <Field name="eventType" component="select">
-                    <option value="male">Half marathone</option>
-                    <option value="female">Marathone</option>
+                <Field name="distance" component="select">
+                    <option value="Half marathone">Half marathone</option>
+                    <option value="Marathone">Marathone</option>
                 </Field>
             </div>
             <div>

src/components/sidebar/Sidebar.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from "react-router-dom";
+import { Link, withRouter } from "react-router-dom";
 import { connect } from "react-redux";
 
 import { showSidebar } from "../../actions/show-sidebar";
@@ -36,13 +36,13 @@ const siteMenu = [
 ];
 
 export class Sidebar extends React.Component {
-    
-
     logoutHandler = () => {
         this.props.getLogoutUserSubmit()
+        this.props.history.push('/')
     }
+
     render() {
-        console.log('ssdsd',this.props)
+        
 	    const { showSidebar, showSidebarFlag, getLogoutUserSubmit } = this.props;
         return (
             <div className={ !showSidebarFlag ? 'menu close' : 'menu' }>
@@ -69,7 +69,7 @@ export class Sidebar extends React.Component {
 						}
                         {
                             localStorage.user && <li>
-                                <button className="logout" onClick={getLogoutUserSubmit}>
+                                <button className="logout" onClick={this.logoutHandler}>
                                     <i className="fa fa-sign-out"></i>
                                 </button>
                             </li>
@@ -96,4 +96,4 @@ const mapStateToProps = state => {
 export default connect(
     mapStateToProps,
     { showSidebar, getLogoutUserSubmit }
-)(Sidebar);
+)(withRouter(Sidebar));

src/conteiners/adminAddEventPage/adminAddEventPage.js

@@ -8,7 +8,6 @@ import ConfirmationMessage from "../../components/confirmationMessage/confirmati
 
 class AdminAddEventPage extends Component {
     state = { 
-        // eventFormInitialValue: eventFormInitialValue.eventFormInitialValue,
         confirmationMessageFlag: false
      };
 

src/conteiners/adminPhotogalaryPage/adminPhotogalaryPage.js

@@ -5,17 +5,26 @@ import * as actions from "../../actions/photogalaryActions";
 // import {photogalaryOnchange} from "../../actions/photogalaryActions";
 import AdminHeader from "../../components/adminHeader/adminHeader";
 import PhotogalaryForm from "../../components/adminPhotogalary/adminPhotogalaryReduxForm";
-// import {eventFormInitialValue} from "../../state/addEventInitialValue"
+import ConfirmationMessage from "../../components/confirmationMessage/confirmationMessage";
 
 class AdminAddPhotogalarytPage extends Component {
-    // state = { 
-    //  };
+    state = { 
+        confirmationMessageFlag: false
+     };
 
     componentDidMount() {
         this.props.getEvents();
         this.props.getPhotogalary()
     }
 
+    showConfirmationMessage = () => {
+        this.setState({confirmationMessageFlag: true })
+        document.location.reload(true);
+    };
+    closeConfirmationMessage = () => {
+        this.setState({confirmationMessageFlag: false })
+    };
+
     render() {
         const {
             eventTypes,
@@ -46,6 +55,10 @@ class AdminAddPhotogalarytPage extends Component {
                             // initialValues = {addPhotogalaryInitialValue}
                         />
                     </div>
+                    {this.state.confirmationMessageFlag && 
+                        <ConfirmationMessage closeMessage = {this.closeConfirmationMessage}>
+                            <div className = "text">Photogalary has beed added.</div>
+                        </ConfirmationMessage >}
                 </div>
             </>
 		);

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,11 +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(' ');
-        const video = event.contentVideo;
-        console.log( event );
+        //console.log(event);
         return (
             <>
                 <Sidebar />
@@ -37,9 +41,6 @@ export class EventCard extends React.Component {
                                         }
                                     </p>
                                 </div>
-                                {/*<div>
-                                    <button>Register</button>
-                                </div>*/}
                             </div>
                             <div className="bg-black"></div>
                         </div>
@@ -59,7 +60,7 @@ export class EventCard extends React.Component {
                                 <div className="overview">
                                     <img src={event.mainBannerPicture} alt="banner" />
                                     <p>{event.overview}</p>
-                                    {
+                                    {/*{
                                         event.contentVideo && <div className="event-video">
                                             <video controls loop>
                                                 <source src={video} type="video/mp4" />
@@ -68,13 +69,13 @@ export class EventCard extends React.Component {
                                                 Your browser does not support the video tag.
                                             </video>
                                         </div>
-                                    }
+                                    }*/}
                                 </div>
                                 
                                 {
                                     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>
                                 }
 
@@ -96,7 +97,7 @@ export class EventCard extends React.Component {
                                     }
                                 </div>
                                 <div>
-                                    <RegFormEvent eventType={event.eventType} regEventSubmit={regEventSubmit}/>
+                                    <RegFormEvent eventId={event._id} regEventSubmit={regEventSubmit}/>
                                 </div>
                             </div>
                         </div>
@@ -108,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,4 +1,7 @@
 import React from 'react';
+import { connect } from "react-redux";
+
+import { getAllEvents } from "../../actions/getAllEvents";
 
 import './home.scss';
 
@@ -66,17 +69,16 @@ const sponsors = [
     }
 ];
 
-export default class Home extends React.Component {
-    state = {
-        videoURL: 'https://gcs-vimeo.akamaized.net/exp=1564565194~acl=%2A%2F1021052489.mp4%2A~hmac=f6d3e53b00695ca1e6920c195176211b64e179e250acfcdaf35bb334a60cac3f/vimeo-prod-skyfire-std-us/01/2799/9/238996987/1021052489.mp4'
+export class Home extends React.Component {
+    componentDidMount() {
+        this.props.getAllEvents();
     }
 
     render() {
         const { events } = this.props;
-        //console.log(events);
         return (
             <>
-                <Sidebar history={this.props.history}/>
+                <Sidebar/>
                 <div className="hero">
                     <div className="container-wrap">
                         <div className="hero-wrap">
@@ -102,7 +104,7 @@ export default 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}
@@ -114,7 +116,7 @@ export default class Home extends React.Component {
                                     imgSrc={event.mainBannerPicture} />
                                 )
                             }
-                        </div> */}
+                        </div>
                     </div>
                 </div>
 
@@ -138,3 +140,14 @@ export default class Home extends React.Component {
         )
     }
 }
+
+const mapStateToProps = state => {
+    return {
+        events: state.getEvents.events
+    };
+};
+
+export default connect(
+    mapStateToProps,
+    { getAllEvents }
+)(Home);

src/private-router.js

@@ -7,7 +7,9 @@ export const PrivateRoute = ({ component: Component, protectedRoute, ...rest })
 		render={props => {
 			if (protectedRoute) {
 				const user = localStorage.getItem("user");
+				console.log('user')
 				if (!user) {
+					console.log('user')
 					return <Redirect to="/" />;
 				}
 

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

@@ -1,9 +1,7 @@
-import React, {useState, useEffect } from "react";
-import { Switch, Route, withRouter } from "react-router-dom";
+import React, {useEffect } from "react";
+import { Switch, withRouter } 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';
@@ -30,8 +28,7 @@ const route = [
 		exact: true,
 		path: "/",
 		protected: false,
-		component: Home,
-		// events: true
+		component: Home
 	},
 	{
 		id: 2,
@@ -39,44 +36,51 @@ const route = [
 		path: "/events",
 		protected: false,
 		component: Events
-	},
+    },
+    {
+        id: 3,
+        exact: true,
+        path: "/events/:id",
+        protected: false,
+        component: EventCard
+    },
 	{
-		id: 3,
+		id: 4,
 		exact: true,
 		path: "/result",
 		protected: true,
 		component: Result
 	},
 	{
-		id: 4,
+		id: 5,
 		exact: true,
 		path: "/gallery",
 		protected: false,
 		component: Gallery
     },
     {
-		id: 5,
+		id: 6,
 		exact: true,
 		path: "/reviews",
 		protected: false,
 		component: Reviews
     },
     {
-		id: 6,
+		id: 7,
 		exact: true,
 		path: "/login",
 		protected: false,
 		component: Login
     },
     {
-		id: 7,
+		id: 8,
 		exact: true,
 		path: "/registration",
 		protected: false,
 		component: RegistrationPage
     },
     {
-		id: 8,
+		id: 9,
 		exact: true,
 		path: "/profile",
         protected: true,
@@ -84,7 +88,7 @@ const route = [
 		component: Profile
     },
     {
-		id: 9,
+		id: 10,
 		exact: true,
 		path: "/admin",
         protected: true,
@@ -92,7 +96,7 @@ const route = [
 		component: AdminMainPage
     },
     {
-		id: 10,
+		id: 11,
 		exact: true,
 		path: "/admin/add_new_event",
         protected: true,
@@ -100,7 +104,7 @@ const route = [
 		component: AdminAddEventPage
     },
     {
-		id: 11,
+		id: 12,
 		exact: true,
 		path: "/admin/photogalary",
         protected: true,
@@ -108,7 +112,7 @@ const route = [
 		component: AdminAddPhotogalarytPage
     },
     {
-		id: 12,
+		id: 13,
 		exact: true,
 		path: "/admin/my_events",
         protected: true,
@@ -116,7 +120,7 @@ const route = [
 		component: AdminMyEventsPage
 	},
 	{
-		id: 4,
+		id: 14,
 		component: PAGENOTFOUND
 	}
 ];
@@ -136,11 +140,8 @@ const Router = withRouter(({ history, user }) => {
 		}
 	}, [user]);
 
-	console.log('user', user)
-
 	return (
 		<div className="container">
-			{/* {console.log('events', events)} */}
 			<Switch>
 				{route.map(el => (
 					<PrivateRoute
@@ -149,33 +150,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);

src/state/adminMenu.js

@@ -1,10 +1,10 @@
 export const adminMenu = [
-	{ path: "/admin", id: 0, text: "Main Page", logout: false },
+	// { path: "/admin", id: 0, text: "Main Page", logout: false },
 	{ path: "/admin/add_new_event", id: 1, text: "Add New Event", logout: false },
 	{ path: "/admin/my_events", id: 2, text: "My Events", logout: false },
-	{ path: "/admin/feedbacks", id: 3, text: "Feedbacks", logout: false },
-    { path: "/admin/photogalary", id: 4, text: "Add Photogalery", logout: false },
-	{ path: "/admin/results", id: 5, text: "Add Results", logout: false },
+    { path: "/admin/photogalary", id: 3, text: "Add Photogalery", logout: false },
+	{ path: "/admin/results", id: 4, text: "Add Results", logout: false },
+	{ path: "/admin/feedbacks", id: 5, text: "Feedbacks", logout: false },
 	{ path: "/", id: 6, text: "Go to WebSite", logout: false },
 	{ path: "/", id: 7, text: "Log out", logout: true }
 ];