Ht5

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

@@ -2,6 +2,8 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { peopleSelector, fetchAllPeople } from '../../ducks/people'
 import { List } from 'react-virtualized'
+import { TransitionMotion, spring } from 'react-motion'
+
 import PersonCard from './person-card'
 
 import 'react-virtualized/styles.css'
@@ -13,20 +15,48 @@ 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) => (
+          <List
+            scrollToIndex={interpolated.length - 1}
+            rowRenderer={this.rowRenderer(interpolated)}
+            rowCount={interpolated.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: 20, damping: 40 })
+  })
+
+  get styles() {
+    return this.props.people.map((people) => ({
+      key: people.uid,
+      style: {
+        opacity: spring(1, { stiffness: 50, damping: 40 })
+      },
+      data: people
+    }))
+  }
+
+  rowRenderer = (interpolated) => ({ style, index, key }) => {
+    const rowCtx = interpolated[index]
+    const person = rowCtx.data
     return (
-      <div style={style} key={key}>
+      <div style={{ ...style, ...rowCtx.style }} key={key}>
         <PersonCard person={person} />
       </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
@@ -115,15 +124,28 @@ export function* signInSaga() {
   })
 }
 
-export function* saga() {
-  yield all([takeEvery(SIGN_UP_REQUEST, signUpSaga), signInSaga()])
-}
+const createEventChannel = () =>
+  eventChannel((emitter) => {
+    return firebase.auth().onAuthStateChanged((user) => {
+      if (user) {
+        emitter({ user })
+      }
+    })
+  })
 
-firebase.auth().onAuthStateChanged((user) => {
-  if (user) {
-    window.store.dispatch({
+function* authSaga() {
+  const channel = yield createEventChannel()
+  while (true) {
+    const { user } = yield take(channel)
+    yield put({
       type: SIGN_IN_SUCCESS,
       payload: { user }
     })
   }
-})
+}
+
+export function* saga() {
+  yield spawn(authSaga)
+
+  yield all([takeEvery(SIGN_UP_REQUEST, signUpSaga), signInSaga()])
+}