ht1 goncharov

src/components/App.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import {Route} from 'react-router-dom'
+import {Route, NavLink} from 'react-router-dom'
 import ProtectedRoute from './common/ProtectedRoute'
 import AdminPage from './routes/Admin'
 import AuthPage from './routes/Auth'
@@ -13,6 +13,8 @@ class App extends Component {
         return (
             <div>
                 <h1>Hello world</h1>
+                <NavLink to={'/admin'}> Admin </NavLink>
+                <NavLink to={'/auth'}> Auth </NavLink>
                 <ProtectedRoute path = '/admin' component = {AdminPage}/>
                 <Route path = '/auth' component = {AuthPage}/>
             </div>

src/components/people/addHuman.js

@@ -0,0 +1,39 @@
+import React, {Component} from 'react';
+import {reduxForm, Field} from 'redux-form'
+import emailValidator from 'email-validator'
+import ErrorField from '../common/ErrorField'
+
+class AddHuman extends Component {
+    render() {
+        return (
+            <div>
+                <h3>Add people</h3>
+                <form onSubmit = {this.props.handleSubmit}>
+                    <Field name = 'firstName' component = {ErrorField} type = 'text' label = 'first name' />
+                    <Field name = 'lastName' component = {ErrorField} type = 'text' label = 'last name' />
+                    <Field name = 'email' component = {ErrorField} type = 'text' label = 'email'/>
+                    <div>
+                        <input type = 'submit'/>
+                    </div>
+                </form>
+            </div>
+        );
+    }
+}
+
+const validate = ({ firstName, lastName,  email }) => {
+    const errors = {}
+
+    if (!email) errors.email = 'email is a required field'
+    if (!firstName) errors.firstName = 'first name is a required field'
+    if (!lastName) errors.lastName = 'last name is a required field'
+
+    if (email && !emailValidator.validate(email)) errors.email = 'invalid email'
+
+    return errors
+}
+
+export default reduxForm({
+    form: 'people',
+    validate
+})(AddHuman)

src/components/routes/Admin.js

@@ -1,4 +1,8 @@
 import React, { Component } from 'react'
+import {Route, NavLink} from 'react-router-dom'
+import AddHuman from '../people/addHuman'
+import {connect} from 'react-redux'
+import {addHuman} from '../../ducks/people'
 
 class Admin extends Component {
     static propTypes = {
@@ -9,9 +13,13 @@ class Admin extends Component {
         return (
             <div>
                 <h2>Admin Page</h2>
+                <NavLink to = '/admin/people' activeStyle = {{color: 'red'}}>add people</NavLink>
+                <Route path = '/admin/people'  render = {() => <AddHuman onSubmit = {this.handleAddHuman}/>}/>
             </div>
         )
     }
+
+    handleAddHuman = ({firstName, lastName, email}) => this.props.addHuman(firstName, lastName, email)
 }
 
-export default Admin
+export default connect(null, { addHuman })(Admin)

src/config.js

@@ -1,12 +1,12 @@
 import firebase from 'firebase'
 
-export const appName = 'advreact-1610'
+export const appName = 'advreact-4303b'
 
 firebase.initializeApp({
-    apiKey: "AIzaSyB31xpTtp4Jln_hb2kAbE4PGf6Mi8EgLyA",
+    apiKey: "AIzaSyBfoQIRlS5EJWZTOHXgcP9xFy2m-wWRYfI",
     authDomain: `${appName}.firebaseapp.com`,
     databaseURL: `https://${appName}.firebaseio.com`,
     projectId: appName,
     storageBucket: "",
-    messagingSenderId: "397157634637"
+    messagingSenderId: "665447136184"
 })

src/ducks/people.js

@@ -0,0 +1,61 @@
+import {appName} from '../config'
+import {Record, Map} from 'immutable'
+import {reset} from 'redux-form'
+
+/**
+ * Constants
+ * */
+export const moduleName = 'people'
+const prefix = `${appName}/${moduleName}`
+
+export const ADD_PEOPLE_START = `${prefix}/ADD_PEOPLE_START`
+export const ADD_PEOPLE_SUCCESS = `${prefix}/ADD_PEOPLE_SUCCESS`
+
+/**
+ * Reducer
+ * */
+export const ReducerRecord = Record({
+    entities: new Map(),
+    loading: false,
+    error: null
+})
+
+export default function reducer(state = new ReducerRecord(), action) {
+    const {type, payload} = action
+
+    switch (type) {
+        case ADD_PEOPLE_START:
+            return state.set('loading', true)
+
+        case ADD_PEOPLE_SUCCESS:
+            return state
+                .update('entities', entities => entities.merge(payload))
+                .set('loading', false)
+
+        default:
+            return state
+    }
+}
+
+/**
+ * Selectors
+ * */
+
+/**
+ * Action Creators
+ * */
+export function addHuman(firstName, lastName, email) {
+    const id = +new Date();
+    return (dispatch) => {
+        dispatch({
+            type: ADD_PEOPLE_START
+        })
+
+        dispatch({
+            type: ADD_PEOPLE_SUCCESS,
+            payload: { [id]: {firstName, lastName, email} }
+        })
+
+        dispatch(reset(moduleName))
+    }
+}

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
 })