From 289870f1efc8ec59a5b4589431e3306b22c7aeb8 Mon Sep 17 00:00:00 2001
From: Personal <personal@Sergeys-MacBook-Pro.local>
Date: Wed, 4 Jul 2018 06:38:05 +0200
Subject: [PATCH 1/2] create user path with navigation to new user form

---
 admin/src/App.js                      |  2 ++
 admin/src/components/user/new-user.js |  9 +++++++++
 admin/src/routes/user.js              | 22 ++++++++++++++++++++++
 3 files changed, 33 insertions(+)
 create mode 100644 admin/src/components/user/new-user.js
 create mode 100644 admin/src/routes/user.js

diff --git a/admin/src/App.js b/admin/src/App.js
index c54f214..a1f61bc 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 NewUser from './routes/user'
 
 class App extends Component {
   render() {
     return (
       <div>
         <Route path="/auth" component={Auth} />
+        <Route path="/user" component={NewUser} />
         <ProtectedRoute path="/admin" component={Admin} />
       </div>
     )
diff --git a/admin/src/components/user/new-user.js b/admin/src/components/user/new-user.js
new file mode 100644
index 0000000..dd57904
--- /dev/null
+++ b/admin/src/components/user/new-user.js
@@ -0,0 +1,9 @@
+import React, { Component } from 'react'
+
+class NewUserForm extends Component {
+  render() {
+    return <div>New User Form</div>
+  }
+}
+
+export default NewUserForm
diff --git a/admin/src/routes/user.js b/admin/src/routes/user.js
new file mode 100644
index 0000000..76bef74
--- /dev/null
+++ b/admin/src/routes/user.js
@@ -0,0 +1,22 @@
+import React, { Component } from 'react'
+import { Route, NavLink } from 'react-router-dom'
+import NewUserForm from '../components/user/new-user'
+
+class UserRoute extends Component {
+  render() {
+    return (
+      <div>
+        <h1>User page</h1>
+        <NavLink to="/user/new-user" activeStyle={{ color: 'red' }}>
+          Create a new user
+        </NavLink>
+
+        <Route path="/user/new-user" render={this.newUserForm} />
+      </div>
+    )
+  }
+
+  newUserForm = () => <NewUserForm />
+}
+
+export default UserRoute

From 139ee81114e75e4015c481bb0db3cf41add44204 Mon Sep 17 00:00:00 2001
From: Personal <personal@Sergeys-MacBook-Pro.local>
Date: Wed, 4 Jul 2018 09:36:08 +0200
Subject: [PATCH 2/2] implement new user form

---
 admin/src/components/user/create-user.js | 40 ++++++++++++++++++++++
 admin/src/components/user/new-user.js    |  9 -----
 admin/src/ducks/user.js                  | 43 ++++++++++++++++++++++++
 admin/src/redux/reducer.js               | 17 ++++++++--
 admin/src/routes/user.js                 | 17 +++++++---
 5 files changed, 111 insertions(+), 15 deletions(-)
 create mode 100644 admin/src/components/user/create-user.js
 delete mode 100644 admin/src/components/user/new-user.js
 create mode 100644 admin/src/ducks/user.js

diff --git a/admin/src/components/user/create-user.js b/admin/src/components/user/create-user.js
new file mode 100644
index 0000000..93ab23b
--- /dev/null
+++ b/admin/src/components/user/create-user.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'
+
+class NewUserForm extends Component {
+  render() {
+    return (
+      <div>
+        <h3>Create User Form</h3>
+        <form onSubmit={this.props.handleSubmit}>
+          <Field label="First Name" name="firstName" component={ErrorField} />
+          <Field label="Last Name" name="lastName" component={ErrorField} />
+          <Field label="Email" name="email" component={ErrorField} />
+
+          <button type="submit">Submit</button>
+          <button onClick={this.props.reset}>Reset</button>
+        </form>
+      </div>
+    )
+  }
+}
+
+const validate = ({ firstName, lastName, email }) => {
+  const errors = {}
+
+  if (!firstName) errors.firstName = 'first name is a required field'
+
+  if (!lastName) errors.lastName = 'last name is a required field'
+
+  if (!email) errors.email = 'email is a required field'
+  else if (!validateEmail(email)) errors.email = 'email is invalid'
+
+  return errors
+}
+
+export default reduxForm({
+  form: 'user',
+  validate
+})(NewUserForm)
diff --git a/admin/src/components/user/new-user.js b/admin/src/components/user/new-user.js
deleted file mode 100644
index dd57904..0000000
--- a/admin/src/components/user/new-user.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React, { Component } from 'react'
-
-class NewUserForm extends Component {
-  render() {
-    return <div>New User Form</div>
-  }
-}
-
-export default NewUserForm
diff --git a/admin/src/ducks/user.js b/admin/src/ducks/user.js
new file mode 100644
index 0000000..4627d0f
--- /dev/null
+++ b/admin/src/ducks/user.js
@@ -0,0 +1,43 @@
+import { appName } from '../config'
+import { Record, OrderedMap } from 'immutable'
+
+/**
+ * Constants
+ * */
+export const moduleName = 'user'
+const prefix = `${appName}/${moduleName}`
+
+export const CREATE_USER = `${prefix}/CREATE_USER`
+
+/**
+ * Reducer
+ * */
+export const ReducerList = Record({
+  users: OrderedMap({})
+})
+
+export default function reducer(state = new ReducerList(), action) {
+  const { type, payload } = action
+
+  switch (type) {
+    case CREATE_USER:
+      return state.setIn(['users', payload.email], payload)
+
+    default:
+      return state
+  }
+}
+
+/**
+ * Action Creators
+ * */
+export function createUser(firstName, lastName, email) {
+  return {
+    type: CREATE_USER,
+    payload: {
+      firstName,
+      lastName,
+      email
+    }
+  }
+}
diff --git a/admin/src/redux/reducer.js b/admin/src/redux/reducer.js
index 78c74cf..4b73749 100644
--- a/admin/src/redux/reducer.js
+++ b/admin/src/redux/reducer.js
@@ -1,8 +1,21 @@
 import { combineReducers } from 'redux'
-import { reducer as form } from 'redux-form'
+import { reducer as formReducer } from 'redux-form'
 import authReducer, { moduleName as authModule } from '../ducks/auth'
+import userReducer, {
+  moduleName as userModule,
+  CREATE_USER
+} from '../ducks/user'
 
 export default combineReducers({
-  form,
+  form: formReducer.plugin({
+    [userModule]: (state, action) => {
+      switch (action.type) {
+        case CREATE_USER:
+          return undefined
+        default:
+          return state
+      }
+    }
+  }),
   [authModule]: authReducer
 })
diff --git a/admin/src/routes/user.js b/admin/src/routes/user.js
index 76bef74..85d51bb 100644
--- a/admin/src/routes/user.js
+++ b/admin/src/routes/user.js
@@ -1,6 +1,8 @@
 import React, { Component } from 'react'
 import { Route, NavLink } from 'react-router-dom'
-import NewUserForm from '../components/user/new-user'
+import { connect } from 'react-redux'
+import NewUserForm from '../components/user/create-user'
+import { createUser } from '../ducks/user'
 
 class UserRoute extends Component {
   render() {
@@ -11,12 +13,19 @@ class UserRoute extends Component {
           Create a new user
         </NavLink>
 
-        <Route path="/user/new-user" render={this.newUserForm} />
+        <Route path="/user/new-user" render={this.newUserForm} onSubmit />
       </div>
     )
   }
 
-  newUserForm = () => <NewUserForm />
+  newUserForm = () => <NewUserForm onSubmit={this.handleSubmit} />
+
+  handleSubmit = ({ firstName, lastName, email }) => {
+    this.props.createUser(firstName, lastName, email)
+  }
 }
 
-export default UserRoute
+export default connect(
+  null,
+  { createUser }
+)(UserRoute)