Ht3

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 <Loader />
+        const {events, loading, selectEvent} = this.props
+
+        if (loading) return <Loader />
+
+        const remoteRowCount = events.length;
+
         return (
-            <Table
-                height={500}
-                width = {600}
-                rowHeight={40}
-                rowHeaderHeight={40}
-                rowGetter={this.rowGetter}
-                rowCount={this.props.events.length}
-                overscanRowCount={0}
-                onRowClick={({ rowData }) => this.props.selectEvent(rowData.uid)}
+            <InfiniteLoader
+                isRowLoaded={this.isRowLoaded}
+                loadMoreRows={this.loadMoreRows}
+                rowCount={remoteRowCount}
             >
-                <Column
-                    dataKey = 'title'
-                    width={300}
-                    label = 'title'
-                />
-                <Column
-                    dataKey = 'where'
-                    width={200}
-                    label = 'where'
-                />
-                <Column
-                    dataKey = 'when'
-                    width={200}
-                    label = 'when'
-                />
-            </Table>
+                {({ onRowsRendered, registerChild }) => (
+                    <Table
+                        height={400}
+                        width={600}
+                        headerHeight={40}
+                        rowHeight={40}
+                        rowHeaderHeight={40}
+                        rowGetter={this.rowGetter}
+                        rowCount={remoteRowCount}
+                        onRowClick={({ rowData }) => selectEvent(rowData.uid)}
+                        onRowsRendered={onRowsRendered}
+                        ref={registerChild}
+                        overscanRowCount={2}
+                    >
+                        <Column
+                            dataKey='title'
+                            width={300}
+                            label='title'
+                        />
+                        <Column
+                            dataKey='where'
+                            width={200}
+                            label='where'
+                        />
+                        <Column
+                            dataKey='when'
+                            width={200}
+                            label='when'
+                        />
+                    </Table>
+                )}
+            </InfiniteLoader>
         )
     }
 
@@ -54,4 +70,4 @@ export default connect((state, props) => ({
     loading: loadingSelector(state),
     loaded: loadedSelector(state),
     selected: selectedEventsSelector(state)
-}), { fetchAllEvents, selectEvent })(EventTableVirtualized)
+}), { fetchLazyEvents, selectEvent })(EventTableVirtualized)

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"
-})
+    apiKey: "AIzaSyB3LVTO7RSDrZAkHBkpzg9T5KkuoCoy4qo",
+    authDomain: `${appName}-${appId}.firebaseapp.com`,
+    databaseURL: `https://${appName}-${appId}.firebaseio.com`,
+    projectId: `${appName}-${appId}`,
+    storageBucket: `${appName}-${appId}.appspot.com`,
+    messagingSenderId: "651090769196"
+})

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)
     ])
 }