constructor(){
super()
this.handleScroll=this.handleScroll.bind(this)
}
componentDidMount() {
this.props.fetchData(url);
document.documentElement.addEventListener('scroll', this.handleScroll);
}
import React, { Component } from 'react';
import { connect } from 'react-redux';
// Components //
import ReactPaginate from 'react-paginate';
// Actions //
import { searchPosts } from '../../actions/posts';
import { setSelectedPage } from '../../actions/pages';
let page;
class App extends Component {
state = {
filterData: {
title: '',
author: null,
before: null,
after: null,
},
}
setSelectedPage = (selectedPage) => {
page=selectedPage + 1
this.props.setSelectedPage(selectedPage + 1);
}
searchPosts = () => {
//const { selectedPage } = this.props.pages;
const selectedPage = page;
const { filterData } = this.state;
const { before, after, title, author } = filterData;
const beforeISO = before && before.isValid() ? before.toISOString() : null;
const afterISO = after && after.isValid() ? after.toISOString() : null;
this.props.searchPosts({
title,
author,
before: beforeISO,
after: afterISO,
page: selectedPage,
});
}
render() {
return (
<section>
<ReactPaginate
onPageChange={({ selected }) => {
this.setSelectedPage(selected);
this.searchPosts();
}}
/>
</section>
);
}
};
const mapStateToProps = state => ({
posts: state.posts,
pages: state.pages,
});
export default connect(mapStateToProps, { searchPosts, setSelectedPage })(App);