HW1

admin/src/App.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react'
-import { Route } from 'react-router-dom'
+import {NavLink, Route} from 'react-router-dom'
 import ProtectedRoute from './components/common/protected-route'
 import AuthPage from './routes/auth'
 import AdminPage from './routes/admin'
@@ -8,6 +8,9 @@ class App extends Component {
     render() {
         return (
             <div>
+                <NavLink to = "/auth" activeStyle = {{ color: 'red' }}>Auth</NavLink>&nbsp;
+                <NavLink to = "/admin" activeStyle = {{ color: 'red' }}>Admin</NavLink>&nbsp;
+
                 <Route path = "/auth" component = {AuthPage} />
                 <ProtectedRoute path = "/admin" component = {AdminPage} />
             </div>

admin/src/components/user/user.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react'
+import { reduxForm, Field } from 'redux-form'
+import validator from 'email-validator'
+import ErrorField from "../common/error-field";
+
+class UserForm extends Component {
+    static propTypes = {
+
+    }
+
+    render() {
+        return (
+            <div>
+                <h2>Add user</h2>
+                <form onSubmit = {this.props.handleSubmit}>
+                    <Field name = "first" component = {ErrorField} label = "First:" />
+                    <Field name = "last" component = {ErrorField} label = "Last:" />
+                    <Field name = "email" component = {ErrorField} label = "Email:" />
+                    <button type = "submit">Add user</button>
+                </form>
+            </div>
+        )
+    }
+}
+
+const validate = ({ first, last, email }) => {
+    const errors = {}
+
+    if (!first || !last) errors.first = errors.last = 'first or last is a required field'
+    if (email && !validator.validate(email)) errors.email = 'invalid email'
+
+    return errors
+}
+
+export default reduxForm({
+    form: 'user',
+    validate
+})(UserForm)

admin/src/config.js

@@ -1,14 +1,14 @@
 import firebase from 'firebase'
 
-export const appName = 'advreact-10-05'
+export const appName = 'advreact-8046a'
 
 export const config = {
-    apiKey: 'AIzaSyCbMQM0eQUSQ0SuLVAu9ZNPUcm4rdbiB8U',
+    apiKey: 'AIzaSyDDXueGWilb2t294SfYQfFC24o93KhDuc4',
     authDomain: `${appName}.firebaseapp.com`,
     databaseURL: `https://${appName}.firebaseio.com`,
     projectId: appName,
     storageBucket: "",
-    messagingSenderId: "1094825197832"
+    messagingSenderId: "1082449474915"
 }
 
 firebase.initializeApp(config)

admin/src/ducks/user.js

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

admin/src/redux/reducer.js

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

admin/src/routes/admin.js

@@ -1,4 +1,7 @@
 import React, { Component } from 'react'
+import {connect} from 'react-redux'
+import UserForm from '../components/user/user'
+import { addUser } from '../ducks/user'
 
 class AdminPage extends Component {
     static propTypes = {
@@ -9,9 +12,12 @@ class AdminPage extends Component {
         return (
             <div>
                 <h1>Admin Page</h1>
+                <UserForm onSubmit = {this.addUser}/>
             </div>
         )
     }
+
+    addUser = ({ first, last, email }) => this.props.addUser(first, last, email)
 }
 
-export default AdminPage
+export default connect(null, { addUser })(AdminPage)