Add ht1-2

src/components/Root.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import {Route} from 'react-router-dom'
 import AdminPage from './routes/AdminPage'
 import AuthPage from './routes/AuthPage'
-import PersonPage from './routes/PersonPage'
+import People from './people/People'
 import ProtectedRoute from './common/ProtectedRoute'
 
 class Root extends Component {
@@ -14,8 +14,8 @@ class Root extends Component {
         return (
             <div>
                 <ProtectedRoute path="/admin" component={AdminPage}/>
-                <ProtectedRoute path="/people" component={PersonPage}/>
                 <Route path="/auth" component={AuthPage}/>
+                <ProtectedRoute path="/people" component={People}/>
             </div>
         )
     }

src/components/people/People.js

@@ -0,0 +1,42 @@
+import React, { Component, PropTypes } from 'react'
+import {NavLink} from 'react-router-dom'
+import {connect} from 'react-redux'
+import Loader from '../common/Loader'
+import {addPerson, moduleName} from '../../ducks/people'
+import PeopleTable from './PeopleTable'
+import PeopleForm from './PeopleForm'
+
+
+class PeoplePage extends Component {
+  handleAddPerson = ({firstName, lastName, email}) => this.props.addPerson(firstName, lastName, email)
+
+  static propTypes = {
+    peopleList: PropTypes.array.isRequired
+  }
+
+  render() {
+    const {loading, peopleList} = this.props
+
+    const table = (peopleList.length > 0) ? <PeopleTable peopleList={peopleList} /> : null
+
+    return (
+      <div>
+        <h1>Add people
+          <NavLink
+          to="/auth"
+          style={{fontSize: '16px', fontWeight: '400', marginLeft: '6px'}}
+          activeStyle={{color: 'red'}}>Log out</NavLink>
+        </h1>
+        {table}
+        <PeopleForm peopleList={peopleList} onSubmit={this.handleAddPerson} />
+        {loading && <Loader />}
+      </div>
+    )
+  }
+}
+
+
+export default connect(state => ({
+  loading: state[moduleName].loading,
+  peopleList: state[moduleName].peopleList.toJS()
+}), {addPerson})(PeoplePage)

src/components/people/PeopleForm.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import {reduxForm, Field} from 'redux-form'
+import emailValidator from 'email-validator'
+import ErrorField from '../common/ErrorField'
+
+let people
+
+const PeopleForm = ({handleSubmit, peopleList}) => {
+
+  people = peopleList
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit}>
+        <Field name="firstName" component={ErrorField} />
+        <Field name="lastName" component={ErrorField} />
+        <Field name="email" component={ErrorField} />
+        <div>
+          <input type="submit" style={{marginTop: '15px'}} />
+        </div>
+      </form>
+    </div>
+  )
+}
+
+
+const validate = ({firstName, lastName, email}) => {
+  const errors = {}
+
+  if (!firstName) errors.firstName = 'First name is required'
+
+  if (!lastName) errors.lastName = 'Last name is required'
+
+  if (!email) errors.email = 'Email is required'
+    else if (!emailValidator.validate(email)) errors.email = 'Invalid email'
+    else if (checkRepeatEmail(email)) errors.email = 'User with this email already exists'
+
+  return errors
+}
+
+const checkRepeatEmail = (email) => {
+  let result = false
+  people.map((el) => { if (el.email === email) result = true })
+  return result
+}
+
+
+export default reduxForm({
+  form: 'people',
+  validate
+})(PeopleForm)

src/components/people/PeopleTable.js

