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 }) => ( +
+

Add person

+
+ + + +
+ +
+ +
+); + +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