created login, registration and creating events page

src/actionTypes/actionTypes.js

@@ -18,4 +18,8 @@ export const POST_REQUEST_ERROR_LOGIN = "POST_REQUEST_ERROR_LOGIN";
 
 export const POST_REQUEST_CHECKIN = "POST_REQUEST_CHECKIN";
 export const POST_REQUEST_SUCCESS_CHECKIN = "POST_REQUEST_SUCCESS_CHECKIN";
-export const POST_REQUEST_ERROR_CHECKIN = "POST_REQUEST_ERROR_CHECKIN";
+export const POST_REQUEST_ERROR_CHECKIN = "POST_REQUEST_ERROR_CHECKIN";
+
+export const GET_REQUEST_EVENTS = "GET_REQUEST_EVENTS";
+export const GET_REQUEST_SUCCESS_EVENTS = "GET_REQUEST_SUCCESS_EVENTS";
+export const GET_REQUEST_ERROR_EVENTS = "GET_REQUEST_ERROR_EVENTS";

src/actions/getAllEvents.js

@@ -0,0 +1,29 @@
+import * as types from "../actionTypes/actionTypes";
+
+export const getEvents = payload => ({
+    type: types.GET_REQUEST_EVENTS,
+    payload
+});
+
+export const getEventsSuccess = payload => ({
+    type: types.GET_REQUEST_SUCCESS_EVENTS,
+    payload
+});
+
+export const getEventsError = payload => ({
+    type: types.GET_REQUEST_ERROR_EVENTS,
+    payload
+});
+
+export const getAllEvents = () => {
+    return dispatch => {
+        let promise = fetch("https://api-marathon.herokuapp.com/api/v1/event")
+
+        dispatch(getEvents())
+
+        promise.then(
+            data => data.json().then(data => dispatch(getEventsSuccess(data))),
+            error => dispatch(getEventsError(error))
+        )
+    }
+}

src/components/registration-form/RegistrationForm.js

@@ -18,11 +18,16 @@ let RegistrationForm = props => {
                 <Field name="name" component="input" type="text" />
             </div>
             <div>
-                <label htmlFor="sex">Sex</label>
-                <Field name="sex" component="select">
+                <label htmlFor="male">male</label>
+                <Field name="sex" component="input" type="radio" id="male" value="male" checked="checked"/>
+
+                <label htmlFor="female">female</label>
+                <Field name="sex" component="input" type="radio" id="female" value="female"/>
+
+                {/*<Field name="sex" component="select">
                     <option value="male">male</option>
                     <option value="female">female</option>
-                </Field>
+                </Field>*/}
             </div>
             <div>
                 <label htmlFor="phone">Phone</label>
@@ -36,13 +41,18 @@ let RegistrationForm = props => {
                 <label htmlFor="password">Password</label>
                 <Field name="password" component="input" type="text" />
             </div>
+            <div>
+                <label htmlFor="confirmPassword">Confirm Password</label>
+                <Field name="confirmPassword" component="input" type="text" />
+            </div>
+            
             <button type="submit">Check in</button>
         </form>
         )
 };
 
 RegistrationForm = reduxForm({
-    form: 'login'
+    form: 'registration'
 })(RegistrationForm)
 
 export default RegistrationForm

src/components/sidebar/Sidebar.js

