Feat : thêm limit admin, criteria

src/_screens/criteria/criteria-manage/index.js

@@ -36,6 +36,10 @@ export default function CriteriaManage() {
   const [isLoading, setIsLoading] = useState(false);
   const [isFiltered, setIsFiltered] = useState(false);
   const [endPointSave, setendPointSave] = useState(null)
+  const [isLoadMoreOnline, setLoadMoreOnline] = useState(true);
+  const [limitOnline] = useState(10);
+  const [offsetOnline, setOffsetOnline] = useState(0);
+  const [isEndOnlineClasses, setIsEndOnlineClasses] = useState(false);
   const dispatch = useDispatch();
   const changeProvince = (item) => {
     setProvinceSelect(item);
@@ -283,6 +287,67 @@ export default function CriteriaManage() {
     sessionStorage.setItem('criteriaManageState', JSON.stringify(currentState));
   };
 
+  const handleScroll = (e) => {
+    if (
+      e.target.scrollHeight - e.target.scrollTop < e.target.clientHeight + 5 &&
+      isLoadMoreOnline &&
+      !isLoading
+    ) {
+      onLoadMoreClasses();
+    }
+  };
+
+  // Load More Classes for Teacher
+  const onLoadMoreClasses = async () => {
+    let offsetOnlineMore = offsetOnline + limitOnline;
+    let listNext = [];
+    setIsLoading(true);
+    try {
+      if (!isEndOnlineClasses) {
+        const queryParams = [];
+
+        const addParam = (key, value) => {
+          if (value !== undefined && value !== null && value !== '') {
+            queryParams.push(`${key}=${value}`);
+          }
+        };
+        
+        addParam('province_id', provinceSelect?.value);
+        addParam('district_id', districtSelect?.value);
+        if (statusCriteriaSelected?.value !== undefined && statusCriteriaSelected?.value !== null) {
+          const statusValue = statusCriteriaSelected.value === '0'
+            ? JSON.stringify(statusCriteriaSelected.value)
+            : statusCriteriaSelected.value;
+          addParam('status', statusValue);
+        }
+        addParam('school_name', searchText);
+  
+        const endPoint = `/report/api_report/getOrganizationAndCriteria${
+          queryParams.length ? `?${queryParams.join("&")}` : ""
+        }&limit=${limitOnline}&offset=${offsetOnlineMore}`;
+        const res = await apiCaller(endPoint, "GET");
+
+        if (res?.status) {
+          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 = listData;
+      setListData(listPrev?.concat(listNext));
+    } catch (e) {
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
     <div className="flex-1">
       <Header
@@ -362,7 +427,7 @@ export default function CriteriaManage() {
                       onClick={handleSelectAll}
                       placement="right"
                     />
-                    <div className="criteria-manage-list scrollbar-custom">
+                    <div onScroll={handleScroll} className="criteria-manage-list scrollbar-custom">
                       {listData?.map((item, index) => {
                         return (
                           <div className="criteria-manage-item">

src/_screens/home/admin/index.js

@@ -38,7 +38,10 @@ export default function AdminHome() {
   const [listSchool, setListSchool] = useState([]);
   const [isSearched, setIsSearched] = useState(false);
   const [endPointSave, setendPointSave] = useState(null)
-  
+  const [isLoadMoreOnline, setLoadMoreOnline] = useState(true);
+  const [limitOnline] = useState(10);
+  const [offsetOnline, setOffsetOnline] = useState(0);
+  const [isEndOnlineClasses, setIsEndOnlineClasses] = useState(false);
   const dispatch = useDispatch();
 
   const isFilterSchool = typeFilter === LIST_TYPE_FILTER_ADMIN_HOME[0]?.value;
@@ -63,12 +66,6 @@ export default function AdminHome() {
         queryParams.length ? `?${queryParams.join("&")}` : ""
       }`;
       setendPointSave(endPoint)
-      dispatch({
-        type: TYPE_DISPATCH.SET_END_POINT,
-        payload: {
-          endPoint:endPoint
-        },
-      })
       const res = await apiCaller(endPoint, "GET");
       setIsLoading(false);
       if (res?.status) {
@@ -244,6 +241,60 @@ export default function AdminHome() {
     sessionStorage.setItem('adminState', JSON.stringify(currentState));
   };
 
+  const handleScroll = (e) => {
+    if (
+      e.target.scrollHeight - e.target.scrollTop < e.target.clientHeight + 5 &&
+      isLoadMoreOnline &&
+      !isLoading
+    ) {
+      onLoadMoreClasses();
+    }
+  };
+
+  // Load More Classes for Teacher
+  const onLoadMoreClasses = async () => {
+    let offsetOnlineMore = offsetOnline + limitOnline;
+    let concatListSide = [];
+    setIsLoading(true);
+    try {
+      if (!isEndOnlineClasses) {
+        let queryParams = []
+
+        if(provinceSelect?.value){
+          queryParams.push(`province_id=${provinceSelect?.value}`)
+        }
+        if(districtSelect?.value){
+          queryParams.push(`district_id=${districtSelect?.value}`)
+        }
+        if(!!searchTextSchool){
+          queryParams.push(`name_school_find=${searchTextSchool}`)
+        }
+        const endPoint = `/api_organization/get_organization${
+          queryParams.length ? `?${queryParams.join("&")}` : ""
+        }&limit=${limitOnline}&offset=${offsetOnlineMore}`;
+        const res = await apiCaller(endPoint, "GET");
+
+        if (res?.status) {
+          concatListSide = 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 listClassSide = listSchool;
+      setListSchool(listClassSide?.concat(concatListSide));
+    } catch (e) {
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
     <div className="flex-1">
       <Header icon={renderIconHome({ color: "#4D4D4D" })} title={"Trang chủ"} />
@@ -313,7 +364,7 @@ export default function AdminHome() {
                   </PrimaryButton>
                 )}
               </div>
-              <div className="admin-home-list-school admin-home-right-p-h scrollbar-custom">
+              <div onScroll={handleScroll} className="admin-home-list-school admin-home-right-p-h scrollbar-custom">
                 {listSchool.map((item, index) => {
                   return (
                     <div