diff --git a/admin/src/components/people/people-list.js b/admin/src/components/people/people-list.js
index 867142e..07ac2ea 100644
--- a/admin/src/components/people/people-list.js
+++ b/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 (
-
+
+ {(interpolated) => {
+ const { length } = interpolated
+ return (
+
+ )
+ }}
+
)
}
- 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 (
-
-
+
)
}
diff --git a/admin/src/components/people/person-drag-preview.js b/admin/src/components/people/person-drag-preview.js
index 730f156..9005abe 100644
--- a/admin/src/components/people/person-drag-preview.js
+++ b/admin/src/components/people/person-drag-preview.js
@@ -4,7 +4,7 @@ import { personSelector } from '../../ducks/people'
class PersonDragPreview extends Component {
render() {
- return
{this.props.person.firstName}
+ return
{this.props.person && this.props.person.firstName}
}
}
diff --git a/admin/src/ducks/auth.js b/admin/src/ducks/auth.js
index 30fe550..1736184 100644
--- a/admin/src/ducks/auth.js
+++ b/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 }
- })
- }
-})
diff --git a/admin/src/ducks/people.js b/admin/src/ducks/people.js
index 44e7dd6..149f83d 100644
--- a/admin/src/ducks/people.js
+++ b/admin/src/ducks/people.js
@@ -7,9 +7,7 @@ import {
all,
takeEvery,
select,
- fork,
spawn,
- cancel,
cancelled,
race,
take