-
-
Save heytulsiprasad/c56f26bbacd411ff55688ba1cb6deddf to your computer and use it in GitHub Desktop.
React Pagination with Firebase FireStore - (Prev / Next Pagination)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { useState, useEffect } from 'react'; | |
| // I'm using react-bootstrap for UI elements | |
| import { Table, Button, ButtonGroup } from 'react-bootstrap'; | |
| // Firebase config | |
| import { getFirestore, collection, query, orderBy, limit, startAfter, endBefore, onSnapshot } from 'firebase/firestore'; | |
| import { getApp } from 'firebase/app'; | |
| export default function App() { | |
| const [list, setList] = useState([]); | |
| const [page, setPage] = useState(1); | |
| const db = getFirestore(getApp()); | |
| useEffect(() => { | |
| const fetchData = async () => { | |
| const q = query(collection(db, 'users'), orderBy('created', 'desc'), limit(5)); | |
| const unsubscribe = onSnapshot(q, (querySnapshot) => { | |
| const items = []; | |
| querySnapshot.forEach((doc) => { | |
| items.push({ key: doc.id, ...doc.data() }); | |
| }); | |
| console.log('first item ', items[0]); | |
| setList(items); | |
| }); | |
| return () => unsubscribe(); | |
| }; | |
| fetchData(); | |
| }, [db]); | |
| const showNext = async ({ item }) => { | |
| if (list.length === 0) { | |
| alert("That's all we have for now!"); | |
| } else { | |
| const fetchNextData = async () => { | |
| const q = query( | |
| collection(db, 'users'), | |
| orderBy('created', 'desc'), | |
| startAfter(item.created), | |
| limit(5) | |
| ); | |
| const unsubscribe = onSnapshot(q, (querySnapshot) => { | |
| const items = []; | |
| querySnapshot.forEach((doc) => { | |
| items.push({ key: doc.id, ...doc.data() }); | |
| }); | |
| setList(items); | |
| setPage(page + 1); | |
| }); | |
| return () => unsubscribe(); | |
| }; | |
| fetchNextData(); | |
| } | |
| }; | |
| const showPrevious = async ({ item }) => { | |
| const fetchPreviousData = async () => { | |
| const q = query( | |
| collection(db, 'users'), | |
| orderBy('created', 'desc'), | |
| endBefore(item.created), | |
| limit(5) | |
| ); | |
| const unsubscribe = onSnapshot(q, (querySnapshot) => { | |
| const items = []; | |
| querySnapshot.forEach((doc) => { | |
| items.push({ key: doc.id, ...doc.data() }); | |
| }); | |
| setList(items); | |
| setPage(page - 1); | |
| }); | |
| return () => unsubscribe(); | |
| }; | |
| fetchPreviousData(); | |
| }; | |
| return ( | |
| <> | |
| <Table> | |
| <tbody> | |
| {list.map((doc) => ( | |
| <tr key={doc.key}> | |
| <td>{doc.name}</td> | |
| <td>{doc.age}</td> | |
| <td>{doc.note}</td> | |
| </tr> | |
| ))} | |
| </tbody> | |
| </Table> | |
| <ButtonGroup> | |
| {page === 1 ? '' : <Button onClick={() => showPrevious({ item: list[0] })}>Previous</Button>} | |
| {list.length < 5 ? '' : <Button onClick={() => showNext({ item: list[list.length - 1] })}>Next</Button>} | |
| </ButtonGroup> | |
| </> | |
| ); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment