Task 5

admin/src/components/people/people-list.js

@@ -3,6 +3,7 @@ import { connect } from 'react-redux'
 import { peopleSelector, fetchAllPeople } from '../../ducks/people'
 import { List } from 'react-virtualized'
 import PersonCard from './person-card'
+import { TransitionMotion, spring } from 'react-motion'
 
 import 'react-virtualized/styles.css'
 
@@ -13,21 +14,51 @@ class PeopleList extends Component {
 
   render() {
     return (
-      <List
-        rowRenderer={this.rowRenderer}
-        rowCount={this.props.people.length}
-        rowHeight={150}
-        height={400}
-        width={400}
-      />
+      <TransitionMotion
+        styles={this.styles}
+        willEnter={this.willEnter}
+        willLeave={this.willLeave}
+      >
+        {(interpolated) => {
+          const { length } = interpolated
+          return (
+            <List
+              scrollToIndex={interpolated.length - 1}
+              rowRenderer={this.rowRenderer(interpolated)}
+              rowCount={length}
+              rowHeight={150}
+              height={400}
+              width={400}
+            />
+          )
+        }}
+      </TransitionMotion>
     )
   }
 
-  rowRenderer = ({ style, index, key }) => {
-    const person = this.props.people[index]
+  willEnter = () => ({
+    opacity: 0
+  })
+
+  willLeave = () => ({
+    opacity: spring(0, { stiffness: 150, damping: 20 })
+  })
+
+  get styles() {
+    return this.props.people.map((person) => ({
+      key: person.uid,
+      style: {
+        opacity: spring(1, { stiffness: 50, damping: 20 })
+      },
+      data: person
+    }))
+  }
+
+  rowRenderer = (interpolated) => ({ style, index, key }) => {
+    const rowCtx = interpolated[index]
     return (
-      <div style={style} key={key}>
-        <PersonCard person={person} />
+      <div style={{ ...style, ...rowCtx.style }} key={rowCtx.key}>
+        <PersonCard person={rowCtx.data} />
       </div>
     )
   }

admin/src/components/people/person-drag-preview.js

@@ -4,7 +4,7 @@ import { personSelector } from '../../ducks/people'
 
 class PersonDragPreview extends Component {
   render() {
-    return <div>{this.props.person.firstName}</div>
+    return <div>{this.props.person && this.props.person.firstName}</div>
   }
 }
 

admin/src/ducks/auth.js

@@ -2,7 +2,16 @@ import { appName } from '../config'
 import { Record } from 'immutable'
 import firebase from 'firebase/app'
 import { createSelector } from 'reselect'
-import { takeEvery, put, call, apply, take, all } from 'redux-saga/effects'
+import {
+  takeEvery,
+  put,
+  call,
+  apply,
+  take,
+  all,
+  spawn
+} from 'redux-saga/effects'
+import { eventChannel } from 'redux-saga'
 
 /**
  * Constants
@@ -69,6 +78,26 @@ export function signUp(email, password) {
  * Sagas
  */
 
+const createEventChannel = () =>
+  eventChannel((emit) =>
+    firebase.auth().onAuthStateChanged((user) => emit({ user }))
+  )
+
+export function* realtimeSyncSaga() {
+  const channel = yield call(createEventChannel)
+
+  while (true) {
+    const { user } = yield take(channel)
+
+    if (user) {
+      yield put({
+        type: SIGN_IN_SUCCESS,
+        payload: { user }
+      })
+    }
+  }
+}
+
 export function* signUpSaga({ payload }) {
   const auth = firebase.auth()
 
@@ -116,14 +145,7 @@ export function* signInSaga() {
 }
 
 export function* saga() {
+  yield spawn(realtimeSyncSaga)
+
   yield all([takeEvery(SIGN_UP_REQUEST, signUpSaga), signInSaga()])
 }
-
-firebase.auth().onAuthStateChanged((user) => {
-  if (user) {
-    window.store.dispatch({
-      type: SIGN_IN_SUCCESS,
-      payload: { user }
-    })
-  }
-})

admin/src/ducks/people.js

@@ -7,9 +7,7 @@ import {
   all,
   takeEvery,
   select,
-  fork,
   spawn,
-  cancel,
   cancelled,
   race,
   take