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