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)