Feat : scroll load more sgd

src/_screens/home/education-department/educationDepartmentHome.style.scss

@@ -48,6 +48,7 @@
       display: flex;
       flex-direction: column;
       padding: 0 3.2rem;
+      max-height: 740px;
 
       .education-department-home-list-room {
         flex: 1;

src/_screens/home/education-department/index.js

@@ -26,6 +26,11 @@ export default function EducationDepartmentHome() {
   const [dataTeacherChart, setDataTeacherChart] = useState([])
   const [listOrganization, setListOrganization] = useState([])
   const [searchText, setSearchText] = useState('')
+  const [isLoadMoreOnline, setLoadMoreOnline] = useState(true);
+  const [limitOnline] = useState(10);
+  const [offsetOnline, setOffsetOnline] = useState(0);
+  const [isEndOnlineClasses, setIsEndOnlineClasses] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   const getDataOrganization = async () => {
     try {
@@ -115,6 +120,51 @@ export default function EducationDepartmentHome() {
 
   }
 
+   const handleScroll = (e) => {
+      if (
+        e.target.scrollHeight - e.target.scrollTop < e.target.clientHeight + 5 &&
+        isLoadMoreOnline &&
+        !isLoading
+      ) {
+        if(listOrganization.length < limitOnline) return
+        onLoadMoreClasses();        
+      }
+    };
+  
+    // Load More
+    const onLoadMoreClasses = async () => {
+      let offsetOnlineMore = offsetOnline + limitOnline;
+      let listNext = [];
+      setIsLoading(true);
+      try {
+        if (!isEndOnlineClasses) {
+          const endPoint = `/report/api_report/listChildOrganization?organization_id=${authentication?.user?.organization_id}?limit=${limitOnline}&offset=${offsetOnlineMore}`;
+          const res = await apiCaller(endPoint, "GET");
+  
+          if (!res.data){
+            setIsEndOnlineClasses(true);
+          } else {
+            listNext = res?.data;
+            setOffsetOnline(offsetOnline + limitOnline);
+            if (res?.data?.length < limitOnline) {
+              setLoadMoreOnline(false);
+              if (res?.data?.length == 0) setLoadMoreOnline(false);
+              setIsEndOnlineClasses(true);
+            }
+          }
+        } else {
+          setIsEndOnlineClasses(true);
+        }
+  
+        let listPrev = listOrganization;
+        setListOrganization(listPrev?.concat(listNext));
+      } catch (e) {
+      } finally {
+        setIsLoading(false);
+      }
+    };
+  
+
   return (
     <div className="flex-1">
       <Header
@@ -186,9 +236,9 @@ export default function EducationDepartmentHome() {
                   }
                 }}
               /> */}
-            <div className="education-department-home-list-content scrollbar-custom">
+            <div onScroll={handleScroll} className="education-department-home-list-content scrollbar-custom">
               <div className="education-department-home-list-room">
-                {listOrganization > 0 ? listOrganization.map((item, index) => (
+                {listOrganization.length > 0 ? listOrganization.map((item, index) => (
                     <div
                       key={index}
                       className="education-department-home-item-room"