Hometask/5

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

@@ -2,6 +2,7 @@ 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,24 +14,43 @@ class PeopleList extends Component {
 
   render() {
     return (
-      <List
-        rowRenderer={this.rowRenderer}
-        rowCount={this.props.people.length}
-        rowHeight={150}
-        height={400}
-        width={400}
-      />
+      <TransitionMotion styles={this.getStyles()} willEnter={this.willEnter}>
+        {(interpolated) => (
+          <List
+            rowRenderer={this.rowRenderer(interpolated)}
+            rowCount={this.props.people.length}
+            rowHeight={150}
+            height={400}
+            width={400}
+          />
+        )}
+      </TransitionMotion>
     )
   }
 
-  rowRenderer = ({ style, index, key }) => {
-    const person = this.props.people[index]
-    return (
-      <div style={style} key={key}>
-        <PersonCard person={person} />
-      </div>
-    )
+  rowRenderer = (interpolated) => ({ style, index, key }) => {
+    const person = interpolated[index]
+
+    if (person)
+      return (
+        <div style={{ ...style, ...person.style }} key={key}>
+          <PersonCard person={person.data} />
+        </div>
+      )
   }
+
+  willEnter = () => ({
+    opacity: 0
+  })
+
+  getStyles = () =>
+    this.props.people.map((person) => ({
+      key: person.uid,
+      style: {
+        opacity: spring(1, { stiffness: 10, dumping: 30 })
+      },
+      data: person
+    }))
 }
 
 export default connect(

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 { all, call, apply, put, takeEvery, take } from 'redux-saga/effects'
+import {
+  all,
+  call,
+  apply,
+  put,
+  takeEvery,
+  take,
+  spawn
+} from 'redux-saga/effects'
+import { eventChannel } from 'redux-saga'
 
 /**
  * Constants
@@ -114,15 +123,29 @@ export function* signInSaga() {
   yield put({ type: SIGN_IN_REQUESTS_LIMIT })
 }
 
-export function* saga() {
-  yield all([takeEvery(SIGN_UP_REQUEST, signUpSaga), signInSaga()])
+const createAuthChanel = () =>
+  eventChannel((emit) => {
+    const callback = (user) => emit({ user })
+
+    return firebase.auth().onAuthStateChanged((user) => callback(user))
+  })
+
+export function* realtimeAuthSaga() {
+  const chanel = yield call(createAuthChanel)
+
+  while (true) {
+    const { user } = yield take(chanel)
+    if (!user) return
+
+    yield put({
+      type: SIGN_IN_SUCCESS,
+      payload: { user }
+    })
+  }
 }
 
-firebase.auth().onAuthStateChanged((user) => {
-  if (!user) return
+export const saga = function*() {
+  yield spawn(realtimeAuthSaga)
 
-  window.store.dispatch({
-    type: SIGN_IN_SUCCESS,
-    payload: { user }
-  })
-})
+  yield all([takeEvery(SIGN_UP_REQUEST, signUpSaga), signInSaga()])
+}