diff --git a/src/components/events/EventTableVirtualized.js b/src/components/events/EventTableVirtualized.js index 8fb544c..75680c6 100644 --- a/src/components/events/EventTableVirtualized.js +++ b/src/components/events/EventTableVirtualized.js @@ -1,48 +1,64 @@ import React, { Component } from 'react' -import {Table, Column} from 'react-virtualized' +import {Table, Column, InfiniteLoader} from 'react-virtualized' import {connect} from 'react-redux' -import {fetchAllEvents, selectEvent, selectedEventsSelector, eventListSelector, loadedSelector, loadingSelector} from '../../ducks/events' +import {fetchLazyEvents, selectEvent, selectedEventsSelector, eventListSelector, loadedSelector, loadingSelector} from '../../ducks/events' import Loader from '../common/Loader' import 'react-virtualized/styles.css' class EventTableVirtualized extends Component { - static propTypes = { - - }; componentDidMount() { - this.props.fetchAllEvents() - console.log('---', 'load events') + this.props.fetchLazyEvents() } + isRowLoaded = ({ index }) => !!this.props.events[index] + + loadMoreRows = () => this.props.fetchLazyEvents() + render() { - if (this.props.loading) return + const {events, loading, selectEvent} = this.props + + if (loading) return + + const remoteRowCount = events.length; + return ( - this.props.selectEvent(rowData.uid)} + - - - -
+ {({ onRowsRendered, registerChild }) => ( + selectEvent(rowData.uid)} + onRowsRendered={onRowsRendered} + ref={registerChild} + overscanRowCount={2} + > + + + +
+ )} + ) } @@ -54,4 +70,4 @@ export default connect((state, props) => ({ loading: loadingSelector(state), loaded: loadedSelector(state), selected: selectedEventsSelector(state) -}), { fetchAllEvents, selectEvent })(EventTableVirtualized) \ No newline at end of file +}), { fetchLazyEvents, selectEvent })(EventTableVirtualized) \ No newline at end of file diff --git a/src/config.js b/src/config.js index 2782a0b..5c9f8f6 100644 --- a/src/config.js +++ b/src/config.js @@ -1,12 +1,13 @@ import firebase from 'firebase' export const appName = 'advreact-1610' +const appId = 'ec352' firebase.initializeApp({ - apiKey: "AIzaSyB31xpTtp4Jln_hb2kAbE4PGf6Mi8EgLyA", - authDomain: `${appName}.firebaseapp.com`, - databaseURL: `https://${appName}.firebaseio.com`, - projectId: appName, - storageBucket: "", - messagingSenderId: "397157634637" -}) \ No newline at end of file + apiKey: "AIzaSyB3LVTO7RSDrZAkHBkpzg9T5KkuoCoy4qo", + authDomain: `${appName}-${appId}.firebaseapp.com`, + databaseURL: `https://${appName}-${appId}.firebaseio.com`, + projectId: `${appName}-${appId}`, + storageBucket: `${appName}-${appId}.appspot.com`, + messagingSenderId: "651090769196" +}) diff --git a/src/ducks/events.js b/src/ducks/events.js index c978cc4..1060e07 100644 --- a/src/ducks/events.js +++ b/src/ducks/events.js @@ -1,4 +1,4 @@ -import {all, takeEvery, put, call} from 'redux-saga/effects' +import {all, put, call, takeEvery} from 'redux-saga/effects' import {appName} from '../config' import {Record, OrderedMap, OrderedSet} from 'immutable' import firebase from 'firebase' @@ -14,6 +14,9 @@ const prefix = `${appName}/${moduleName}` export const FETCH_ALL_REQUEST = `${prefix}/FETCH_ALL_REQUEST` export const FETCH_ALL_START = `${prefix}/FETCH_ALL_START` export const FETCH_ALL_SUCCESS = `${prefix}/FETCH_ALL_SUCCESS` +export const FETCH_LAZY_REQUEST = `${prefix}/FETCH_LAZY_REQUEST` +export const FETCH_LAZY_START = `${prefix}/FETCH_LAZY_START` +export const FETCH_LAZY_SUCCESS = `${prefix}/FETCH_LAZY_SUCCESS` export const SELECT_EVENT = `${prefix}/SELECT_EVENT` @@ -43,9 +46,11 @@ export default function reducer(state = new ReducerRecord(), action) { switch (type) { case FETCH_ALL_START: + case FETCH_LAZY_START: return state.set('loading', true) case FETCH_ALL_SUCCESS: + case FETCH_LAZY_SUCCESS: return state .set('loading', false) .set('loaded', true) @@ -83,6 +88,12 @@ export function fetchAllEvents() { } } +export function fetchLazyEvents() { + return { + type: FETCH_LAZY_REQUEST + } +} + export function selectEvent(uid) { return { type: SELECT_EVENT, @@ -109,16 +120,28 @@ export function* fetchAllSaga() { }) } -//lazy fetch FB -/* -firebase.database().ref('events') - .orderByKey() - .limitToFirst(10) - .startAt(lastUid) +export function* fetchLazySaga() { + yield put({ + type: FETCH_LAZY_START + }) + + const lastUid = stateSelector.entities ? stateSelector.entities.last().uid : '' + + const ref = firebase.database().ref('events') + .orderByKey() + .limitToFirst(10) + .startAt(lastUid) + + const snapshot = yield call([ref, ref.once], 'value') + + yield put({ + type: FETCH_LAZY_SUCCESS, + payload: snapshot.val() + }) +} -*/ export function* saga() { yield all([ - takeEvery(FETCH_ALL_REQUEST, fetchAllSaga) + takeEvery(FETCH_LAZY_REQUEST, fetchLazySaga) ]) } \ No newline at end of file