Ht5

src/components/people/PeopleList.js

@@ -17,7 +17,7 @@ class PeopleList extends Component {
         return (
             <List
                 rowCount={this.props.people.length}
-                height={200}
+                height={600}
                 width={500}
                 rowHeight={100}
                 rowRenderer={this.rowRenderer}

src/components/people/PersonRow.js

@@ -1,12 +1,12 @@
-import React, { Component } from 'react'
+import React, {Component} from 'react'
 import {DragSource} from 'react-dnd'
 import {getEmptyImage} from 'react-dnd-html5-backend'
 import DragPreview from './PersonDragPreview'
+import {Motion, spring, presets} from 'react-motion'
 
-class PersonRow extends Component {
-    static propTypes = {
 
-    };
+class PersonRow extends Component {
+    static propTypes = {};
 
     componentDidMount() {
         this.props.connectPreview(getEmptyImage())
@@ -15,10 +15,19 @@ class PersonRow extends Component {
     render() {
         const {style, person, connectDragSource, isDragging} = 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, presets.gentle/*{ stiffness: 150, damping: 1}*/)}}
+            >
+                {
+                    interpolated => (
+                        <div style={{...style, opacity: isDragging ? 0.1 : 1,...interpolated}}>
+                            {connectDragSource(<h2>{person.firstName} {person.lastName}</h2>)}
+                            <h3>{person.email}</h3>
+                        </div>
+                    )
+                }
+            </Motion>
         )
     }
 }

src/config.js

@@ -1,12 +1,12 @@
 import firebase from 'firebase'
 
-export const appName = 'advreact-1610'
+export const appName = 'react-course-f262b'
 
 firebase.initializeApp({
-    apiKey: "AIzaSyB31xpTtp4Jln_hb2kAbE4PGf6Mi8EgLyA",
     authDomain: `${appName}.firebaseapp.com`,
     databaseURL: `https://${appName}.firebaseio.com`,
     projectId: appName,
-    storageBucket: "",
-    messagingSenderId: "397157634637"
+    apiKey: "AIzaSyAt-smU_1tqNdkj9pmSpVLxqaOjhDwf4dk",
+    storageBucket: "react-course-f262b.appspot.com",
+    messagingSenderId: "447165438476"
 })

src/ducks/auth.js

@@ -2,8 +2,9 @@ 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 {call, put, all, take, spawn} from 'redux-saga/effects'
 import {replace} from 'react-router-redux'
+import {eventChannel} from 'redux-saga'
 
 /**
  * Constants
@@ -69,15 +70,6 @@ export function signIn(email, password) {
     }
 }
 
-firebase.auth().onAuthStateChanged(user => {
-    if (!user) return
-
-    window.store.dispatch({
-        type: SIGN_IN_SUCCESS,
-        payload: { user }
-    })
-})
-
 /**
  * Sagas
  **/
@@ -134,7 +126,35 @@ export function * watchStatusChangeSaga() {
     }
 }
 
+const createAuthSocket = () => eventChannel(emit => {
+    const auth = firebase.auth();
+    const callback = user => emit({ user })
+
+    auth.onAuthStateChanged(callback)
+
+    // empty function for unsubscribe
+    return () => {};
+})
+
+export const realtimeAuthSaga = function * () {
+    const chan = yield call(createAuthSocket)
+
+    while (true) {
+        const { user } = yield take(chan)
+
+        if (user) {
+            yield put({
+                type: SIGN_IN_SUCCESS,
+                payload: { user }
+            })
+        }
+    }
+}
+
+
 export function * saga() {
+    yield spawn(realtimeAuthSaga)
+
     yield all([
         signUpSaga(),
         signInSaga(),

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
@@ -160,15 +161,16 @@ export const syncPeopleWithShortPollingSaga = function * () {
 }
 
 export const cancelableSyncSaga = function * () {
-    const res = yield race({
-        sync: syncPeopleWithShortPollingSaga(),
-        timeout: delay(6000)
-    })
-/*
-    const task = yield fork(syncPeopleWithShortPollingSaga)
-    yield delay(6000)
-    yield cancel(task)
-*/
+    let task = yield fork(realtimePeopleSyncSaga)
+
+    while (true) {
+        const {payload: {pathname}} = yield take(LOCATION_CHANGE);
+        if (pathname !== '/people' && pathname !== '/admin') {
+            yield cancel(task);
+        } else {
+            task = yield fork(realtimePeopleSyncSaga)
+        }
+    }
 }
 
 const createPeopleSocket = () => eventChannel(emit => {
@@ -183,18 +185,25 @@ const createPeopleSocket = () => eventChannel(emit => {
 export const realtimePeopleSyncSaga = function * () {
     const chan = yield call(createPeopleSocket)
 
-    while (true) {
-        const { data } = yield take(chan)
+    try {
+        while (true) {
+            const { data } = yield take(chan)
 
-        yield put({
-            type: FETCH_ALL_SUCCESS,
-            payload: data.val()
-        })
+            yield put({
+                type: FETCH_ALL_SUCCESS,
+                payload: data.val()
+            })
+        }
+    } finally {
+        if (yield cancelled()) {
+            chan.close();
+            console.log('People channel closed');
+        }
     }
 }
 
 export function * saga() {
-    yield spawn(realtimePeopleSyncSaga)
+    yield spawn(cancelableSyncSaga)
 
     yield all([
         takeEvery(ADD_PERSON_REQUEST, addPersonSaga),