Infinite FlatList with Firebase integration

FirebaseInfiniteFlatList.tsx

import { throttle } from 'lodash';
import React from 'react';
import { ActivityIndicator, FlatList, ListRenderItem } from 'react-native';
import { RNFirebase } from 'react-native-firebase';
import { Subject, Subscription } from 'rxjs';

type Query = RNFirebase.firestore.Query;
type DocumentSnapshot = RNFirebase.firestore.DocumentSnapshot;

interface P<T> {
  keyExtractor?: (item: T, index: number) => string;
  renderItem: ListRenderItem<T>;
  query: Query;
  pageSize: number;
  numColumns?: number;
  extraData?: any;
  docMapper: (d: DocumentSnapshot) => T;
}
interface S<T> {
  refreshing: boolean;
  loadingMore: boolean;
  end: boolean;
  data: T[];
  last: DocumentSnapshot | null;
}

export default class FirebaseInfiniteFlatList<T> extends React.Component<P<T>, S<T>> {
  subject: Subject<'refresh' | 'loadmore'>;
  subscription: Subscription;

  constructor(props: P<T>) {
    super(props);
    this.state = { data: [], last: null, refreshing: false, loadingMore: false, end: false };
    this.subscription = new Subscription();
    this.subject = new Subject();

    this.handleLoadMore = throttle(this.handleLoadMore, 1000);
    this.handleRefresh = throttle(this.handleRefresh, 1000);

    this.subscription = this.subject
      .throttleTime(2000)
      .do(loadType => {
        if (loadType === 'loadmore') {
          this.setState({ loadingMore: true });
        } else {
          this.setState({ refreshing: true });
        }
      })
      .exhaustMap(async loadType => {
        const { query, docMapper, pageSize } = this.props;
        const { last, data } = this.state;

        const q = (last && loadType === 'loadmore') ? query.startAfter(last) : query;
        const sn = await q.get();
        if (sn.empty) {
          return { data, last: null, end: true, loadingMore: false, refreshing: false };
        } else {
          const snlast = sn.docs[sn.docs.length - 1];
          const sndata = sn.docs.map(docMapper);
          const nextdata = loadType === 'loadmore' ? data.concat(sndata) : sndata;
          return { data: nextdata, last: snlast, loadingMore: false, refreshing: false, end: sn.size < pageSize };
        }
      }).subscribe(st => {
        this.setState({ ...st });
      });
  }

  componentDidMount() {
    this.subject.next('refresh');
  }

  componentWillUnmount() {
    this.subscription.unsubscribe();
  }

  refreshData = () => {
    this.subject.next('refresh');
  }

  handleRefresh = () => {
    this.subject.next('refresh');
  }

  handleLoadMore = () => {
    this.subject.next('loadmore');
  }

  render() {
    const { keyExtractor, renderItem, numColumns, extraData } = this.props;
    const { data, end, refreshing, loadingMore } = this.state;
    return (
      <FlatList
        data={data}
        extraData={extraData}
        keyExtractor={keyExtractor}
        renderItem={renderItem}
        refreshing={refreshing}
        onRefresh={this.handleRefresh}
        onEndReached={end || refreshing ? undefined : this.handleLoadMore}
        onEndReachedThreshold={0.2}
        numColumns={numColumns}
        ListFooterComponent={loadingMore ?
          <ActivityIndicator style={{ margin: 10 }} /> :
          null}
      />
    );
  }
}