People module

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/People'
 
 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/AddPerson.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import {
+	reduxForm,
+	Field,
+} from 'redux-form';
+import emailValidator from 'email-validator';
+import ErrorField from '../common/ErrorField';
+
+const AddPerson = ({ handleSubmit, touched, invalid }) => (
+	<div>
+		<h3>Add person</h3>
+		<form onSubmit={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' disabled={touched && invalid} />
+			</div>
+		</form>
+	</div>
+);
+
+const validate = ({ firstName, lastName, email }) => {
+	const errors = {};
+
+	if (!firstName) {
+		errors.firstName = 'first name is a required field';
+	}
+
+	if (!lastName) {
+		errors.lastName = 'last name 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,
+})(AddPerson);

src/components/routes/People.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react'
+import { Route, NavLink } from 'react-router-dom';
+import AddPerson from '../people/AddPerson';
+import { connect } from 'react-redux';
+import { addPerson } from '../../ducks/people';
+
+class PeoplePage extends Component {
+    handleAddPerson = ({firstName, lastName, email}) => this.props.addPerson(firstName, lastName, email)
+
+    render() {
+        return (
+            <div>
+                <h2>People Page</h2>
+                <NavLink to='/people/add' activeStyle = {{color: 'red'}}>Add person</NavLink>
+                <Route path='/people/add' render={() => <AddPerson onSubmit={this.handleAddPerson} />} />
+            </div>
+        )
+    }
+}
+
+export default connect(null, { addPerson })(PeoplePage);

src/config.js

@@ -1,12 +1,12 @@
 import firebase from 'firebase'
 
-export const appName = 'advreact-1610'
+export const appName = 'advreact-1610-8d439'
 
 firebase.initializeApp({
-    apiKey: "AIzaSyB31xpTtp4Jln_hb2kAbE4PGf6Mi8EgLyA",
+    apiKey: "AIzaSyDkx19f92qbT84fwaDMgZzi-wfglxtLk60",
     authDomain: `${appName}.firebaseapp.com`,
     databaseURL: `https://${appName}.firebaseio.com`,
     projectId: appName,
     storageBucket: "",
-    messagingSenderId: "397157634637"
+    messagingSenderId: "868897417787"
 })

src/ducks/people.js

@@ -0,0 +1,53 @@
+import { appName } from '../config';
+import {
+	Record,
+	List,
+} from 'immutable';
+import { createSelector } from 'reselect';
+
+/**
+ * Constants
+ * */
+export const moduleName = 'people';
+const prefix = `${appName}/${moduleName}`;
+
+export const ADD_PERSON = `${prefix}/ADD_PERSON`;
+
+/**
+ * Reducer
+ * */
+export const ReducerRecord = Record({
+	people: List(),
+	loading: false,
+	error: null,
+});
+
+export default function reducer(state = new ReducerRecord(), action) {
+	const { type, payload } = action;
+
+	switch (type) {
+		case ADD_PERSON:
+			return state
+				.set('people', state.get('people').push(payload))
+
+		default:
+			return state;
+	}
+}
+
+/**
+ * Selectors
+ * */
+
+export const stateSelector = state => state[moduleName];
+export const peopleSelector = createSelector(stateSelector, state => state.people);
+
+/**
+ * Action Creators
+ * */
+export function addPerson(firstName, lastName, email) {
+	return {
+		type: ADD_PERSON,
+		payload: { firstName, lastName, email },
+	};
+}

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