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