how to display message eg. no more result once all the json file record has been loaded via react infinite scrolling

[deboyisgood]

Hello Sir, Your Code was excellent. I have worked on your web demo and i was able to code it to suit my need. But Am having one serious issue.
The problem is that it keeps on displaying more records as user scroll down the page without stop even when there is no more records in the Json Files or in the database.For instance in the json files or in the database, assuming I have just 2 records, Those two records will keep on replicating as long as I still scroll down the page.
Can someone help me fix this issue so that it can display a message eg (No more Records to Load) once all the records finished displaying as user scroll down the page.I have attached the script along with both Json File. You can add more data to json file and see what am telling you. Thanks

data.json
[{"name":"fred","description":"first"},{"name":"tony","description":"second"}]

here is the script index.html

`

<title>React Tutorial</title> <script src="https://unpkg.com/react@15.0.1/dist/react-with-addons.js"></script> <script src="https://unpkg.com/react-dom@15.0.1/dist/react-dom.js"></script> <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/babel-core/5.8.24/browser.js"></script>

<script type="text/babel">

const ReactScrollPagination = React.createClass({
isolate: {
onePageHeight: null,
timeoutFunc: null,
excludeHeight: null,
defaultShowTime: 2000
},
pageDivStle: {
position: 'fixed',
bottom: '15px',
left: 0,
right: 0,
textAlign: 'center'
},
pageContentStyle: {
display: 'inline-block',
background: 'rgba(6, 6, 6, 0.54)',
borderRadius: '5px',
padding: '3px 15px',
minWidth: '80px',
color: '#fff',
textAlign: 'center',
margin: '0 auto',
opacity: 1,
WebkitTransition: 'opacity 0.8s',
MozTransition: 'opacity 0.8s',
OTransition: 'opacity 0.8s',
transition: 'opacity 0.8s'
},
getInitialState: function () {
return {
currentPage: 1,
totalPages: null,
showPageStatus: false
}
},
showPageDiv: function () {
if (this.isolate.timeoutFunc) {
clearTimeout(this.isolate.timeoutFunc)
}
this.setState({showPageStatus: true})
let showTime = this.props.paginationShowTime ? parseInt(this.props.paginationShowTime)
: this.isolate.defaultShowTime

this.isolate.timeoutFunc = setTimeout(() => {
  this.setState({showPageStatus: false})
}, showTime)

},
getExcludeHeight: function () {
if (this.isolate.excludeHeight !== null) {
return this.isolate.excludeHeight
}

let excludeHeight = 0

if (this.props.excludeHeight) {
  let propsExcludeHeight = parseInt(this.props.excludeHeight)
  if (isNaN(propsExcludeHeight)) {
    console.error('WARN: Failed to convert the props excludeHeight "' + this.props.excludeHeight +
      '" to Number, please verify. Will take "0" by default.')
  } else {
    excludeHeight = propsExcludeHeight
  }
} else if (this.props.excludeElement && typeof this.props.excludeElement === 'string') {
  let excludeEle = jQuery(this.props.excludeElement)

  if (excludeEle.size() === 0) {
    console.error('WARN: Failed to get the element with given selectdor "' + this.props.excludeElement +
      '", please veirify. Will take "0" by default.')
  } else {
    excludeHeight = excludeEle.height()
  }
}
this.isolate.excludeHeight = excludeHeight

return excludeHeight

},
initialOnePageHeight: function () {
const documentHeight = jQuery(document).height()

if (typeof this.props.totalPages === 'number' && this.props.totalPages > 0 && this.isolate.onePageHeight === null) {
  let excludeHeight = this.getExcludeHeight()
  this.isolate.onePageHeight = documentHeight - excludeHeight
}

},
handlePageValue: function () {

this.initialOnePageHeight()

let windowHeight = jQuery(window).height()
let scrollTop = jQuery(window).scrollTop() + windowHeight - this.getExcludeHeight()

if (this.isolate.onePageHeight !== null) {
  let currentPage = Math.ceil(scrollTop / this.isolate.onePageHeight) || 1
  this.setState({currentPage: currentPage})
  this.showPageDiv()
}

},
scrollHanlder: function () {
let documentHeight = jQuery(document).height()

let windowHeight = jQuery(window).height()
let scrollBottom = jQuery(window).scrollTop() + windowHeight

if ((scrollBottom + 30) >= documentHeight) {
  this.props.fetchFunc()
}
this.handlePageValue()

},
componentWillUnmount: function () {
jQuery(window).unbind('scroll', this.scrollHanlder)
},
componentDidMount: function () {
jQuery(window).scroll(this.scrollHanlder)
},

render: function () {
let acutalPageContentDivStyle = jQuery.extend({}, this.props.innerDivStyle || this.pageContentStyle)

if (!this.state.showPageStatus) {
  acutalPageContentDivStyle.opacity = 0
}

// let actualDiv = this.state.showPageStatus ? withPageDiv : null
return (
  <div style={this.props.outterDivStyle || this.pageDivStle} >
    <div style={acutalPageContentDivStyle} >
      <span >
        {this.state.currentPage}
      </span>
      /
      <span >
        {this.props.totalPages || 1}
      </span>
    </div>
  </div>
)

}
})

// pagination ends

// THE REAL CODE
const Item = React.createClass({
itemStyle: {
overflow: 'hidden',
background: '#fff',
padding: '7px 15px 8px',
color: '#777',
lineHeight: '1.5',
fontSize: '12px',
fontFamily: 'PingFangSC-Light, Roboto, sans-serif, Helvetica',
borderBottom: '1px solid #ccc'
},
titleStyle: {
fontSize: '14px',
color: '#333'
},
indexStyle: {
color: '#5cb85c',
fontSize: '20px',
float: 'left'
},
render: function () {
return (

{this.props.index + 1}

<div style={{float: 'left', paddingLeft: '5px'}} >

{this.props.name}

{this.props.description}

)
}
})

const List = React.createClass({
isolate: {
pageNo: 0,
isRequesting: false,
totalPages: 0
},
getInitialState: function () {
return {
totalPages: 0,
list: []
}
},
generateList: function () {
let result = []
for (let i = 0; i< 15; i++) {
result.push({
name: 'Item Name',
description: 'Scroll DOWN to load next page, and UP to see current position.'
})
}
return result
},
getNextPage: function () {
let self = this
if (this.isolate.isRequesting || (this.isolate.pageNo > 0 && this.isolate.pageNo >= this.isolate.totalPages)) {

  return
}
this.isolate.pageNo ++
this.isolate.isRequesting = true

let jqXhr = $.ajax({
type: 'POST',
url: 'data.json',
//url: 'data.php',
dataType: 'json',
data: {
pageNo: this.isolate.pageNo,
json: JSON.stringify({
totalPages: 5,
list: this.generateList()
}),
delay: 0.1
}
})

jqXhr.done((result) => {
    this.isolate.isRequesting = false
    this.isolate.totalPages = result.totalPages
    let newList = this.state.list.concat(result)
    this.setState({
        totalPages: result.totalPages,
        list: newList
    })
})

jqXhr.fail((reason) => {
   this.isolate.isRequesting = false
   this.isolate.pageNo --
   console.error('Loading next page failed')
})

},
componentDidMount: function () {
this.getNextPage()
},
render: function () {
console.log(this.state.list);
let listItemDiv = this.state.list.map((obj, index) => {
return (

)
})

return (
    <div >
    {listItemDiv}
    <ReactScrollPagination
        fetchFunc={this.getNextPage}
      totalPages={this.state.totalPages}
    />
  </div>
)

}
})

const APP = React.createClass({
render: function() {
return ;
}
});

ReactDOM.render(
,
document.getElementById('container')
);

</script> ` -- | --

[codingfishman]

Hi @ewugoat7
You have the full control of the “fetchFunc”, when you know the data is the last one, you can just do no fetchings in the ‘fetchFunc”, so the list will stop growing up, and there will be no repeat data.

[deboyisgood]

how do i implement that please