Hometask5

src/components/people/PersonRow.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import {DragSource} from 'react-dnd'
 import {getEmptyImage} from 'react-dnd-html5-backend'
 import DragPreview from './PersonDragPreview'
+import {Motion, spring} from 'react-motion'
 
 class PersonRow extends Component {
     static propTypes = {
@@ -13,12 +14,19 @@ class PersonRow extends Component {
     }
 
     render() {
-        const {style, person, connectDragSource, isDragging} = this.props
+        const {style, person, connectDragSource} = this.props
         return (
-            <div style = {{...style, opacity: isDragging ? 0.1 : 1}}>
-                {connectDragSource(<h2>{person.firstName} {person.lastName}</h2>)}
-                <h3>{person.email}</h3>
-            </div>
+            <Motion
+                defaultStyle={{opacity: 0}}
+                style={{opacity: spring(1)}}
+            >
+                {interpolatingStyle => (
+                    <div style = {{...style, ...interpolatingStyle}}>
+                        {connectDragSource(<h2>{person.firstName} {person.lastName}</h2>)}
+                        <h3>{person.email}</h3>
+                    </div>
+                )}
+            </Motion>
         )
     }
 }

src/ducks/auth.js

@@ -2,7 +2,8 @@ import {appName} from '../config'
 import {Record} from 'immutable'
 import firebase from 'firebase'
 import {createSelector} from 'reselect'
-import {call, put, all, take} from 'redux-saga/effects'
+import {eventChannel} from 'redux-saga'
+import {call, put, all, take, spawn} from 'redux-saga/effects'
 import {replace} from 'react-router-redux'
 
 /**
@@ -69,6 +70,7 @@ export function signIn(email, password) {
     }
 }
 
+/*
 firebase.auth().onAuthStateChanged(user => {
     if (!user) return
 
@@ -77,6 +79,7 @@ firebase.auth().onAuthStateChanged(user => {
         payload: { user }
     })
 })
+*/
 
 /**
  * Sagas
@@ -126,11 +129,22 @@ export const signInSaga = function * () {
     }
 }
 
+const createAuthSocket = () => eventChannel(emit => firebase.auth().onAuthStateChanged(user => emit({ user })))
+
 export function * watchStatusChangeSaga() {
+    const chan = yield call(createAuthSocket)
+
     while (true) {
-        yield take(SIGN_IN_SUCCESS)
+        const { user } = yield take(chan)
+
+        if (user) {
+            yield put({
+                type: SIGN_IN_SUCCESS,
+                payload: { user }
+            })
 
-        yield (put(replace('/admin')))
+            yield (put(replace('/admin')))
+        }
     }
 }
 

src/ducks/people.js

@@ -6,6 +6,7 @@ import {delay, eventChannel} from 'redux-saga'
 import firebase from 'firebase'
 import {createSelector} from 'reselect'
 import {fbToEntities} from './utils'
+import {LOCATION_CHANGE} from 'react-router-redux';
 
 /**
  * Constants
@@ -171,6 +172,20 @@ export const cancelableSyncSaga = function * () {
 */
 }
 
+export const cancelableRealtimePeopleSyncSaga = function * () {
+    let task
+
+    while (true) {
+        const {payload} = yield take(LOCATION_CHANGE)
+        if (payload.pathname.includes('people') || payload.pathname.includes('admin')) {
+            task = yield fork(realtimePeopleSyncSaga)
+
+        } else if (task) {
+            yield cancel(task)
+        }
+    }
+}
+
 const createPeopleSocket = () => eventChannel(emit => {
     const ref = firebase.database().ref('people')
     const callback = data => emit({ data })
@@ -183,18 +198,23 @@ const createPeopleSocket = () => eventChannel(emit => {
 export const realtimePeopleSyncSaga = function * () {
     const chan = yield call(createPeopleSocket)
 
-    while (true) {
+    try {
         const { data } = yield take(chan)
 
         yield put({
             type: FETCH_ALL_SUCCESS,
             payload: data.val()
         })
+    } finally {
+        if (yield cancelled()) {
+            yield call([chan, chan.close])
+            console.log('---', 'realtime saga was cancelled')
+        }
     }
 }
 
 export function * saga() {
-    yield spawn(realtimePeopleSyncSaga)
+    yield spawn(cancelableRealtimePeopleSyncSaga)
 
     yield all([
         takeEvery(ADD_PERSON_REQUEST, addPersonSaga),