Search code examples
javascriptfirebasegoogle-cloud-firestorereact-redux-firebase

how to detect that am in the first or the last page when paginating in firebase


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 };
  };
};


Solution

  • 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.