Ht 1

src/components/Root.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import {Route} from 'react-router-dom'
 import AdminPage from './routes/AdminPage'
 import AuthPage from './routes/AuthPage'
+import PeoplePage from './routes/PeoplePage'
 import ProtectedRoute from './common/ProtectedRoute'
 
 class Root extends Component {
@@ -14,6 +15,7 @@ class Root extends Component {
             <div>
                 <ProtectedRoute path="/admin" component={AdminPage}/>
                 <Route path="/auth" component={AuthPage}/>
+                <Route path="/people" component={PeoplePage} />
             </div>
         )
     }

src/components/people/AddUserForm.js

@@ -0,0 +1,54 @@
+import React, { Component } from 'react'
+import {NavLink} from 'react-router-dom'
+import {reduxForm, Field} from 'redux-form'
+import emailValidator from 'email-validator'
+import ErrorField from '../common/ErrorField'
+
+class AddUserForm extends Component {
+    static propTypes = {
+
+    };
+
+    render() {
+        const {handleSubmit} = this.props
+        return (
+            <div>
+                <NavLink to="/people" activeStyle={{color: 'red'}}>back</NavLink>
+                <h2>Add People</h2>
+                <form onSubmit={handleSubmit}>
+                    <Field name="firstname" component={ErrorField} type="text"/>
+                    <Field name="lastname" component={ErrorField} type="text"/>
+                    <Field name="email" component={ErrorField} />
+                    <div>
+                        <input type="submit" />
+                    </div>
+                </form>
+            </div>
+        )
+    }
+}
+
+const validate = ({email}) => {
+    const errors = {}
+
+    if (!email) errors.email = 'email is required'
+    else if (!emailValidator.validate(email)) errors.email = 'invalid email'
+
+    /*тут бы еще хотелось проверять, есть ли уже такой e-mail, но я вот не знаю как лучше подрубить стор?
+    как то так?
+    export default connect(state => ({..}))(reduxForm({
+        form: 'addPeople',
+        validate
+    })(AddUserForm))
+    *
+    * */
+
+
+    return errors
+}
+
+
+export default reduxForm({
+    form: 'addPeople',
+    validate
+})(AddUserForm)

src/components/routes/PeoplePage.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react'
+import {Route, NavLink} from 'react-router-dom'
+import {connect} from 'react-redux'
+import AddUserForm from '../people/AddUserForm'
+import {addUser, moduleName} from '../../ducks/people'
+import Loader from '../common/Loader'
+
+class PeoplePage extends Component {
+    static propTypes = {};
+
+    render() {
+        const {loading,user} = this.props
+        console.log(user)
+        return (
+            <div>
+                <h1>People Page</h1>
+                {user ? <div>Добавлен пользователь {user.firstname}<br/></div> : ''}
+                <NavLink to="/people/add" activeStyle={{color: 'red'}}>add User</NavLink>
+                <Route path="/people/add" render={() => <AddUserForm onSubmit={this.handleAdd}/>}/>
+                {loading && <Loader/>}
+            </div>
+        )
+    }
+
+    handleAdd = (values) => this.props.addUser(values)
+
+}
+
+export default connect(state => {
+    const people = state[moduleName]
+
+    return {
+        user: people.user.get(people.user.size - 1)
+        /*loading: state[moduleName].loading*/
+    }
+}, {addUser})(PeoplePage)

src/ducks/people.js

@@ -0,0 +1,35 @@
+import {Record, List} from 'immutable'
+import {appName} from '../config'
+
+const ReducerRecord = Record({
+    user: new List(),
+    error: null,
+    loading: false
+})
+
+export const moduleName = 'people'
+
+export const ADD_USER_SUCCESS = `${appName}/${moduleName}/ADD_USER_SUCCESS`
+
+export default function reducer(state = new ReducerRecord(), action) {
+    const {type, payload} = action
+
+    switch (type) {
+        case ADD_USER_SUCCESS:
+            return state.set('user', state.user.push(payload))
+
+        default:
+            return state
+    }
+}
+
+export function addUser(values) {
+
+    return (dispatch) => {
+        console.log('There')
+        dispatch({
+            type: ADD_USER_SUCCESS,
+            payload: values
+        })
+    }
+}

src/redux/reducer.js

@@ -2,8 +2,10 @@ import {combineReducers} from 'redux'
 import {routerReducer as router} from 'react-router-redux'
 import {reducer as form} from 'redux-form'
 import authReducer, {moduleName as authModule} from '../ducks/auth'
+import peopleReducer, {moduleName as peopleModule} from '../ducks/people'
 
 export default combineReducers({
     router, form,
-    [authModule]: authReducer
+    [authModule]: authReducer,
+    [peopleModule]: peopleReducer
 })