am working on a pagination using Firebase and so far i have a button to go forward and other one to get back and they are working fine ,but i have problem detecting either if am in the first page or the last page so i can disable the pagination buttons,so am wondering how that work and should i change the way i paginate data?
export const getNextItems = (last_Visible) => {
return async (dispatch, getState, { getFirebase }) => {
const firestore = getFirebase().firestore();
// const items = [];
const dbRef = firestore
.collection('items')
.orderBy('createdAt', 'desc')
.startAfter(last_Visible)
.limit(2);
const usersRef = firestore.collection('users');
let temps = [];
const { data: items, firstVisible, lastVisible } = await dbRef.get().then(getAllDocs);
for (const item of items) {
const { data: user } = await usersRef.doc(item.owner).get().then(getDoc);
temps.push({ ...item, owner: user });
}
return { docs: temps, lastVisible, firstVisible };
};
};
export const getPrevItems = (first_Visible) => {
return async (dispatch, getState, { getFirebase }) => {
const firestore = getFirebase().firestore();
// const items = [];
const dbRef = firestore
.collection('items')
.orderBy('createdAt', 'desc')
.endBefore(first_Visible)
.limitToLast(2);
const usersRef = firestore.collection('users');
let temps = [];
const { data: items, lastVisible, firstVisible } = await dbRef.get().then(getAllDocs);
for (const item of items) {
const { data: user } = await usersRef.doc(item.owner).get().then(getDoc);
temps.push({ ...item, owner: user });
}
return { docs: temps, lastVisible, firstVisible };
};
};
To detect whether there are more pages to load, you'll need to request an additional item. So since you seem to show 2 items per page, you should request 3 items - and display only two of them. If you get a third item, you know there's an additional page.