progress 1 dashboard-create-claim-request

frontend/dashboard/src/hooks/useLoadOnScroll.ts

@@ -0,0 +1,98 @@
+import { RefObject, useEffect, useRef, useState } from 'react';
+
+interface FetchFunction<T> {
+  (page: number): Promise<T[]>;
+}
+
+const useLoadOnScroll = <T>(executeFetch: FetchFunction<T>) => {
+  const [data, setData] = useState<T[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [page, setPage] = useState<number>(1);
+  const [listener, setListener] = useState<number>(1);
+  const [lastPage, setLastPage] = useState<boolean>(false);
+
+  const fetchData = async (isSearch?: boolean) => {
+    if (!lastPage || isSearch === true)
+      if (isLoading === false) {
+        setIsLoading(true);
+        if (isSearch === true) {
+          const newData = await executeFetch(1);
+          if (newData.length > 0) {
+            setData(newData);
+            setPage((prevPage) => 2);
+          } else {
+            setLastPage(true);
+            setData([]);
+          }
+        } else {
+          const newData = await executeFetch(page);
+          if (newData.length > 0) {
+            setData((prevData) => [...prevData, ...newData]);
+            setPage((prevPage) => prevPage + 1);
+          } else {
+            setLastPage(true);
+          }
+        }
+
+        setIsLoading(false);
+      }
+  };
+
+  const refetchData = () => {
+    setPage(1);
+    setListener((prev) => prev + 1);
+  };
+
+  const resetLastPage = () => {
+    setLastPage(false);
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, [listener]);
+
+  // useEffect(() => {
+  //   if (data.length === 0) {
+  //     fetchData();
+  //   }
+  // }, [data]);
+
+  const handleScroll = () => {
+    const { scrollTop, clientHeight, scrollHeight } = document.documentElement;
+
+    if (scrollTop + clientHeight >= scrollHeight - 1) {
+      setListener((prevListener) => prevListener + 1);
+    }
+  };
+
+  const resetSearch = () => {
+    console.log('reset search');
+    fetchData(true);
+    resetLastPage();
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  const onClose = () => {
+    setData([]);
+    setPage(1);
+    setLastPage(false);
+  };
+
+  const onOpen = () => {
+    setData([]);
+    setLastPage(false);
+    fetchData(true);
+  };
+
+  // setData and setPage to reset when the dialog closed
+  return { data, isLoading, setPage, setData, resetSearch, resetLastPage, onClose, onOpen, refetchData };
+};
+
+export default useLoadOnScroll;