diff --git a/src/components/App.js b/src/components/App.js index f70a4ed..d43dd4f 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/Add.js b/src/components/people/Add.js new file mode 100644 index 0000000..31d0ced --- /dev/null +++ b/src/components/people/Add.js @@ -0,0 +1,39 @@ +import React, {Component} from 'react' +import {reduxForm, Field} from 'redux-form' +import emailValidator from 'email-validator' +import ErrorField from '../common/ErrorField' + +class PeopleAdd extends Component { + render() { + return ( +
+

Add people

+
+ + + +
+ +
+ +
+ ) + } +} + +const validate = ({firstName, lastName, email}) => { + const errors = {} + + if (!email) errors.email = 'email is a required field' + if (!firstName) errors.firstName = 'First name is a required field' + if (!lastName) errors.lastName = 'Last name is a required field' + + if (email && !emailValidator.validate(email)) errors.email = 'invalid email' + + return errors +} + +export default reduxForm({ + form: 'peopleAdd', + validate +})(PeopleAdd) \ No newline at end of file diff --git a/src/components/routes/People.js b/src/components/routes/People.js new file mode 100644 index 0000000..6dac0e5 --- /dev/null +++ b/src/components/routes/People.js @@ -0,0 +1,31 @@ +import React, {Component} from 'react' +import {Route, NavLink} from 'react-router-dom' +import {connect} from 'react-redux' +import {addPeopleEntry} from '../../ducks/people' +import AddPeople from '../people/Add'; + +class PeoplePage extends Component { + render() { + const peopleList = this.props.people.toArray(); + return ( +
+

People

+
    + {peopleList.map((person, index) => { + return
  • + {person.firstName} {person.lastName} +
  • + })} +
+ add + }/> +
+ ) + } + + handleAdd = (entry) => this.props.addPeopleEntry(entry) +} + +export default connect(state => ({ + people: state.people.list +}), {addPeopleEntry})(PeoplePage) \ No newline at end of file diff --git a/src/config.js b/src/config.js index 2782a0b..0df932e 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 = 'react-course-f262b' firebase.initializeApp({ - apiKey: "AIzaSyB31xpTtp4Jln_hb2kAbE4PGf6Mi8EgLyA", - authDomain: `${appName}.firebaseapp.com`, - databaseURL: `https://${appName}.firebaseio.com`, - projectId: appName, - storageBucket: "", - messagingSenderId: "397157634637" + authDomain: `${appName}.firebaseapp.com`, + databaseURL: `https://${appName}.firebaseio.com`, + projectId: appName, + apiKey: "AIzaSyAt-smU_1tqNdkj9pmSpVLxqaOjhDwf4dk", + storageBucket: "react-course-f262b.appspot.com", + messagingSenderId: "447165438476" }) \ No newline at end of file diff --git a/src/ducks/people.js b/src/ducks/people.js new file mode 100644 index 0000000..17038a8 --- /dev/null +++ b/src/ducks/people.js @@ -0,0 +1,43 @@ +import {appName} from '../config' +import {Record, Map} from 'immutable' +import {reset} from 'redux-form'; + +/** + * Constants + * */ +export const moduleName = 'people' +const prefix = `${appName}/${moduleName}` + +export const ADD_PEOPLE_ENTRY = `${prefix}/ADD_PEOPLE` + +/** + * Reducer + * */ +export const ReducerRecord = Record({ + list: Map() +}) + +export default function reducer(state = new ReducerRecord(), action) { + const {type, payload} = action + + switch (type) { + case ADD_PEOPLE_ENTRY: + return state.update('list', list => list.set([payload.entry.firstName], payload.entry)) + + default: + return state + } +} + +/** + * Action Creators + * */ +export function addPeopleEntry(entry) { + return (dispatch) => { + dispatch({ + type: ADD_PEOPLE_ENTRY, + payload: {entry} + }) + dispatch(reset('peopleAdd')); + } +} \ No newline at end of file diff --git a/src/redux/reducer.js b/src/redux/reducer.js index 34143fe..cc6e0aa 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