react-loading-infinite-scroller

1.5.1 • Public • Published

react-loading-infinite-scroller

CircleCI npm version

Basic Usage

import LoadingInfiniteScroll from 'loading-infinite-scroller'
import { assignData, requestData } from 'pass-culture-shared'
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import { compose } from 'redux'
 
 
class FoosPage extends Component {
  constructor (props) {
    super(props)
    const { dispatch } = props
 
    this.state = {
      hasMore: false,
      isLoading: false
    }
 
    dispatch(assignData({ foos: [] }))
  }
 
  componentDidMount() {
    this.handleRequestData()
  }
 
  componentDidUpdate(prevProps) {
    const { location } = this.props
    if (location.search !== prevProps.location.search) {
      this.handleRequestData()
    }
  }
 
  handleRequestData = (handleSuccess, handleFail) => {
    const { user, dispatch, location } = this.props
    const { search } = location
 
    const path = `foos${search}`
 
    this.setState({ isLoading: true }, () => {
      dispatch(
        requestData('GET', path, {
          handleFail: () => {
            this.setState({
              hasMore: false,
              isLoading: false
            })
          },
          handleSuccess: (state, action) => {
            this.setState({
              hasMore: action.data && action.data.length > 0,
              isLoading: false
            })
          }
        })
      )
    })
 
  render () {
    const { foos, query } = this.props
    const { hasMore, isLoading } = this.state
 
    return (
      <LoadingInfiniteScroll
          hasMore={hasMore}
          isLoading={isLoading}
          useWindow
        >
          {
            foos.map(offerer =>
              <OffererItem article={foo} key={foo.id} />
            )
          }
        </LoadingInfiniteScroll>
    )
  }
}
 
FoosPage.defaultProps = {
  foos: null
}
 
FoosPage.propTypes = {
  foos: PropTypes.array
}
 
function mapStateToProps(state) {
  return {
    foos: state.data.foos
  }
}
 
export default compose(
  withRouter,
  connect(mapStateToProps)
)(FoosPage)

Package Sidebar

Install

npm i react-loading-infinite-scroller

Weekly Downloads

3

Version

1.5.1

License

MPL-2.0

Unpacked Size

29.4 kB

Total Files

5

Last publish

Collaborators

  • ledoux