add people

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 AddPeoplePage from './routes/AddPeoplePage';
 import ProtectedRoute from './common/ProtectedRoute'
 
 class Root extends Component {
@@ -13,6 +14,7 @@ class Root extends Component {
         return (
             <div>
                 <ProtectedRoute path="/admin" component={AdminPage}/>
+                <Route path='/people' component={AddPeoplePage}/>
                 <Route path="/auth" component={AuthPage}/>
             </div>
         )

src/components/routes/AddPeoplePage.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';
+import {addPeople} from '../../ducks/people';
+import {connect} from 'react-redux';
+
+class AddPeoplePage extends Component {
+  render() {
+    const {handleSubmit} = this.props
+    return (
+      <form onSubmit={handleSubmit(this.submitForm)}>
+        <Field name="firstName" component={ErrorField} />
+        <Field name="lastName" component={ErrorField} />
+        <Field name="email" component={ErrorField} />
+        <div>
+            <input type="submit" />
+        </div>
+      </form>
+    );
+  }
+
+  submitForm = ({firstName, lastName, email}) => {
+    this.props.addPeople(firstName, lastName, email);
+  }
+}
+
+const validate = ({firstName, lastName, email}) => {
+  const errors = {}
+
+  if (!firstName) errors.firstName = 'First name is required';
+
+  if (!lastName) errors.lastName = 'Last name is required';
+
+  if (!email) errors.email = 'email is required'
+  else if (!emailValidator.validate(email)) errors.email = 'invalid email'
+
+  return errors
+}
+
+export default connect(null, {addPeople})(reduxForm({
+  form: 'addPeople',
+  validate
+})(AddPeoplePage));

src/config.js

@@ -1,13 +1,13 @@
 import firebase from 'firebase'
 
-export const appName = "advreact-21-08"
+export const appName = 'adv-react-becce';
 export const firebaseConfig = {
-    apiKey: "AIzaSyDjA6CeIHuni5lNm4ML1b-TSxJltsYUO8g",
+    apiKey: "AIzaSyACAdiXccnI3MWYqFQT6aIU0A59plv8upc",
     authDomain: `${appName}.firebaseapp.com`,
     databaseURL: `https://${appName}.firebaseio.com`,
     projectId: appName,
     storageBucket: `${appName}.appspot.com`,
-    messagingSenderId: "789814589283"
-}
+    messagingSenderId: "235849394951"
+  };
 
 firebase.initializeApp(firebaseConfig)

src/ducks/people.js

@@ -0,0 +1,32 @@
+import {appName} from '../config';
+import {Record} from 'immutable';
+
+const ReducerRecord = Record({
+  firstName: '',
+  lastName: '',
+  email: ''
+});
+
+export const moduleName = 'people';
+export const ADD_PEOPLE = `${appName}/${moduleName}/ADD_PEOPLE`;
+
+export default function reducer (state = new ReducerRecord(), action) {
+  const {type, payload} = action;
+
+  switch (type) {
+    case ADD_PEOPLE:
+      return state
+        .set('firstName', payload.firstName)
+        .set('lastName', payload.lastName)
+        .set('email', payload.email)
+    default:
+      return state;
+  }
+}
+
+export const addPeople = (firstName, lastName, email) => ({
+  type: ADD_PEOPLE,
+  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
 })