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