HT 1

admin/src/components/form/add-user.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+import { reduxForm, Field } from 'redux-form'
+
+class AddUserForm extends Component {
+  render() {
+    return (
+      <div>
+        <h3>Add user:</h3>
+        <form onSubmit={this.props.handleSubmit}>
+          <div>
+            Name: <Field name="firstName" component="input" />
+          </div>
+          <div>
+            Last name: <Field name="lastName" component="input" />
+          </div>
+          <div>
+            Email: <Field name="email" component="input" />
+          </div>
+          <button type="submit">Add user</button>
+        </form>
+      </div>
+    )
+  }
+}
+
+export default reduxForm({
+  form: 'addUser'
+})(AddUserForm)

admin/src/config.js

@@ -1,15 +1,15 @@
 import { initializeApp } from 'firebase/app'
 import 'firebase/auth'
 
-export const appName = 'adv-react-25-06'
+export const appName = 'adv-react-au-0307'
 
 const config = {
-  apiKey: 'AIzaSyDzqwnZ_39QyqhxYZVPjVH8eBww7DUBmVc',
+  apiKey: 'AIzaSyDj6YDOCSRPFbUGtUwwtyPrA-koT2uKCxg',
   authDomain: `${appName}.firebaseapp.com`,
   databaseURL: `https://${appName}.firebaseio.com`,
   projectId: appName,
   storageBucket: '',
-  messagingSenderId: '874599443389'
+  messagingSenderId: '650330669903'
 }
 
 initializeApp(config)

admin/src/ducks/persons.js

@@ -0,0 +1,48 @@
+import { appName } from '../config'
+import { Record } from 'immutable'
+import { reset } from 'redux-form'
+
+/**
+ * Constants
+ * */
+export const moduleName = 'persons'
+const prefix = `${appName}/${moduleName}`
+
+export const ADD_USER = `${prefix}/ADD_USER`
+
+/**
+ * Reducer
+ * */
+export const ReducerRecord = Record({
+  person: null
+})
+
+export default function reducer(state = new ReducerRecord(), action) {
+  const { type, payload } = action
+
+  switch (type) {
+    case ADD_USER:
+      return state.set('person', payload.person)
+
+    default:
+      return state
+  }
+}
+
+/**
+ * Selectors
+ * */
+
+/**
+ * Action Creators
+ * */
+
+export function addUser(firstName, lastName, email) {
+  return (dispatch) => {
+    dispatch({
+      type: ADD_USER,
+      payload: { person: { firstName, lastName, email } }
+    })
+    dispatch(reset('addUser'))
+  }
+}

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 personsReducer, { moduleName as personsModule } from '../ducks/persons'
 
 export default combineReducers({
   form,
-  [authModule]: authReducer
+  [authModule]: authReducer,
+  [personsModule]: personsReducer
 })

admin/src/routes/auth.js

@@ -3,7 +3,9 @@ import { Route, NavLink } from 'react-router-dom'
 import { connect } from 'react-redux'
 import SignInForm from '../components/auth/sign-in'
 import SignUpForm from '../components/auth/sign-up'
+import AddUserForm from '../components/form/add-user'
 import { signIn, signUp } from '../ducks/auth'
+import { addUser } from '../ducks/persons'
 
 class AuthRoute extends Component {
   render() {
@@ -14,6 +16,7 @@ class AuthRoute extends Component {
 
         <Route path="/auth/sign-in" render={this.signInForm} />
         <Route path="/auth/sign-up" render={this.signUpForm} />
+        <Route path="/auth/add-user" render={this.addUserForm} />
       </div>
     )
   }
@@ -31,6 +34,11 @@ class AuthRoute extends Component {
             Sign Up
           </NavLink>
         </div>
+        <div>
+          <NavLink to="/auth/add-user" activeStyle={{ color: 'red' }}>
+            Add user
+          </NavLink>
+        </div>
       </Fragment>
     )
   }
@@ -39,11 +47,15 @@ class AuthRoute extends Component {
 
   signUpForm = () => <SignUpForm onSubmit={this.handleSignUp} />
 
+  addUserForm = () => <AddUserForm onSubmit={this.handleAddUser} />
+
   handleSignIn = ({ email, password }) => this.props.signIn(email, password)
   handleSignUp = ({ email, password }) => this.props.signUp(email, password)
+  handleAddUser = ({ firstName, lastName, email }) =>
+    this.props.addUser(firstName, lastName, email)
 }
 
 export default connect(
   null,
-  { signIn, signUp }
+  { signIn, signUp, addUser }
 )(AuthRoute)