I've hit a roadblock here. Despite following the exact steps outlined in various posts and tutorials, I'm still stuck. I know the importance of using a cursor to set the first and last visible document for moving forward or backwards. When moving forward, you start after the last document, but when moving backward, you start before the first.
Everything seems to be working fine when going forward. However, whenever I try to use the previousPage function, it always takes me back to the first page, even though I've correctly set the 'first visible' document. This happens even after moving three pages forward.
There's definitely something missing in my understanding here...
const PAGE_SIZE = 6;
const [posts, setPosts] = useState([]);
const [lastVisible, setLastVisible] = useState(null);
const [firstVisible, setFirstVisible] = useState(null);
const [loading, setLoading] = useState(false);
// Initial read to get first set of posts.
useEffect(() => {
const q = query(
collectionGroup(db, "bulletins"),
orderBy("createdAt", "desc"),
limit(PAGE_SIZE)
);
const unsubscribe = onSnapshot(q, (documents) => {
const tempPosts = [];
documents.forEach((document) => {
tempPosts.push({
id: document.id,
...document.data(),
});
});
setPosts(tempPosts);
setLastVisible(documents.docs[documents.docs.length - 1]);
setFirstVisible(documents.docs[0]);
});
return () => unsubscribe();
}, []);
const nextPage = async () => {
const postsRef = collectionGroup(db, "bulletins");
const q = query(
postsRef,
orderBy("createdAt", "desc"),
startAfter(lastVisible),
limit(PAGE_SIZE)
);
const documents = await getDocs(q);
updateState(documents);
};
const previousPage = async () => {
const postsRef = collectionGroup(db, "bulletins");
const q = query(
postsRef,
orderBy("createdAt", "desc"),
endBefore(firstVisible),
limit(PAGE_SIZE)
);
const documents = await getDocs(q);
updateState(documents);
};
const updateState = (documents) => {
if (!documents.empty) {
const tempPosts = [];
documents.forEach((document) => {
tempPosts.push({
id: document.id,
...document.data(),
});
});
setPosts(tempPosts);
}
if (documents?.docs[0]) {
setFirstVisible(documents.docs[0]);
}
if (documents?.docs[documents.docs.length - 1]) {
setLastVisible(documents.docs[documents.docs.length - 1]);
}
};