diff --git a/src/components/people/PersonRow.js b/src/components/people/PersonRow.js index 0db66ae..c4318ed 100644 --- a/src/components/people/PersonRow.js +++ b/src/components/people/PersonRow.js @@ -2,6 +2,7 @@ import React, { Component } from 'react' import {DragSource} from 'react-dnd' import {getEmptyImage} from 'react-dnd-html5-backend' import DragPreview from './PersonDragPreview' +import {Motion, spring} from 'react-motion' class PersonRow extends Component { static propTypes = { @@ -13,12 +14,19 @@ class PersonRow extends Component { } render() { - const {style, person, connectDragSource, isDragging} = this.props + const {style, person, connectDragSource} = this.props return ( -
- {connectDragSource(

{person.firstName} {person.lastName}

)} -

{person.email}

-
+ + {interpolatingStyle => ( +
+ {connectDragSource(

{person.firstName} {person.lastName}

)} +

{person.email}

+
+ )} +
) } } diff --git a/src/ducks/auth.js b/src/ducks/auth.js index 09ebeda..afd320a 100644 --- a/src/ducks/auth.js +++ b/src/ducks/auth.js @@ -2,7 +2,8 @@ import {appName} from '../config' import {Record} from 'immutable' import firebase from 'firebase' import {createSelector} from 'reselect' -import {call, put, all, take} from 'redux-saga/effects' +import {eventChannel} from 'redux-saga' +import {call, put, all, take, spawn} from 'redux-saga/effects' import {replace} from 'react-router-redux' /** @@ -69,6 +70,7 @@ export function signIn(email, password) { } } +/* firebase.auth().onAuthStateChanged(user => { if (!user) return @@ -77,6 +79,7 @@ firebase.auth().onAuthStateChanged(user => { payload: { user } }) }) +*/ /** * Sagas @@ -126,11 +129,22 @@ export const signInSaga = function * () { } } +const createAuthSocket = () => eventChannel(emit => firebase.auth().onAuthStateChanged(user => emit({ user }))) + export function * watchStatusChangeSaga() { + const chan = yield call(createAuthSocket) + while (true) { - yield take(SIGN_IN_SUCCESS) + const { user } = yield take(chan) + + if (user) { + yield put({ + type: SIGN_IN_SUCCESS, + payload: { user } + }) - yield (put(replace('/admin'))) + yield (put(replace('/admin'))) + } } } diff --git a/src/ducks/people.js b/src/ducks/people.js index 509323e..d73267f 100644 --- a/src/ducks/people.js +++ b/src/ducks/people.js @@ -6,6 +6,7 @@ import {delay, eventChannel} from 'redux-saga' import firebase from 'firebase' import {createSelector} from 'reselect' import {fbToEntities} from './utils' +import {LOCATION_CHANGE} from 'react-router-redux'; /** * Constants @@ -171,6 +172,20 @@ export const cancelableSyncSaga = function * () { */ } +export const cancelableRealtimePeopleSyncSaga = function * () { + let task + + while (true) { + const {payload} = yield take(LOCATION_CHANGE) + if (payload.pathname.includes('people') || payload.pathname.includes('admin')) { + task = yield fork(realtimePeopleSyncSaga) + + } else if (task) { + yield cancel(task) + } + } +} + const createPeopleSocket = () => eventChannel(emit => { const ref = firebase.database().ref('people') const callback = data => emit({ data }) @@ -183,18 +198,23 @@ const createPeopleSocket = () => eventChannel(emit => { export const realtimePeopleSyncSaga = function * () { const chan = yield call(createPeopleSocket) - while (true) { + try { const { data } = yield take(chan) yield put({ type: FETCH_ALL_SUCCESS, payload: data.val() }) + } finally { + if (yield cancelled()) { + yield call([chan, chan.close]) + console.log('---', 'realtime saga was cancelled') + } } } export function * saga() { - yield spawn(realtimePeopleSyncSaga) + yield spawn(cancelableRealtimePeopleSyncSaga) yield all([ takeEvery(ADD_PERSON_REQUEST, addPersonSaga),