my NextJs site keeps throwing error due to firebase infinate scroll. .length being undefinded for some unknown reaseon. please help debug the code if possible. Its been a mess trying to get this dmn stuff to work in nextjs.
useEffect(() => {
// This useEffect is used to get the todos for the user
try {
if (!firestore) return;
// Only execute the query if we have an user
const querySubmissions = query(
collection(firestore, "roadmap"),
where("csite", "==", router.query.csite),
where("uid", "==", router.query.uid),
orderBy("createdAt", "desc"),
limit(10)
);
if (!querySubmissions) return;
const unsubscribe = onSnapshot(querySubmissions, (querySnapshot) => {
setSubmissions(querySnapshot.docs);
});
return () => unsubscribe();
} catch (error) {
console.log(error);
}
}, [router]);
// -------------------- unessesary code removed between -------------------------------------
useEffect(() => {
window.onscroll = () => {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
console.log('bottom');
setIsLoadingData(true);
const lastDocument = submissions.data().length - 1;
const documents = query(
collection(firestore, "roadmap"),
where("csite", "==", router.query.csite),
where("uid", "==", router.query.uid),
orderBy("createdAt", "desc"),
limit(10),
startAfter(lastDocument)
);
const unsubscribe = onSnapshot(documents, (querySnapshot) => {
setSubmissions(submissions => submissions.concat(querySnapshot.docs));
setIsLoadingData(false);
});
return () => unsubscribe();
}
};
}, [router]);
Please help.
I was expecting infinate scroll when creating this code in VSCode.