Paginação no React
A lógica de implementação da paginação é baseada em controlar a exibição do conteúdo (no caso posts) por página, permitindo que o usuário carregue mais conteúdo à medida que avança nas páginas.
Inicialização do estado
O estado inicial inclui um array posts para armazenar os posts exibidos na página, um array allPosts para armazenar todos os posts carregados, page para controlar a página atual e postsPerPage para determinar quantos posts são exibidos por vez.
state = {
posts: [],
allPosts: [],
page: 0,
postsPerPage: 10
};Carregamento inicial de Posts
No método componentDidMount(), os primeiros posts são carregados utilizando a função loadPosts(), e os resultados são armazenados no estado allPosts. Inicialmente, os posts exibidos na página (posts) são definidos com base na página atual (page) e no número de posts por página (postsPerPage).
async componentDidMount() {
await this.loadPosts();
}
loadPosts = async () => {
const { page, postsPerPage } = this.state;
const postsAndPhotos = await loadPosts();
this.setState({
posts: postsAndPhotos.slice(page, postsPerPage),
allPosts: postsAndPhotos,
});
}Nota
Os posts foram obtidos por meio da API do do site JSON Placeholder.
Carregamento adicional de Posts
O método loadMorePosts é chamado quando o botão “Load more posts” é clicado. Ele calcula a próxima página a ser carregada e extrai os próximos posts do array allPosts. Esses posts são então adicionados ao array posts no estado.
loadMorePosts = () => {
const {
page,
postsPerPage,
allPosts,
posts
} = this.state;
const nextPage = page + postsPerPage;
const nextPosts = allPosts.slice(nextPage, nextPage + postsPerPage);
posts.push(...nextPosts);
this.setState({ posts, page: nextPage });
}Renderização da Interface
A interface renderiza os posts atuais utilizando o componente Posts. Além disso, um botão “Load more posts” é renderizado com base na disponibilidade de mais posts para carregar (disabled={noMorePosts}). O botão só será desabilitado quando não houver mais posts para serem exibidos.
render() {
const { posts, page, postsPerPage, allPosts } = this.state;
const noMorePosts = page + postsPerPage >= allPosts.length;
return (
<section className="container">
<Posts posts={posts} />
<div class="button-container">
<Button
text="Load more posts"
onClick={this.loadMorePosts}
disabled={noMorePosts}
/>
</div>
</section>
);
}Essa abordagem proporciona uma experiência de paginação ao usuário, carregando mais posts conforme necessário e desabilitando o botão quando não há mais posts a serem exibidos. A lógica é estruturada de maneira a garantir uma experiência fluida e eficiente ao lidar com grandes conjuntos de dados.