hometask 1

admin/src/App.js

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

admin/src/components/user/form.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import { reduxForm, Field, reset } from 'redux-form'
+import { validate as validateEmail } from 'email-validator'
+import ErrorField from '../common/error-field'
+
+const UserForm = ({ handleSubmit }) => (
+  <div>
+    <h3>Add User Form</h3>
+    <form onSubmit={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">Add User</button>
+    </form>
+  </div>
+)
+
+const validate = ({ firstName, lastName, email }) => {
+  const errors = {}
+
+  if (!email) errors.email = 'email is a required field'
+  else if (!validateEmail(email)) errors.email = 'email is invalid'
+
+  if (!firstName) errors.firstName = 'password is a required field'
+  if (!lastName) errors.lastName = 'password is a required field'
+
+  return errors
+}
+
+const formName = 'user-add'
+
+const afterSubmit = (result, dispatch) => dispatch(reset(formName))
+
+export default reduxForm({
+  form: formName,
+  validate,
+  onSubmitSuccess: afterSubmit
+})(UserForm)

admin/src/components/user/list.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+const UserList = ({ users }) => (
+  <div>
+    <h3>User List</h3>
+    <ul>
+      {users.map((user, index) => (
+        <li key={index}>
+          {user.get('firstName')} {user.get('lastName')} {user.get('email')}
+        </li>
+      ))}
+    </ul>
+  </div>
+)
+
+export default UserList

admin/src/ducks/users.js

@@ -0,0 +1,43 @@
+import { appName } from '../config'
+import { Map, List } from 'immutable'
+
+/**
+ * Constants
+ * */
+export const moduleName = 'users'
+const prefix = `${appName}/${moduleName}`
+
+export const USER_ADD_SUCCESS = `${prefix}/USER_ADD_SUCCESS`
+
+/**
+ * Reducer
+ * */
+const initialState = List()
+
+export default function reducer(state = initialState, action) {
+  const { type, payload } = action
+
+  switch (type) {
+    case USER_ADD_SUCCESS:
+      return state.push(Map(payload.user))
+    default:
+      return state
+  }
+}
+
+/**
+ * Selectors
+ * */
+
+/**
+ * Action Creators
+ * */
+
+export function addUser(user) {
+  return (dispatch) => {
+    dispatch({
+      type: USER_ADD_SUCCESS,
+      payload: { user }
+    })
+  }
+}

admin/src/redux/reducer.js

@@ -1,8 +1,10 @@
 import { combineReducers } from 'redux'
 import { reducer as form } from 'redux-form'
 import authReducer, { moduleName as authModule } from '../ducks/auth'
+import userReducer, { moduleName as userModule } from '../ducks/users'
 
 export default combineReducers({
   form,
-  [authModule]: authReducer
+  [authModule]: authReducer,
+  [userModule]: userReducer
 })

admin/src/routes/users.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { addUser } from '../ducks/users'
+import UserForm from '../components/user/form'
+import UserList from '../components/user/list'
+
+class Users extends Component {
+  render() {
+    const { users, addUser } = this.props
+    return (
+      <div>
+        <h1>User List Page</h1>
+        <UserForm onSubmit={addUser} />
+        {users.size > 0 && <UserList users={users} />}
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    users: state.users
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  { addUser }
+)(Users)