infinite.js

loadItems = (pagingState) => { 
          if(!pagingState){
			console.log("loadItems pagingState false")
		  axios.get('/api/v1/news?pagingState', { // request for the 1st news
			headers: {
			  Authorization: 'Bearer '+localStorage.getItem('token')
			}
		  }).then((response) => {
			if(response.data.rows.length !== 0){
				var encodeURLPagingState = encodeURIComponent(response.data.pagingState)
			  this.setState({
				pagingState: encodeURLPagingState, // lastId = pagingState,
				allNews: [...response.data.rows],
				isLoggedIn: Boolean(localStorage.getItem('token'))
			  });
			} 
		  }).catch(err => {
			console.log("err = ",err)
		  });
		}
		if(pagingState) {	
			console.log("loadItems pagingState true")
			let query = `/api/v1/news?pagingState=${pagingState}`;
			axios.get(query, { 
				headers: {
					Authorization: 'Bearer '+localStorage.getItem('token')
				},
			}).then(async (response) => {
				if(!response.data.rows) {
					this.setState((state, props) => ({
						hasMoreItems: false
					}));
				}
			var encodeURLPagingState = encodeURIComponent(response.data.pagingState)
			var allNews =  [...this.state.allNews, ...response.data.rows]
				this.setState({
					pagingState: encodeURLPagingState,
					offset: this.state.offset+15,
					allNews  // add the next following news on state
				});
		}).catch((err) => {
			console.log(`1st axios catch! = `,err)
		});				
	  }
    }
render() { 
  var items = [];
						this.state.allNews.map((news, index) => {
							var time = news.createdAt;
							var newsTime = timeDifference(time); 
								return items.push(
									<News 
										activeNews={this.state.activeNews}
										onNewsClick={this.onNewsClick} 
										content={news.content}
										news={news}
										onSourceClick={this._handleSourceClick} 
										key={index} 
										id={news.id} 
										vote={news.stats}
										source={news.link.substring(news.link.indexOf('//')+2, news.link.indexOf('com')+3)} // extract site from the text
										title={news.title} 
										time={newsTime} // calculates time news is published from time of user
										onTagClick={this._handleTagClick}
										tags={news.tags}
									/>
								);
						});
return (<ul><InfiniteScroll
		                pageStart={0}
		                loadMore={this.loadItems(this.state.pagingState)}
		                hasMore={this.state.hasMoreItems}
		                loader={loader}
		                useWindow={false}
		            >
						{items}
					</InfiniteScroll>
 </ul>