From 2e037d19c5936862b542140198023f91a98faf59 Mon Sep 17 00:00:00 2001 From: Lilit Smotrova Date: Wed, 4 Jul 2018 21:38:26 +0300 Subject: [PATCH] =?UTF-8?q?##=20HT1.1=20=D0=A1=D0=BE=D0=B7=D0=B4=D0=B0?= =?UTF-8?q?=D1=82=D1=8C=20=D1=84=D0=BE=D1=80=D0=BC=D1=83=20=D0=B4=D0=BB?= =?UTF-8?q?=D1=8F=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8?= =?UTF-8?q?=D1=8F=20=D1=87=D0=B5=D0=BB=D0=BE=D0=B2=D0=B5=D0=BA=D0=B0,=20?= =?UTF-8?q?=D1=81=D0=BE=D1=85=D1=80=D0=B0=D0=BD=D1=8F=D1=82=D1=8C=20=D0=B5?= =?UTF-8?q?=D0=B3=D0=BE=20=D0=B2=20=D1=81=D1=82=D0=BE=D1=80(=20firstName,?= =?UTF-8?q?=20lastName,=20email=20)=20##=20HT1.2=20=D0=A7=D0=B8=D1=81?= =?UTF-8?q?=D1=82=D0=B8=D1=82=D1=8C=20=D1=84=D0=BE=D1=80=D0=BC=D1=83=20?= =?UTF-8?q?=D0=BF=D0=BE=D1=81=D0=BB=D0=B5=20=D1=83=D1=81=D0=BF=D0=B5=D1=88?= =?UTF-8?q?=D0=BD=D0=BE=D0=B3=D0=BE=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- admin/src/App.js | 2 + admin/src/components/persons/add-person.js | 40 +++++++++++++++++ admin/src/ducks/persons.js | 50 ++++++++++++++++++++++ admin/src/redux/reducer.js | 18 +++++++- admin/src/routes/persons.js | 33 ++++++++++++++ 5 files changed, 141 insertions(+), 2 deletions(-) create mode 100644 admin/src/components/persons/add-person.js create mode 100644 admin/src/ducks/persons.js create mode 100644 admin/src/routes/persons.js diff --git a/admin/src/App.js b/admin/src/App.js index c54f214..02da8ee 100644 --- a/admin/src/App.js +++ b/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 (
+
) diff --git a/admin/src/components/persons/add-person.js b/admin/src/components/persons/add-person.js new file mode 100644 index 0000000..a03dd0a --- /dev/null +++ b/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 ( +
+

Add Person Form

+ +
+ + + + + + +
+ ) + } +} + +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) diff --git a/admin/src/ducks/persons.js b/admin/src/ducks/persons.js new file mode 100644 index 0000000..a9984ff --- /dev/null +++ b/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 } + }) +} diff --git a/admin/src/redux/reducer.js b/admin/src/redux/reducer.js index 78c74cf..b4d3bb2 100644 --- a/admin/src/redux/reducer.js +++ b/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 }) diff --git a/admin/src/routes/persons.js b/admin/src/routes/persons.js new file mode 100644 index 0000000..9fcfe5f --- /dev/null +++ b/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 ( +
+

Persons page

+ +
+ + AddPerson + +
+ + +
+ ) + } + + addPersonForm = () => + + handleAddPerson = ({ firstName, lastName, email }) => + this.props.addPerson({ firstName, lastName, email }) +} + +export default connect( + null, + { addPerson } +)(PersonsRoute)