Как разбить данные в облачном хранилище с помощью ReactJs

Question

Я работаю с Firebase - Cloud Firestore и в настоящее время я хотел бы разбить на страницы все доступные записи. У меня уже есть список записей, и для этого осталось несколько страниц. Я новичок в Cloud Firestore, поэтому любая ясность приветствуется.

Я проверил документацию Firestore (https://firebase.google.com/docs/firestore/query-data/query-cursors#paginate_a_query) и примеры с ReactJS, но не так много доступно.

Я понимаю, что, например: .startAt(0), .limit(10), но вопрос в том, как правильно разбить на страницы с помощью этого компонента, вызываемого в методе рендеринга.

import React, { Component } from 'react';
import Pagination from "react-js-pagination";
import firestore from "./Firebase";

export default class DataList extends Component {

constructor(props) {
    super(props);
    this.state = {
        dbItems: [],
        currentPage: 1,
        itemsPerPage: 3,
        totalItemCount: 1,
        activePage: 15
    }
    this.handlePageChange = this.handlePageChange.bind(this);
}

handlePageChange(pageNumber) {
    console.log(`active page is ${pageNumber}`);
    this.setState({ activePage: pageNumber });
}

async getItems() {
    const { currentPage, itemsPerPage } = this.state;
    const startAt = currentPage * itemsPerPage - itemsPerPage;
    const usersQuery = firestore.collection('Users').orderBy("email").startAt(startAt).limit(itemsPerPage)
    const snapshot = await usersQuery.get()
    const items = snapshot.docs.map(doc => doc.data())
    return this.setState({ 
        dbItems: items,
        totalItemCount: firestore.collection('Users').get().then(res => console.log(res.size))
    })

}

componentDidMount() {
    this.getItems()
}

componentDidUpdate(prevProps, prevState) {
    const isDifferentPage = this.state.currentPage !== prevState.currentPage
    if (isDifferentPage) this.getItems()
}

render() {
    return (
        <div>
            {this.state.dbItems.map((users, index) => {
                return (
                    <p key={index}>
                        <b>First Name:</b> {users.firstname} <br />
                        <b>Email:</b> {users.email}
                    </p>
                )
            })
            }
            <Pagination
                activePage={this.state.activePage}
                itemsCountPerPage={this.state.itemsPerPage}
                totalItemsCount={this.state.totalItemCount}
                pageRangeDisplayed={this.state.itemsPerPage}
                onChange={this.handlePageChange}
            />
        </div>
    )
}
}

Спасибо за помощь!

Answer 1

Пагинация может быть достигнута с помощью startAt()

// Get Items.
async getItems() {
  const {currentPage, itemsPerPage} = this.state
  const startAt = currentPage * itemsPerPage - itemsPerPage
  const query = firestore.collection('Users').startAt(startAt).limit(itemsPerPage)
  const snapshot = await query.get()
  const items = snapshot.docs.map(doc => doc.data())
  return this.setState({dbItems: items})
}

// Did Mount.
componentDidMount() {
  this.getItems()
}

// Did Update.
componentDidUpdate(prevProps, prevState) {
  const isDifferentPage = this.state.currentPage !== prevState.currentPage
  if (isDifferentPage) this.getItems()
}

Answer 2

Используйте startAt () или startAfter () для этого

firestore
 .collection("Users")
 .startAt(0)
 .limit(10)
 .get()