@@ -11,8 +11,8 @@ const siteMenu = [
         id: 0
     },
     {
-        text: 'Races',
-        href: '/races',
+        text: 'Events',
+        href: '/events',
         id: 1
     },
     {

src/conteiners/events/Events.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { connect } from "react-redux";
+//import { Link } from "react-router-dom";
+
+import { getAllEvents } from "../../actions/getAllEvents";
+
+import './events.scss';
+
+import Sidebar from '../../components/sidebar/Sidebar';
+
+export class Events extends React.Component {
+    componentDidMount() {
+        this.props.getAllEvents();
+        console.log('events' , this.props.events);
+    }
+
+    render() {
+        return (
+            <>
+                <Sidebar />
+                <div className="container-wrap">
+                    page Events
+                </div>
+            </>
+        )
+    }
+}
+
+const mapStateToProps = state => {
+    return {
+        events: state.getEvents.events
+    };
+};
+
+export default connect(
+    mapStateToProps,
+    { getAllEvents }
+)(Events);

src/conteiners/events/events.scss

@@ -0,0 +1 @@
+@import "../../styles/variables";

src/conteiners/home/Home.js

@@ -14,7 +14,7 @@ export default class Home extends React.Component {
             <>
                 <Sidebar/>
                 <div className="hero">
-                    <div className="hero-wrap">
+                    <div className="container-wrap">
                         <h1>International triathlon competitions among professionals and amateurs</h1>                       
                     </div>                    
 

src/conteiners/home/home.scss

@@ -7,10 +7,6 @@
     display: flex;
     align-items: center;
 
-    &-wrap {
-        padding-left: 320px;
-    }
-
     h1 {
         font-size: 36px;
         color: $color-white;

src/conteiners/login/Login.js

@@ -8,9 +8,10 @@ import LoginForm from '../../components/login-form/LoginForm';
 
 export class Login extends React.Component {
     render() {
+        const { postLoginSubmit } = this.props;
         return (
             <div>
-                <LoginForm postLoginSubmit={this.props.postLoginSubmit} />
+                <LoginForm postLoginSubmit={postLoginSubmit} />
                 <p>Don't have an account? <Link to="/registration">Sign up now</Link></p>
             </div>
         )

src/reducers/combineReducers.js

@@ -5,10 +5,12 @@ import adminMainPageReducer from "./adminMainPageReducer";
 //import Sidebar from "./show-sidebar";
 import login from "./login";
 import registration from "./registration";
+import getEvents from "./getAllEvents";
 
 export default combineReducers({
 	form: formReducer,
 	adminMainPageReducer,
     login,
-    registration
+    registration,
+    getEvents
 });

src/reducers/getAllEvents.js

@@ -0,0 +1,26 @@
+import * as types from "../actionTypes/actionTypes";
+
+const initialState = {
+    events: {}
+}
+
+export default (state = initialState, action) => {
+    switch (action.type) {
+        case types.GET_REQUEST_EVENTS: {
+            return state;
+        }
+
+        case types.GET_REQUEST_SUCCESS_EVENTS: {
+            console.log('events',action.payload.events);
+            return state;
+        }
+
+        case types.GET_REQUEST_ERROR_EVENTS: {
+            console.log('error events');
+            return state;
+        }
+
+        default:
+            return state;
+    }
+}

src/reducers/login.js

@@ -11,8 +11,12 @@ export default (state = initialState, action) => {
         }
 
         case types.POST_REQUEST_SUCCESS_LOGIN: {
-            console.log('some',action.payload.user);
-            return state;
+            //action.payload.message
+            console.log('user:', action.payload.user);
+            return {
+                ...state,
+                user: action.payload.user
+            };
         }
 
         case types.POST_REQUEST_ERROR_LOGIN: {

src/reducers/registration.js

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

src/router.js

@@ -6,6 +6,7 @@ import AdminAddEventPage from './conteiners/adminAddEventPage/adminAddEventPage'
 import Home from './conteiners/home/Home';
 import Login from './conteiners/login/Login';
 import RegistrationPage from './conteiners/registrationPage/RegistrationPage';
+import Events from './conteiners/events/Events';
 
 import AdminAddPhotogalarytPage from "./conteiners/adminPhotogalaryPage/adminPhotogalaryPage"
 import Sidebar from './components/sidebar/Sidebar';
@@ -17,19 +18,12 @@ export default class Router extends React.Component {
 			    <Switch>
 			        <Route exact path="/" component={Home} />
 
-	                <Route exact path="/races" render={() => (
-						<>
-							<Sidebar />
-							<div className="text-center">
-								Races
-							</div>
-						</>
-	                )} />
+                    <Route exact path="/events" component={Events} />
 
 	                <Route exact path="/result" render={() => (
 						<>
 							<Sidebar />
-							<div className="text-center">
+                            <div className="container-wrap">
 								Result
 							</div>
 						</>
@@ -38,7 +32,7 @@ export default class Router extends React.Component {
 	                <Route exact path="/gallery" render={() => (
 						<>
 							<Sidebar />
-							<div className= "text-center">
+                            <div className= "container-wrap">
 								Gallery
 							</div>
 						</>
@@ -47,7 +41,7 @@ export default class Router extends React.Component {
 	                <Route exact path="/reviews" render={() => (
 						<>
 							<Sidebar />
-							<div className="text-center">
+                            <div className="container-wrap">
 								Reviews
 							</div>
 						</>

src/styles/base.scss

@@ -125,9 +125,10 @@ button {
 
 .container {
     &-wrap {
-        max-width: 1440px;
+        //max-width: 1440px;
         width: 100%;
-        padding-left: 16px;
+        //padding-left: 16px;
         padding-right: 16px;
+        padding-left: 380px;
     }
 }