Ht1

src/components/App.js

@@ -3,6 +3,7 @@ import {Route} from 'react-router-dom'
 import ProtectedRoute from './common/ProtectedRoute'
 import AdminPage from './routes/Admin'
 import AuthPage from './routes/Auth'
+import PeoplePage from './routes/PeoplePage'
 
 class App extends Component {
     static propTypes = {
@@ -15,6 +16,7 @@ class App extends Component {
                 <h1>Hello world</h1>
                 <ProtectedRoute path = '/admin' component = {AdminPage}/>
                 <Route path = '/auth' component = {AuthPage}/>
+                <Route path = '/people' component = {PeoplePage}/>
             </div>
         )
     }

src/components/people/AddPeopleForm.js

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

src/components/routes/PeoplePage.js

@@ -0,0 +1,30 @@
+import React, { Component } from 'react'
+import {connect} from 'react-redux'
+import {addPeople} from '../../ducks/peoples'
+import AddPeopleForm from '../people/AddPeopleForm'
+
+class PeoplePage extends Component {
+    static propTypes = {
+
+    };
+
+    render() {
+        const {peoples}= this.props;
+        console.log("-- peoples", peoples)
+
+        return (
+            <div>
+                <h2>People page</h2>
+                <AddPeopleForm onSubmit = {this.handleSubmit}/>
+            </div>
+        )
+    }
+
+    handleSubmit = ({firstName, lastName, email}) => {
+        const { addPeople } = this.props;
+
+        addPeople({firstName, lastName, email})
+    } 
+}
+
+export default connect(null, { addPeople })(PeoplePage)

src/config.js

@@ -1,12 +1,13 @@
 import firebase from 'firebase'
 
 export const appName = 'advreact-1610'
+const appId = 'ec352'
 
 firebase.initializeApp({
-    apiKey: "AIzaSyB31xpTtp4Jln_hb2kAbE4PGf6Mi8EgLyA",
-    authDomain: `${appName}.firebaseapp.com`,
-    databaseURL: `https://${appName}.firebaseio.com`,
-    projectId: appName,
-    storageBucket: "",
-    messagingSenderId: "397157634637"
+    apiKey: "AIzaSyB3LVTO7RSDrZAkHBkpzg9T5KkuoCoy4qo",
+    authDomain: `${appName}-${appId}.firebaseapp.com`,
+    databaseURL: `https://${appName}-${appId}.firebaseio.com`,
+    projectId: `${appName}-${appId}`,
+    storageBucket: `${appName}-${appId}.appspot.com`,
+    messagingSenderId: "651090769196"
 })

src/ducks/peoples.js

@@ -0,0 +1,59 @@
+import {appName} from '../config'
+import {Record, OrderedMap} from 'immutable'
+import {createSelector} from 'reselect'
+
+
+/**
+ * Constants
+ * */
+export const moduleName = 'peoples'
+const prefix = `${appName}/${moduleName}`
+
+export const ADD_PEOPLE = `${prefix}/ADD_PEOPLE`
+
+/**
+ * Reducer
+ * */
+const PeopleModel = Record({
+    id: null,
+    firstName: '',
+    lastName: '',
+    email: ''
+})
+
+const DefaultReducerState = Record({
+    entities: new OrderedMap({}),
+})
+
+export default (peoples = new DefaultReducerState(), action) => {
+    const {type, payload} = action
+
+    switch (type) {
+        case ADD_PEOPLE:
+        return peoples.setIn(['entities'], new PeopleModel({
+            ...payload.people,
+        }))
+
+        default:
+            return peoples
+    }
+}
+
+/**
+ * Selectors
+ * */
+
+export const stateSelector = state => state[moduleName]
+export const peoplesSelector = createSelector(stateSelector, state => state.peoples.entities)
+
+/**
+ * Action Creators
+ * */
+export function addPeople(people) {
+    return {
+        type: ADD_PEOPLE,
+        payload: {
+            people: {...people, id: Date.now() + Math.random() }
+        },
+    }
+}

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/peoples'
 
 export default combineReducers({
     router, form,
-    [authModule]: authReducer
+    [authModule]: authReducer,
+    [peopleModule]: peopleReducer,
 })