Ht1 Smotrova Lilit

admin/src/App.js

@@ -3,12 +3,14 @@ import { Route } from 'react-router-dom'
 import ProtectedRoute from './components/common/protected-route'
 import Auth from './routes/auth'
 import Admin from './routes/admin'
+import Persons from './routes/persons'
 
 class App extends Component {
   render() {
     return (
       <div>
         <Route path="/auth" component={Auth} />
+        <Route path="/persons" component={Persons} />
         <ProtectedRoute path="/admin" component={Admin} />
       </div>
     )

admin/src/components/persons/add-person.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react'
+import { reduxForm, Field } from 'redux-form'
+import ErrorField from '../common/error-field'
+import { validate as validateEmail } from 'email-validator/index'
+
+class AddPersonForm extends Component {
+  render() {
+    return (
+      <div>
+        <h3>Add Person Form</h3>
+
+        <form onSubmit={this.props.handleSubmit}>
+          <Field label="Firstname" name="firstName" component={ErrorField} />
+          <Field label="Lastname" name="lastName" component={ErrorField} />
+          <Field label="Email" name="email" component={ErrorField} />
+
+          <button type="submit">Add</button>
+        </form>
+      </div>
+    )
+  }
+}
+
+const validate = ({ email, lastName, firstName }) => {
+  const errors = {}
+
+  if (!email) errors.email = 'email is a required field'
+  else if (!validateEmail(email)) errors.email = 'email is invalid'
+
+  if (!lastName) errors.lastName = 'lastName is a required field'
+
+  if (!firstName) errors.firstName = 'lastName is a required field'
+
+  return errors
+}
+
+export default reduxForm({
+  form: 'add-person',
+  validate
+})(AddPersonForm)

admin/src/ducks/persons.js

@@ -0,0 +1,50 @@
+import { appName } from '../config'
+import { Record } from 'immutable'
+
+/**
+ * Constants
+ * */
+export const moduleName = 'persons'
+const prefix = `${appName}/${moduleName}`
+
+export const ADD_PERSON = `${prefix}/ADD_PERSON`
+export const ADD_PERSON_SUCCESS = `${prefix}/ADD_PERSON_SUCCESS`
+
+/**
+ * Reducer
+ * */
+export const ReducerRecord = Record({
+  items: []
+})
+
+export default function reducer(state = new ReducerRecord(), action) {
+  const { type, payload } = action
+
+  switch (type) {
+    case ADD_PERSON:
+      return state.update('items', (persons) => persons.concat([payload]))
+
+    default:
+      return state
+  }
+}
+
+/**
+ * Selectors
+ * */
+
+/**
+ * Action Creators
+ * */
+
+export const addPerson = ({ firstName, lastName, email }) => (dispatch) => {
+  dispatch({
+    type: ADD_PERSON,
+    payload: { firstName, lastName, email }
+  })
+
+  dispatch({
+    type: ADD_PERSON_SUCCESS,
+    payload: { firstName, lastName, email }
+  })
+}

admin/src/redux/reducer.js

@@ -1,8 +1,22 @@
 import { combineReducers } from 'redux'
 import { reducer as form } from 'redux-form'
 import authReducer, { moduleName as authModule } from '../ducks/auth'
+import personReducer, {
+  moduleName as personModule,
+  ADD_PERSON_SUCCESS
+} from '../ducks/persons'
 
 export default combineReducers({
-  form,
-  [authModule]: authReducer
+  form: form.plugin({
+    'add-person': (state, action) => {
+      switch (action.type) {
+        case ADD_PERSON_SUCCESS:
+          return undefined
+        default:
+          return state
+      }
+    }
+  }),
+  [authModule]: authReducer,
+  [personModule]: personReducer
 })

admin/src/routes/persons.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react'
+import AddPersonForm from '../components/persons/add-person'
+import { connect } from 'react-redux'
+import { addPerson } from '../ducks/persons'
+import { NavLink, Route } from 'react-router-dom'
+
+class PersonsRoute extends Component {
+  render() {
+    return (
+      <div>
+        <h1>Persons page</h1>
+
+        <div>
+          <NavLink to="/persons/add" activeStyle={{ color: 'red' }}>
+            AddPerson
+          </NavLink>
+        </div>
+
+        <Route path="/persons/add" render={this.addPersonForm} />
+      </div>
+    )
+  }
+
+  addPersonForm = () => <AddPersonForm onSubmit={this.handleAddPerson} />
+
+  handleAddPerson = ({ firstName, lastName, email }) =>
+    this.props.addPerson({ firstName, lastName, email })
+}
+
+export default connect(
+  null,
+  { addPerson }
+)(PersonsRoute)