diff --git a/src/components/App.js b/src/components/App.js
index f70a4ed..5a42c1a 100644
--- a/src/components/App.js
+++ b/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 {
Hello world
+
)
}
diff --git a/src/components/people/AddPerson.js b/src/components/people/AddPerson.js
new file mode 100644
index 0000000..c295338
--- /dev/null
+++ b/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 }) => (
+
+);
+
+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);
diff --git a/src/components/routes/People.js b/src/components/routes/People.js
new file mode 100644
index 0000000..15215a6
--- /dev/null
+++ b/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 (
+
+
People Page
+
Add person
+
} />
+
+ )
+ }
+}
+
+export default connect(null, { addPerson })(PeoplePage);
\ No newline at end of file
diff --git a/src/config.js b/src/config.js
index 2782a0b..4eeedbf 100644
--- a/src/config.js
+++ b/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"
})
\ No newline at end of file
diff --git a/src/ducks/people.js b/src/ducks/people.js
new file mode 100644
index 0000000..7744b33
--- /dev/null
+++ b/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 },
+ };
+}
diff --git a/src/redux/reducer.js b/src/redux/reducer.js
index 34143fe..d717ebd 100644
--- a/src/redux/reducer.js
+++ b/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,
})
\ No newline at end of file