From 88307c4e4d8e1e5be98c64d5ced938f2418c3cad Mon Sep 17 00:00:00 2001 From: Gatilin Maxim Date: Sun, 12 Nov 2017 10:23:01 +0300 Subject: [PATCH 1/3] ##HT5.2 Add animation for adding people --- src/components/people/PeopleList.js | 2 +- src/components/people/PersonRow.js | 25 +++++++++++++++++-------- src/config.js | 8 ++++---- 3 files changed, 22 insertions(+), 13 deletions(-) diff --git a/src/components/people/PeopleList.js b/src/components/people/PeopleList.js index 17e6fad..cf880b8 100644 --- a/src/components/people/PeopleList.js +++ b/src/components/people/PeopleList.js @@ -17,7 +17,7 @@ class PeopleList extends Component { return ( - {connectDragSource(

{person.firstName} {person.lastName}

)} -

{person.email}

- + + { + interpolated => ( +
+ {connectDragSource(

{person.firstName} {person.lastName}

)} +

{person.email}

+
+ ) + } + ) } } diff --git a/src/config.js b/src/config.js index 2782a0b..161087f 100644 --- a/src/config.js +++ b/src/config.js @@ -1,12 +1,12 @@ import firebase from 'firebase' -export const appName = 'advreact-1610' +export const appName = 'react-course-f262b' firebase.initializeApp({ - apiKey: "AIzaSyB31xpTtp4Jln_hb2kAbE4PGf6Mi8EgLyA", authDomain: `${appName}.firebaseapp.com`, databaseURL: `https://${appName}.firebaseio.com`, projectId: appName, - storageBucket: "", - messagingSenderId: "397157634637" + apiKey: "AIzaSyAt-smU_1tqNdkj9pmSpVLxqaOjhDwf4dk", + storageBucket: "react-course-f262b.appspot.com", + messagingSenderId: "447165438476" }) \ No newline at end of file From 48c49791f6cbf72fd4572fb1958bda0bd6d9b066 Mon Sep 17 00:00:00 2001 From: Gatilin Maxim Date: Sun, 12 Nov 2017 12:04:01 +0300 Subject: [PATCH 2/3] ##HT5.1 Unsubscribe from firebase realtime when user leaves people page --- src/ducks/people.js | 41 +++++++++++++++++++++++++---------------- 1 file changed, 25 insertions(+), 16 deletions(-) diff --git a/src/ducks/people.js b/src/ducks/people.js index 509323e..55db3cf 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 @@ -160,15 +161,16 @@ export const syncPeopleWithShortPollingSaga = function * () { } export const cancelableSyncSaga = function * () { - const res = yield race({ - sync: syncPeopleWithShortPollingSaga(), - timeout: delay(6000) - }) -/* - const task = yield fork(syncPeopleWithShortPollingSaga) - yield delay(6000) - yield cancel(task) -*/ + let task = yield fork(realtimePeopleSyncSaga) + + while (true) { + const {payload: {pathname}} = yield take(LOCATION_CHANGE); + if (pathname !== '/people') { + yield cancel(task); + } else { + task = yield fork(realtimePeopleSyncSaga) + } + } } const createPeopleSocket = () => eventChannel(emit => { @@ -183,18 +185,25 @@ const createPeopleSocket = () => eventChannel(emit => { export const realtimePeopleSyncSaga = function * () { const chan = yield call(createPeopleSocket) - while (true) { - const { data } = yield take(chan) + try { + while (true) { + const { data } = yield take(chan) - yield put({ - type: FETCH_ALL_SUCCESS, - payload: data.val() - }) + yield put({ + type: FETCH_ALL_SUCCESS, + payload: data.val() + }) + } + } finally { + if (yield cancelled()) { + chan.close(); + console.log('People channel closed'); + } } } export function * saga() { - yield spawn(realtimePeopleSyncSaga) + yield spawn(cancelableSyncSaga) yield all([ takeEvery(ADD_PERSON_REQUEST, addPersonSaga), From ab49a812a2f0e133bce1e30d904174e95954839a Mon Sep 17 00:00:00 2001 From: Gatilin Maxim Date: Sun, 12 Nov 2017 13:24:13 +0300 Subject: [PATCH 3/3] ##HT5.3 Use eventChannel for auth changes, fetch people on admin page also --- src/ducks/auth.js | 40 ++++++++++++++++++++++++++++++---------- src/ducks/people.js | 2 +- 2 files changed, 31 insertions(+), 11 deletions(-) diff --git a/src/ducks/auth.js b/src/ducks/auth.js index 09ebeda..b84f7f9 100644 --- a/src/ducks/auth.js +++ b/src/ducks/auth.js @@ -2,8 +2,9 @@ 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 {call, put, all, take, spawn} from 'redux-saga/effects' import {replace} from 'react-router-redux' +import {eventChannel} from 'redux-saga' /** * Constants @@ -69,15 +70,6 @@ export function signIn(email, password) { } } -firebase.auth().onAuthStateChanged(user => { - if (!user) return - - window.store.dispatch({ - type: SIGN_IN_SUCCESS, - payload: { user } - }) -}) - /** * Sagas **/ @@ -134,7 +126,35 @@ export function * watchStatusChangeSaga() { } } +const createAuthSocket = () => eventChannel(emit => { + const auth = firebase.auth(); + const callback = user => emit({ user }) + + auth.onAuthStateChanged(callback) + + // empty function for unsubscribe + return () => {}; +}) + +export const realtimeAuthSaga = function * () { + const chan = yield call(createAuthSocket) + + while (true) { + const { user } = yield take(chan) + + if (user) { + yield put({ + type: SIGN_IN_SUCCESS, + payload: { user } + }) + } + } +} + + export function * saga() { + yield spawn(realtimeAuthSaga) + yield all([ signUpSaga(), signInSaga(), diff --git a/src/ducks/people.js b/src/ducks/people.js index 55db3cf..2c85cb5 100644 --- a/src/ducks/people.js +++ b/src/ducks/people.js @@ -165,7 +165,7 @@ export const cancelableSyncSaga = function * () { while (true) { const {payload: {pathname}} = yield take(LOCATION_CHANGE); - if (pathname !== '/people') { + if (pathname !== '/people' && pathname !== '/admin') { yield cancel(task); } else { task = yield fork(realtimePeopleSyncSaga)