Finish HT1

admin/src/App.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react'
-import { Route } from 'react-router-dom'
+import { Route, Redirect, Switch } from 'react-router-dom'
 import ProtectedRoute from './components/common/protected-route'
 import AuthPage from './routes/auth'
 import AdminPage from './routes/admin'
@@ -8,8 +8,11 @@ class App extends Component {
     render() {
         return (
             <div>
-                <Route path = "/auth" component = {AuthPage} />
-                <ProtectedRoute path = "/admin" component = {AdminPage} />
+                <Switch>
+                    <Route path = "/auth" component = {AuthPage} />
+                    <ProtectedRoute path = "/admin" component = {AdminPage} />
+                    <Redirect exact path = "/" to = "/auth" />
+                </Switch>
             </div>
         )
     }

admin/src/components/admin/addPersonForm.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+import {Field, reduxForm} from 'redux-form'
+import ErrorField from '../common/error-field'
+
+class AddPersonForm extends Component {
+    render() {
+
+        return (
+            <form onSubmit={this.props.handleSubmit}>
+                <h2>Add Person</h2>
+                <div>
+                    <Field
+                        name="firstName"
+                        component={ErrorField}
+                        label="firstName"
+                    />
+                </div>
+                <div>
+                    <Field
+                        name="lastName"
+                        component={ErrorField}
+                        label="lastName"
+                    />
+                </div>
+                <div>
+                    <Field
+                        name="email"
+                        component={ErrorField}
+                        label="email"
+                    />
+                </div>
+                <div>
+                    <button type="submit">submit</button>
+                </div>
+            </form>
+        )
+    }
+}
+
+export default reduxForm({
+    form: 'addPerson'
+})(AddPersonForm)
+

admin/src/components/common/error-field.js

@@ -10,7 +10,7 @@ class ErrorField extends Component {
         const errorMessage = touched && error && <h3 style = {{ color: 'red' }}>{error}</h3>
         return (
             <div>
-                {label}
+                <div>{label}</div>
                 <input {...input} type = {type}/>
                 {errorMessage}
             </div>

admin/src/config.js

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

admin/src/ducks/admin.js

@@ -0,0 +1,47 @@
+import {appName} from '../config'
+import {reset} from 'redux-form'
+import {Record, List} from 'immutable'
+import firebase from 'firebase'
+import { createSelector } from 'reselect'
+
+/**
+ * Constants
+ * */
+export const moduleName = 'admin'
+const prefix = `${appName}/${moduleName}`
+
+export const ADD_PERSON_SUCCESS = `${prefix}/ADD_PERSON_SUCCESS`
+
+/**
+ * Reducer
+ * */
+export const ReducerRecord = Record({
+    persons: List()
+})
+
+export default function reducer(state = new ReducerRecord(), action) {
+    const {type, payload} = action
+
+    switch (type) {
+        case ADD_PERSON_SUCCESS:
+            return state.updateIn([ 'persons' ], persons => persons.push(payload))
+
+        default:
+            return state
+    }
+}
+
+/**
+ * Selectors
+ * */
+
+/**
+ * Action Creators
+ * */
+
+export function addPerson(personData) {
+    return (dispatch) => {
+        dispatch({type: ADD_PERSON_SUCCESS, payload: personData})
+        dispatch(reset('addPerson'))
+    }
+}

admin/src/ducks/auth.js

@@ -1,6 +1,7 @@
 import {appName} from '../config'
 import {Record} from 'immutable'
 import firebase from 'firebase'
+import { push } from 'react-router-redux'
 import { createSelector } from 'reselect'
 
 /**
@@ -57,8 +58,14 @@ export function signIn(email, password) {
 }
 
 firebase.auth().onAuthStateChanged(user => {
-    user && window.store.dispatch({
-        type: SIGN_IN_SUCCESS,
-        payload: { user }
-    })
+    if (!!user) {
+        window.store.dispatch({
+            type: SIGN_IN_SUCCESS,
+            payload: { user }
+        })
+
+        window.store.dispatch(push('/admin'))
+    }
+
+
 })

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

admin/src/redux/store.js

@@ -1,10 +1,31 @@
 import {createStore, applyMiddleware} from 'redux'
 import thunk from 'redux-thunk'
-import logger from 'redux-logger'
+import {createLogger} from 'redux-logger'
 import {routerMiddleware} from 'react-router-redux'
+import { isImmutable } from 'immutable'
 import reducer from './reducer'
 import history from '../history'
 
+const stateTransformer = (state) => {
+    let newState = {};
+
+    for (var i of Object.keys(state)) {
+        if (isImmutable(state[i])) {
+            newState[i] = state[i].toJS();
+        } else {
+            newState[i] = state[i];
+        }
+    };
+
+    return newState;
+};
+
+
+const logger = createLogger({
+    collapsed: true,
+    stateTransformer
+});
+
 const enhancer = applyMiddleware(thunk, routerMiddleware(history), logger)
 
 const store = createStore(reducer, enhancer)

admin/src/routes/admin.js

@@ -1,17 +1,26 @@
 import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+import AddPersonForm from '../components/admin/addPersonForm'
+import { addPerson } from '../ducks/admin'
 
 class AdminPage extends Component {
     static propTypes = {
 
     }
 
+    onPersonSubmit = (data) => this.props.addPerson(data)
+
     render() {
+
         return (
             <div>
                 <h1>Admin Page</h1>
+                <AddPersonForm onSubmit={this.onPersonSubmit}/>
             </div>
         )
     }
 }
 
-export default AdminPage
+export default connect(null, {addPerson})(AdminPage)
+