update

src/hooks/useFirestorePagination.js

@@ -0,0 +1,73 @@
+import { useState, useEffect } from "react";
+
+export const useFirestorePagination = ({
+  ref = null,
+  refreshArray = [],
+  condition = false,
+  documentID = "id",
+  batchSize = 10,
+  maxLoads = 15, // Maximum number of times loadMore can be called
+}) => {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [lastVisible, setLastVisible] = useState(null);
+  const [error, setError] = useState(null);
+  const [loadMoreCount, setLoadMoreCount] = useState(0); // Counter for loadMore invocations
+
+  useEffect(() => {
+    let unsubscribe = () => {};
+
+    if (condition && ref) {
+      setLoading(true);
+      unsubscribe = ref.limit(batchSize).onSnapshot(
+        (snapshot) => {
+          const fetchedDocuments = snapshot.docs.map((doc) => ({
+            [documentID]: doc.id,
+            ...doc.data(),
+          }));
+          const lastVisibleDocument = snapshot.docs[snapshot.docs.length - 1];
+          setData(fetchedDocuments);
+          setLastVisible(lastVisibleDocument);
+          setLoading(false);
+        },
+        (err) => {
+          setError(err);
+          setLoading(false);
+        }
+      );
+    }
+
+    return () => unsubscribe();
+  }, [...refreshArray, condition, ref, batchSize]);
+
+  const loadMore = () => {
+    if (lastVisible && !loading && loadMoreCount < maxLoads) {
+      setLoading(true);
+      setLoadMoreCount((count) => count + 1); // Increment loadMore counter
+
+      ref
+        .startAfter(lastVisible)
+        .limit(batchSize)
+        .onSnapshot(
+          (snapshot) => {
+            const newDocuments = snapshot.docs.map((doc) => ({
+              [documentID]: doc.id,
+              ...doc.data(),
+            }));
+            setData((prev) => [...prev, ...newDocuments]);
+            setLastVisible(snapshot.docs[snapshot.docs.length - 1]);
+            setLoading(false);
+          },
+          (err) => {
+            setError(err);
+            setLoading(false);
+          }
+        );
+    }
+  };
+
+  // Function to check if more data can be loaded
+  const canLoadMore = loadMoreCount < maxLoads;
+
+  return { data, loading, error, loadMore, canLoadMore };
+};