@@ -0,0 +1,36 @@
+import React, { PropTypes } from 'react'
+
+const PeopleTable = ({peopleList}) =>
+  <div>
+    <table style={{marginBottom: '25px'}}>
+      <thead>
+        <tr>
+          <th>First Name</th>
+          <th>Last Name</th>
+          <th>E-mail</th>
+        </tr>
+      </thead>
+      <tbody>
+        { peopleList.map((el, index) => <PeopleTableRow person={el} key={index} /> ) }
+      </tbody>
+    </table>
+  </div>
+
+
+const PeopleTableRow = ({person: {firstName, lastName, email}}) =>
+  <tr>
+    <td>{firstName}</td>
+    <td>{lastName}</td>
+    <td>{email}</td>
+  </tr>
+
+
+PeopleTableRow.propTypes = {
+  person: PropTypes.shape({
+    firstName: PropTypes.string.isRequired,
+    lastName: PropTypes.string.isRequired,
+    email: PropTypes.string.isRequired
+  }).isRequired
+}
+
+export default PeopleTable

src/ducks/people.js

@@ -1,41 +1,61 @@
 import {appName} from '../config'
-import {Record, List} from 'immutable'
+import {List, Record} from 'immutable'
+import {reset} from 'redux-form'
 
-const ReducerState = Record({
-    entities: new List([])
+const PeopleListRecord = Record({
+  peopleList: List(),
+  error: null,
+  loading: false
 })
 
 const PersonRecord = Record({
-    id: null,
-    firstName: null,
-    lastName: null,
-    email: null
+  id: null,
+  firstName: null,
+  lastName: null,
+  email: null
 })
 
 export const moduleName = 'people'
-const prefix = `${appName}/${moduleName}`
-export const ADD_PERSON = `${prefix}/ADD_PERSON`
-
-
-export default function reducer(state = new ReducerState(), action) {
-    const {type, payload} = action
-
-    switch (type) {
-        case ADD_PERSON:
-            return state.update('entities', entities => entities.push(new PersonRecord(payload.person)))
-
-        default:
-            return state
-    }
+export const ADD_PERSON_REQUEST = `${appName}/${moduleName}/ADD_PERSON_REQUEST`
+export const ADD_PERSON_SUCCESS = `${appName}/${moduleName}/ADD_PERSON_SUCCESS`
+export const ADD_PERSON_ERROR = `${appName}/${moduleName}/ADD_PERSON_ERROR`
+
+
+export default function reducer(state = new PeopleListRecord(), action) {
+  const {type, payload, error} = action
+
+  switch (type) {
+  case ADD_PERSON_REQUEST:
+    return state.set('loading', true)
+
+  case ADD_PERSON_SUCCESS:
+    return state
+      .set('loading', false)
+      .set('error', null)
+      .setIn(['peopleList', state.get('peopleList').size], new PersonRecord({
+        id: state.get('peopleList').size,
+        firstName: payload.firstName,
+        lastName: payload.lastName,
+        email: payload.email
+      }))
+
+  case ADD_PERSON_ERROR:
+    return state
+      .set('loading', false)
+      .set('error', error)
+
+  default:
+    return state
+  }
 }
 
-export function addPerson(person) {
-    return (dispatch) => {
-        dispatch({
-            type: ADD_PERSON,
-            payload: {
-                person: {id: Date.now(), ...person}
-            }
-        })
-    }
-}
+export function addPerson(firstName, lastName, email) {
+  return (dispatch) => {
+    dispatch({
+      type: ADD_PERSON_SUCCESS,
+      payload: {firstName, lastName, email}
+    })
+    // Dispatching this to reset redux-form
+    dispatch(reset('people'))
+  }
+}

src/redux/index.js

@@ -1,4 +1,4 @@
-import {createStore, applyMiddleware} from 'redux'
+import {createStore, applyMiddleware, compose} from 'redux'
 import reducer from './reducer'
 import logger from 'redux-logger'
 import thunk from 'redux-thunk'
@@ -7,7 +7,12 @@ import history from '../history'
 
 const enhancer = applyMiddleware(routerMiddleware(history), thunk, logger)
 
-const store = createStore(reducer, enhancer)
+const store = createStore(reducer, compose(
+    enhancer,
+    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+  )
+)
+
 window.store = store
 
 export default store