I am adding pagination to my React Firebase project but I still see the buttons when I reach the end-CodePudding

So this is my pagination/on page load code and the JSX code for the page that displays everything. The buttons actually work and do what they are supposed to do but it's when I reach the last set of data the app starts to break and do some funky stuff so any help on how to fix this would be appreciated.

I have attached a GIF if it helps visualize what I am dealing with:

  const collectionRef = collection(db, 'notes');
  const [notes, setNotes] = useState([]);
  const [lastDocs, setLastDocs] = useState();
  const [firstDocs, setFirstDocs] = useState();
  const [isEmpty, setIsEmpty] = useState(false);
//Get data from Firestore on initial load
useEffect(() => {
    if (user) {
      try {
        const q = query(collectionRef, where('user', '==', user?.uid), orderBy('time', 'desc'), limit(2));

        const unsubscribe = onSnapshot(q, (snapshot) => {
          const docs = snapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id }));
          setNotes(docs);
          setLastDocs(snapshot.docs[snapshot.docs.length - 1]);
          setFirstDocs(snapshot.docs[0]);
        });
        return unsubscribe;
      } catch (error) {
        console.log(error);
      }
    } else {
      return;
    }
  }, [user]);

//Get more data 
  const fetchMore = () => {
    const q = query(collectionRef, where('user', '==', user.uid), orderBy('time', 'desc'), startAfter(lastDocs), limit(2));

    const unsubscribe = onSnapshot(q, (snapshot) => {
      const isSnapshotEmpty = snapshot.size === 0;
      if (!isSnapshotEmpty) {
        const docs = snapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id }));
        setLastDocs(snapshot.docs[snapshot.docs.length - 1]);
        setFirstDocs(snapshot.docs[0]);
        setNotes(docs);
      } else {
        setIsEmpty(true);
      }
    });

    return unsubscribe;
  };

//Go back a page
  const goBack = () => {
    const q = query(collectionRef, where('user', '==', user.uid), orderBy('time', 'desc'), endAt(firstDocs), limit(2));

    const unsubscribe = onSnapshot(q, (snapshot) => {
      const isSnapshotEmpty = snapshot.size === 0;
      if (!isSnapshotEmpty) {
        const docs = snapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id }));
        const lastItem = snapshot.docs[snapshot.docs.length - 1];
        const firstItem = snapshot.docs[0];
        setLastDocs(lastItem);
        setFirstDocs(firstItem);
        setNotes(docs);
      } else {
        setIsEmpty(true);
      }

      console.log(snapshot.size);
    });

    return unsubscribe;
  };

Here's my code for displaying the data/buttons.


<React.Suspense fallback={<Spinner />}>
            <DisplayNotes />
          </React.Suspense>

          <>
            {!isEmpty ? (
              <>
                <button onClick={goBack}>Fetch Less</button>
                <button onClick={fetchMore}>Fetch More</button>
              </>
            ) : (
              <></>
            )}
          </>

CodePudding user response：

size - 1 equals 0 the next page is empty, you are checking the current page

Imagine you have 5 pages and you are at page 4, you will have 1 as size and the code won't set it as empty. You can see that by logging into the console.

You need to check the next page by subtracting one instead of the current page.