I’m working on a project using React-Native and the react-native-firebase librairy.
Within this project i’m trying to implement simple pagination with next and previous buttons.
I’m using startAfter() / limit() for the next one and endBefore() / limitTolast() for the previous one.
Here is my code
useEffect(() => {
setCurrentPage(1)
setViews([])
setLoading(true)
firestore()
.collection('feed')
.orderBy("creation", "desc")
.limit(limit)
.get()
.then((snapshot) => {
const data = snapshot.docs.map(doc => doc.data())
const lastVisibleDoc = snapshot.docs[snapshot.docs.length - 1]
const firstVisibleDoc = snapshot.docs[0]
setViews(data)
setLastVisible(lastVisibleDoc)
setFirstVisible(firstVisibleDoc)
setLoading(false)
})
}, [currentUserPreference])
This one part will get the first shot of data and works just fine.
const nextPage = () => {
setCurrentPage(currentPage + 1)
setLoading(true)
scrollRef?.current?.scrollTo({y: 0, animated: true})
firestore()
.collection('feed')
.orderBy("creation", "desc")
.startAfter(lastVisible)
.limit(limit)
.get()
.then((snapshot) => {
const data = snapshot.docs.map((doc) => doc.data())
const lastVisibleDoc = snapshot.docs[snapshot.docs.length - 1]
const firstVisibleDoc = snapshot.docs[0]
setViews(data)
setLastVisible(lastVisibleDoc)
setFirstVisible(firstVisibleDoc)
console.log('fv', firstVisibleDoc)
})
console.log("more")
setLoading(false)
This one is to get the next docs works as it should as well.
const lastPage = () => {
setCurrentPage(currentPage - 1)
setLoading(true)
scrollRef?.current?.scrollTo({y: 0, animated: true})
firestore()
.collection('feed')
.orderBy("creation", "desc")
.endBefore(firstVisible)
.limitToLast(limit)
.get()
.then((snapshot) => {
const data = snapshot.docs.map((doc) => doc.data())
const lastVisibleDoc = snapshot.docs[snapshot.docs.length - 1]
const firstVisibleDoc = snapshot.docs[0]
console.log('ld', data)
console.log('lvlp', lastVisibleDoc)
console.log('lvlp', firstVisibleDoc)
setViews(data)
setLastVisible(lastVisibleDoc)
setFirstVisible(firstVisibleDoc)
})
console.log("less")
setLoading(false)
This is where the issue is located. My request seems to be off at some point because it doesn’t return me anything it doesn’t reach ‘then’ either as my state values doesn’t get updated and i don’t get the logs i placed in there.
It doesn’t give me any warnings or errors. As i keep track of the current page within a state it gets updated but that’s the only thing. Other than that nothing, it stays on the same page with the previous data displayed.
I don’t know where is the mistake, if you have any idea, i will take it.
Thanks for your help !