From 546fd85534a3708f0661078ccab1c7467206d5d8 Mon Sep 17 00:00:00 2001 From: Smirnov Evgenii Date: Sun, 27 Aug 2017 18:19:00 +0300 Subject: [PATCH] add people page: form and list --- src/components/Root.js | 2 ++ src/components/auth/SignUpForm.js | 6 ++-- src/components/common/ErrorField.js | 4 +-- src/components/people/NewPersonForm.js | 40 ++++++++++++++++++++++++++ src/components/people/PeopleList.js | 20 +++++++++++++ src/components/routes/PeoplePage.js | 29 +++++++++++++++++++ src/config.js | 21 +++++++------- src/ducks/people.js | 24 ++++++++++++++++ src/helpers.js | 7 +++++ src/redux/reducer.js | 4 ++- 10 files changed, 141 insertions(+), 16 deletions(-) create mode 100644 src/components/people/NewPersonForm.js create mode 100644 src/components/people/PeopleList.js create mode 100644 src/components/routes/PeoplePage.js create mode 100644 src/ducks/people.js create mode 100644 src/helpers.js diff --git a/src/components/Root.js b/src/components/Root.js index bbf2596..a6baf4e 100644 --- a/src/components/Root.js +++ b/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 PeoplePage from './routes/PeoplePage' import ProtectedRoute from './common/ProtectedRoute' class Root extends Component { @@ -13,6 +14,7 @@ class Root extends Component { return (
+
) diff --git a/src/components/auth/SignUpForm.js b/src/components/auth/SignUpForm.js index af7a699..85a7c37 100644 --- a/src/components/auth/SignUpForm.js +++ b/src/components/auth/SignUpForm.js @@ -1,7 +1,7 @@ import React, { Component } from 'react' import {reduxForm, Field} from 'redux-form' -import emailValidator from 'email-validator' import ErrorField from '../common/ErrorField' +import { getEmailFieldError } from '../../helpers' class SignUpForm extends Component { static propTypes = { @@ -28,8 +28,8 @@ class SignUpForm extends Component { const validate = ({email, password}) => { const errors = {} - if (!email) errors.email = 'email is required' - else if (!emailValidator.validate(email)) errors.email = 'invalid email' + const emailError = getEmailFieldError(email) + if (emailError) errors.email = emailError if (!password) errors.password = 'password is required' else if (password.length < 8) errors.password = 'to short' diff --git a/src/components/common/ErrorField.js b/src/components/common/ErrorField.js index a4879c1..7a91036 100644 --- a/src/components/common/ErrorField.js +++ b/src/components/common/ErrorField.js @@ -1,11 +1,11 @@ import React from 'react' function ErrorField(props) { - const {input, type, meta: {error, touched}} = props + const {input, type, meta: {error, touched}, label} = props const errorText = touched && error &&
{error}
return (
- + {errorText}
diff --git a/src/components/people/NewPersonForm.js b/src/components/people/NewPersonForm.js new file mode 100644 index 0000000..6b68431 --- /dev/null +++ b/src/components/people/NewPersonForm.js @@ -0,0 +1,40 @@ +import React, { Component } from 'react'; +import { reduxForm, Field } from 'redux-form'; +import ErrorField from '../common/ErrorField'; +import { getEmailFieldError } from '../../helpers'; + +class NewPersonForm extends Component { + render() { + return ( +
+

New Person

+
+ + + + + +
+ ); + } +} + +NewPersonForm.propTypes = {}; +NewPersonForm.defaultProps = {}; + +const validate = ({ firstName, lastName, email }) => { + const errors = {} + + if (!firstName) errors.firstName = 'first name is required' + if (!lastName) errors.lastName = 'last name is required' + + const emailError = getEmailFieldError(email) + if (emailError) errors.email = emailError + + return errors; +} + +export default reduxForm({ + form: 'newPerson', + validate +})(NewPersonForm); diff --git a/src/components/people/PeopleList.js b/src/components/people/PeopleList.js new file mode 100644 index 0000000..5992139 --- /dev/null +++ b/src/components/people/PeopleList.js @@ -0,0 +1,20 @@ +import React, { Component } from 'react'; + +class PeopleList extends Component { + render() { + const { people } = this.props + return ( +
+

People List

+ {people.map(({id, ...rest}) => ( +
{Object.values(rest).join(' ')}
+ ))} +
+ ); + } +} + +PeopleList.propTypes = {}; +PeopleList.defaultProps = {}; + +export default PeopleList; diff --git a/src/components/routes/PeoplePage.js b/src/components/routes/PeoplePage.js new file mode 100644 index 0000000..2c88d03 --- /dev/null +++ b/src/components/routes/PeoplePage.js @@ -0,0 +1,29 @@ +import React, { Component } from 'react'; +import { connect } from 'react-redux'; +import { addPerson, moduleName } from '../../ducks/people'; +import NewPersonForm from '../people/NewPersonForm'; +import PeopleList from '../people/PeopleList'; + +class PeoplePage extends Component { + handleNewPerson = (person) => { + console.log('---', person); + this.props.addPerson(person) + } + + render() { + return ( +
+

People Page

+ + +
+ ); + } +} + +PeoplePage.propTypes = {}; +PeoplePage.defaultProps = {}; + +export default connect(state => ({ + people: state[moduleName] +}), {addPerson})(PeoplePage); diff --git a/src/config.js b/src/config.js index e8d8d78..1e97e4c 100644 --- a/src/config.js +++ b/src/config.js @@ -1,13 +1,14 @@ -import firebase from 'firebase' +import firebase from 'firebase'; + +export const appName = "adv-react"; -export const appName = "advreact-21-08" export const firebaseConfig = { - apiKey: "AIzaSyDjA6CeIHuni5lNm4ML1b-TSxJltsYUO8g", - authDomain: `${appName}.firebaseapp.com`, - databaseURL: `https://${appName}.firebaseio.com`, - projectId: appName, - storageBucket: `${appName}.appspot.com`, - messagingSenderId: "789814589283" -} + apiKey: "AIzaSyBX5UU94QPTl4P3WaKwTYU-RLMqSzuThAI", + authDomain: `${appName}.firebaseapp.com`, + databaseURL: `https://${appName}.firebaseio.com`, + projectId: appName, + storageBucket: `${appName}.appspot.com`, + messagingSenderId: "825625171274" +}; -firebase.initializeApp(firebaseConfig) \ No newline at end of file +firebase.initializeApp(firebaseConfig); diff --git a/src/ducks/people.js b/src/ducks/people.js new file mode 100644 index 0000000..1899d81 --- /dev/null +++ b/src/ducks/people.js @@ -0,0 +1,24 @@ +import { appName } from '../config'; + +export const moduleName = 'people' +export const ADD_PERSON = `${appName}/${moduleName}/ADD_PERSON` + +export default (state = [], action) => { + const { type, payload } = action + + switch (type) { + case ADD_PERSON: + return state.concat({ + id: Date.now(), + ...payload.person + }) + + default: + return state + } +}; + +export const addPerson = (person) => ({ + type: ADD_PERSON, + payload: { person } +}) diff --git a/src/helpers.js b/src/helpers.js new file mode 100644 index 0000000..06ede0b --- /dev/null +++ b/src/helpers.js @@ -0,0 +1,7 @@ +import emailValidator from 'email-validator' + +export const getEmailFieldError = (email) => { + if (!email) return 'email is required' + else if (!emailValidator.validate(email)) return 'invalid email' + return null; +}; 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