diff --git a/src/components/App.js b/src/components/App.js index f70a4ed..94b911b 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/PeoplePage' class App extends Component { static propTypes = { @@ -15,6 +16,7 @@ class App extends Component {

Hello world

+ ) } diff --git a/src/components/people/AddPeopleForm.js b/src/components/people/AddPeopleForm.js new file mode 100644 index 0000000..5d2a446 --- /dev/null +++ b/src/components/people/AddPeopleForm.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' + +class AddPeopleForm extends Component { + static propTypes = { + + }; + + render() { + const { handleSubmit } = this.props; + return ( +
+

Add new people

+
+ + + +
+ +
+ +
+ ) + } +} + +const validate = ({ firstName, lastName, email}) => { + const errors = {} + + if (!firstName) errors.firstName = 'firstName is a required field' + if (!lastName) errors.lastName = 'lastName 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 +})(AddPeopleForm) \ No newline at end of file diff --git a/src/components/routes/PeoplePage.js b/src/components/routes/PeoplePage.js new file mode 100644 index 0000000..1831bc5 --- /dev/null +++ b/src/components/routes/PeoplePage.js @@ -0,0 +1,30 @@ +import React, { Component } from 'react' +import {connect} from 'react-redux' +import {addPeople} from '../../ducks/peoples' +import AddPeopleForm from '../people/AddPeopleForm' + +class PeoplePage extends Component { + static propTypes = { + + }; + + render() { + const {peoples}= this.props; + console.log("-- peoples", peoples) + + return ( +
+

People page

+ +
+ ) + } + + handleSubmit = ({firstName, lastName, email}) => { + const { addPeople } = this.props; + + addPeople({firstName, lastName, email}) + } +} + +export default connect(null, { addPeople })(PeoplePage) \ No newline at end of file diff --git a/src/config.js b/src/config.js index 2782a0b..9f30f76 100644 --- a/src/config.js +++ b/src/config.js @@ -1,12 +1,13 @@ import firebase from 'firebase' export const appName = 'advreact-1610' +const appId = 'ec352' firebase.initializeApp({ - apiKey: "AIzaSyB31xpTtp4Jln_hb2kAbE4PGf6Mi8EgLyA", - authDomain: `${appName}.firebaseapp.com`, - databaseURL: `https://${appName}.firebaseio.com`, - projectId: appName, - storageBucket: "", - messagingSenderId: "397157634637" + apiKey: "AIzaSyB3LVTO7RSDrZAkHBkpzg9T5KkuoCoy4qo", + authDomain: `${appName}-${appId}.firebaseapp.com`, + databaseURL: `https://${appName}-${appId}.firebaseio.com`, + projectId: `${appName}-${appId}`, + storageBucket: `${appName}-${appId}.appspot.com`, + messagingSenderId: "651090769196" }) \ No newline at end of file diff --git a/src/ducks/peoples.js b/src/ducks/peoples.js new file mode 100644 index 0000000..a4cf75d --- /dev/null +++ b/src/ducks/peoples.js @@ -0,0 +1,59 @@ +import {appName} from '../config' +import {Record, OrderedMap} from 'immutable' +import {createSelector} from 'reselect' + + +/** + * Constants + * */ +export const moduleName = 'peoples' +const prefix = `${appName}/${moduleName}` + +export const ADD_PEOPLE = `${prefix}/ADD_PEOPLE` + +/** + * Reducer + * */ +const PeopleModel = Record({ + id: null, + firstName: '', + lastName: '', + email: '' +}) + +const DefaultReducerState = Record({ + entities: new OrderedMap({}), +}) + +export default (peoples = new DefaultReducerState(), action) => { + const {type, payload} = action + + switch (type) { + case ADD_PEOPLE: + return peoples.setIn(['entities'], new PeopleModel({ + ...payload.people, + })) + + default: + return peoples + } +} + +/** + * Selectors + * */ + +export const stateSelector = state => state[moduleName] +export const peoplesSelector = createSelector(stateSelector, state => state.peoples.entities) + +/** + * Action Creators + * */ +export function addPeople(people) { + return { + type: ADD_PEOPLE, + payload: { + people: {...people, id: Date.now() + Math.random() } + }, + } +} diff --git a/src/redux/reducer.js b/src/redux/reducer.js index 34143fe..513ef63 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/peoples' export default combineReducers({ router, form, - [authModule]: authReducer + [authModule]: authReducer, + [peopleModule]: peopleReducer, }) \ No newline at end of file