HT 2.1 - HT 2.3

src/components/Root.js

@@ -15,12 +15,15 @@ class Root extends Component {
 
     render() {
         const {signOut, signedIn} = this.props
-        const btn = signedIn
-            ? <button onClick = {signOut}>Sign out</button>
-            : <Link to="/auth/signin">sign in</Link>
+        const controls = signedIn
+            ? (<div>
+                <Link to="/people">People</Link>
+                <button onClick = {signOut}>Sign out</button>
+               </div>)
+            : <Link to="/auth/signin">Sign in</Link>
         return (
             <div>
-                {btn}
+                {controls}
                 <ProtectedRoute path="/admin" component={AdminPage}/>
                 <ProtectedRoute path="/people" component={PersonPage}/>
                 <Route path="/auth" component={AuthPage}/>

src/components/routes/AuthPage.js

@@ -3,7 +3,7 @@ import SignInForm from '../auth/SignInForm'
 import SignUpForm from '../auth/SignUpForm'
 import {Route, NavLink} from 'react-router-dom'
 import {connect} from 'react-redux'
-import {signUp, moduleName} from '../../ducks/auth'
+import {signIn, signUp, moduleName} from '../../ducks/auth'
 import Loader from '../common/Loader'
 
 class AuthPage extends Component {
@@ -25,10 +25,10 @@ class AuthPage extends Component {
         )
     }
 
-    handleSignIn = (values) => console.log('---', values)
+    handleSignIn = ({email, password}) => this.props.signIn(email, password)
     handleSignUp = ({email, password}) => this.props.signUp(email, password)
 }
 
 export default connect(state => ({
     loading: state[moduleName].loading
-}), {signUp})(AuthPage)
+}), {signUp, signIn})(AuthPage)

src/ducks/auth.js

@@ -1,8 +1,7 @@
 import firebase from 'firebase'
 import {appName} from '../config'
 import {Record} from 'immutable'
-//import store from '../redux'
-import {all, cps, call, put, take, takeEvery} from 'redux-saga/effects'
+import {all, call, put, take, takeEvery} from 'redux-saga/effects'
 import {push} from 'react-router-redux'
 
 const ReducerRecord = Record({
@@ -15,7 +14,9 @@ export const moduleName = 'auth'
 export const SIGN_UP_REQUEST = `${appName}/${moduleName}/SIGN_UP_REQUEST`
 export const SIGN_UP_SUCCESS = `${appName}/${moduleName}/SIGN_UP_SUCCESS`
 export const SIGN_UP_ERROR = `${appName}/${moduleName}/SIGN_UP_ERROR`
+export const SIGN_IN_REQUEST = `${appName}/${moduleName}/SIGN_IN_REQUEST`
 export const SIGN_IN_SUCCESS = `${appName}/${moduleName}/SIGN_IN_SUCCESS`
+export const SIGN_IN_ERROR = `${appName}/${moduleName}/SIGN_IN_ERROR`
 export const SIGN_OUT_REQUEST = `${appName}/${moduleName}/SIGN_OUT_REQUEST`
 export const SIGN_OUT_SUCCESS = `${appName}/${moduleName}/SIGN_OUT_SUCCESS`
 
@@ -24,15 +25,18 @@ export default function reducer(state = new ReducerRecord(), action) {
     const {type, payload, error} = action
 
     switch (type) {
+        case SIGN_IN_REQUEST:
         case SIGN_UP_REQUEST:
             return state.set('loading', true)
 
         case SIGN_IN_SUCCESS:
+        case SIGN_UP_SUCCESS:
             return state
                 .set('loading', false)
                 .set('user', payload.user)
                 .set('error', null)
 
+        case SIGN_IN_ERROR:
         case SIGN_UP_ERROR:
             return state
                 .set('loading', false)
@@ -46,6 +50,13 @@ export default function reducer(state = new ReducerRecord(), action) {
     }
 }
 
+export function signIn(email, password) {
+    return {
+        type: SIGN_IN_REQUEST,
+        payload: {email, password}
+    }
+}
+
 export function signUp(email, password) {
     return {
         type: SIGN_UP_REQUEST,
@@ -59,6 +70,31 @@ export function signOut() {
     }
 }
 
+export const signInSaga = function * () {
+    const auth = firebase.auth()
+
+    while (true) {
+        const action = yield take(SIGN_IN_REQUEST)
+
+        try {
+            const user = yield call(
+                [auth, auth.signInWithEmailAndPassword],
+                action.payload.email, action.payload.password
+            )
+            yield put({
+                type: SIGN_IN_SUCCESS,
+                payload: {user}
+            })
+            yield put(push('/people'))
+        } catch (error) {
+            yield put({
+                type: SIGN_IN_ERROR,
+                error
+            })
+        }
+    }
+}
+
 export const signUpSaga = function * () {
     const auth = firebase.auth()
 
@@ -74,6 +110,7 @@ export const signUpSaga = function * () {
                 type: SIGN_UP_SUCCESS,
                 payload: {user}
             })
+            yield put(push('/people'))
         } catch (error) {
             yield put({
                 type: SIGN_UP_ERROR,
@@ -103,17 +140,20 @@ export function signUp(email, password) {
 }
 */
 
-export const watchStatusChange = function * () {
-    const auth = firebase.auth()
-    try {
-        yield cps([auth, auth.onAuthStateChanged])
-    } catch (user) {
-        yield put({
-            type: SIGN_IN_SUCCESS,
-            payload: {user}
-        })
-    }
-}
+// export const watchStatusChange = function * () {
+//     const auth = firebase.auth()
+//     try {
+//         yield cps([auth, auth.onAuthStateChanged])
+//     } catch (user) {
+//         yield put({
+//             type: SIGN_IN_SUCCESS,
+//             payload: {user}
+//         })
+//     }
+// }
+
+
+// NOTE: We don't need to listen to auth changes if we already dispatching user when he is signing in/up
 
 /*
 firebase.auth().onAuthStateChanged(user => {
@@ -142,8 +182,9 @@ export const signOutSaga = function * () {
 
 export const saga = function * () {
     yield all([
+        signInSaga(),
         signUpSaga(),
-        watchStatusChange(),
+        // watchStatusChange(),
         takeEvery(SIGN_OUT_REQUEST, signOutSaga)
     ])
 }

src/ducks/people.js

@@ -1,6 +1,7 @@
 import {appName} from '../config'
 import {Record, List} from 'immutable'
 import {put, call, takeEvery} from 'redux-saga/effects'
+import {reset} from 'redux-form'
 import {generateId} from './utils'
 
 const ReducerState = Record({
@@ -46,6 +47,7 @@ export const addPersonSaga = function * (action) {
         type: ADD_PERSON,
         payload: {...action.payload, id}
     })
+    yield put(reset('person'))
 }
 
 /*

src/redux/index.js

@@ -1,4 +1,4 @@
-import {createStore, applyMiddleware} from 'redux'
+import {createStore,  applyMiddleware, compose} from 'redux'
 import reducer from './reducer'
 import logger from 'redux-logger'
 import {routerMiddleware} from 'react-router-redux'
@@ -9,7 +9,11 @@ import rootSaga from './saga'
 const sagaMiddleware = createSagaMiddleware()
 const enhancer = applyMiddleware(sagaMiddleware, routerMiddleware(history), logger)
 
-const store = createStore(reducer, enhancer)
+const store = createStore(reducer, compose(
+        enhancer,
+        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+    )
+)
 window.store = store
 
 sagaMiddleware.run(rootSaga)