SectionList

sectionlist.js

/**
 * @providesModule InfinteList
 */

import React, { PropTypes } from 'react'
import { View, StyleSheet, SectionList } from 'react-native'
import ListComponent from 'ListComponent'
import ListComponentStub from 'ListComponentStub'
import ListHeader from 'ListHeader'
import colors from 'colors'

import R from 'ramda'

const styles = StyleSheet.create({
  searchViewCont: {
    backgroundColor: colors.bgColor
  }
})

const shouldItemUpdate = ({ item: curr }, { item: next }) => curr.isFavourite !== next.isFavourite

const InfiniteList = ({ list, favourites, dispatch, onEndReached, onListItemClick }) => {
  if (list.fetching && R.isEmpty(list.data)) {
    return (
      <View style={styles.searchViewCont}>
        <ListComponentStub />
        <ListComponentStub />
        <ListComponentStub />
      </View>
    )
  }
  if (list.data && list.data.length) {
    return (
      <SectionList
        sections={[
          {
            key: 'list_items',
            data: list.data.map((item) => {
              const isFavourite = R.has(item.id, favourites[item.type])
              return {
                ...item,
                isFavourite
              }
            })
          }
        ]}
        renderItem={({ item }) => (
          <ListComponent item={item} dispatch={dispatch} onListItemClick={onListItemClick} />
        )}
        ListHeaderComponent={ListHeader}
        legacyImplementation={false}
        enableVirtualization
        keyExtractor={({ id }) => String(id)}
        initialNumToRender={7}
        refreshing={false}
        onEndReached={onEndReached}
        onEndReachedThreshold={3}
        maxToRenderPerBatch={7}
        windowSize={25}
        removeClippedSubviews
        shouldItemUpdate={shouldItemUpdate}
      />
    )
  }
  return null
}

InfiniteList.propTypes = {
  list: PropTypes.shape({
    data: PropTypes.array.isRequired,
    fetching: PropTypes.bool.isRequired
  }).isRequired,
  favourites: PropTypes.shape({
    buy: PropTypes.object,
    resale: PropTypes.object,
    rent: PropTypes.object
  }).isRequired,
  dispatch: PropTypes.func.isRequired,
  onListItemClick: PropTypes.func.isRequired,
  onEndReached: PropTypes.func.isRequired
}

export default InfiniteList