Issues when displaying records from database using React Redux - reactjs

Question

For about 7 hours now, Am working with infinite Scrolling using react redux.
This code works very well by displaying 20 database records as user scroll-down the page. But am currently face with two issues.
1.) I cannot get the application to display a message "No more records" once record gets finished displaying from database.
I have tried
get finished() {
console.log(this.props.users_scroll.length);
if (this.row >= this.props.users_scroll.length ) {
return (<li key={'done'}>No More Message to Load.</li>);
}
return null;
}
but console give values undefined for this line of code
console.log(this.props.users_scroll.length);
I have also tried
get finished() {
console.log(this.loadMore.length);
if (this.row >= this.loadMore.length ) {
return (<li key={'done'}>No More Message to Load.</li>);
}
return null;
}
but console give values 0 for this line of code console.log(this.loadMore.length); as a result the application will immediately
shows No more records whereas they are still about 15 records in the database.
2.) When all the 20 records from database gets display, there is still continuous Call from server/database as long as the user
keeps on scrolling down the Page. I have tried this but it does not stop the unecessary Server/database Calls. it seems that this.users_scroll
is either empty or undefined
if(this.users_scroll !='' ){
loadMore();
}
Here is the code
import React, { Component, Fragment } from "react";
import { render } from "react-dom";
import request from "superagent";
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { userActions } from '../_actions';
class InfinitescrollPage extends React.Component {
constructor(props) {
super(props);
// Sets up our initial state
this.state = {
users_scroll: [],
};
//set parameters
this.row = 0;
this.rowperpage = 5;
this.cText = "";
this.loadMore = this.loadMore.bind(this);
// Binds our scroll event handler
window.onscroll = () => {
const {
loadMore,
state: {
},
} = this;
// Checks that the page has scrolled to the bottom
if (
window.innerHeight + document.documentElement.scrollTop
=== document.documentElement.offsetHeight
) {
//if(this.users_scroll !='' ){
loadMore();
//}
}
};
}
componentWillMount() {
// Loads some users on initial load
this.props.dispatch(userActions.getAll_Infinitescroll(this.row));
}
loadMore() {
this.cText = "content is Loading ...";
this.row+=this.rowperpage;
setTimeout(()=>{
this.len =this.props.dispatch(userActions.getAll_Infinitescroll(this.row));
this.cText = "";
},100);
}
get finished() {
//alert('database rows lengths ' +this.props.users_scroll.length);
//if (this.row >= this.loadMore.length ) {
if (this.row >= this.props.users_scroll.length ) {
return (<li key={'done'}>No More Message to Load.</li>);
}
return null;
}
render() {
//const {} = this.state;
const {user_scroll, users_scroll } = this.props;
return (
<div>
<h1>Infinite Users!</h1>
<p>Scroll down to load more!!</p>
{users_scroll.items2 && users_scroll.items2.map(user_scroll => (
<Fragment key={user_scroll.username}>
<hr />
<div style={{ display: 'flex' }}>
<img
alt={user_scroll.username}
src='http://localhost/apidb_react/2.png'
style={{
borderRadius: '50%',
height: 72,
marginRight: 20,
width: 72,
}}
/>
<div>
<h2 style={{ marginTop: 0 }}>
#{user_scroll.uuid}
</h2>
<p>Name: {user_scroll.name}</p>
<p>Email: {user_scroll.email}</p>
<p>Counting: {user_scroll.rcount}</p>
</div>
</div>
</Fragment>
))}
{this.finished}
{this.cText}
<input type="text" className="form-control" name="this.row" id="this.row" value={this.row} onChange={this.handleChange} />
<hr />
</div>
);
}
}
const container = document.createElement("div");
document.body.appendChild(container);
render(<InfinitescrollPage />, container);
users.service
function getAll_Infinitescroll(us) {
const request = {
method: 'POST',
body: JSON.stringify({us});
};
return fetch(`/users.php`, request).then(handleResponse)
.then(users_scroll => {
if (users_scroll) {
console.log(users_scroll);
}
return users_scroll;
});
}

Answer 1

This has been resolved. I need to get the row counts from the database and the compare it with the passing row data.
1.) To display No more message it becomes
this.count='20';
or
this.count=this.props.dispatch(userActions.getRowCount());
get finished() {
if (this.row >= this.count ) {
return (<li key={'done'}>No More Message to Load.</li>);
}
return null;
}
2.) To prevent unnecessary scrolling when there is no more data to display
loadMore() {
if (this.row != this.count ) {
this.cText = "content is Loading ...";
this.row+=this.rowperpage;
setTimeout(()=>{
this.len =this.props.dispatch(userActions.getAll_Infinitescroll(this.row));
this.cText = "";
},100);
}
}