Feat : limit get ds Lớp

src/_screens/home/teacher/index.js

@@ -35,6 +35,10 @@ export default function TeacherHome() {
   const [criteria, setCriteria] = useState({});
   const [listClass, setListClass] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
+  const [isLoadMoreOnline, setLoadMoreOnline] = useState(true);
+  const [limitOnline] = useState(10);
+  const [offsetOnline, setOffsetOnline] = useState(0);
+  const [isEndOnlineClasses, setIsEndOnlineClasses] = useState(false);
 
   const teacherName = !!teacherId
     ? !!teacher_name ? decodeURIComponent(teacher_name) : ''
@@ -44,11 +48,16 @@ export default function TeacherHome() {
   const getData = async () => {
     try {
       setIsLoading(true);
-      const endPoint = `/api_exercise_report/teacher_report_summary?teacher_id=${id}&year=${
-        schoolYear?.value
-      }${!!semester?.value ? `&semester=${semester?.value}` : ""}${
-        !!month?.value ? `&month=${month?.value}` : ""
-      }`;
+      let queryParams = []
+
+      if(!!semester?.value){
+        queryParams.push(`&semester=${semester?.value}`)
+      }
+      if(!!month?.value){
+        queryParams.push(`month=${month?.value}`)
+      }
+      const endPoint = `/api_exercise_report/teacher_report_summary?teacher_id=${id}&year=${schoolYear?.value}${queryParams.length ? `${queryParams.join("&")}` : ""}`;
+
       const res = await apiCaller(endPoint, "GET");
       if (res?.status) {
         setCriteria(res?.criteria_teacher);
@@ -129,6 +138,56 @@ export default function TeacherHome() {
     getData();
   }, []);
 
+  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(!!semester?.value){
+          queryParams.push(`&semester=${semester?.value}`)
+        }
+        if(!!month?.value){
+          queryParams.push(`month=${month?.value}`)
+        }
+        const endPoint = 
+        `/api_exercise_report/teacher_report_summary?teacher_id=${id}&year=${schoolYear?.value}${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 = listClass;
+      setListClass(listClassSide?.concat(concatListSide));
+    } catch (e) {
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
     <div className="flex-1">
       <Header
@@ -205,7 +264,7 @@ export default function TeacherHome() {
                 <PrimaryButton onClick={handleExport}>Xuất excel</PrimaryButton>
               )}
             </div>
-            <div className="teacher-home-list-class teacher-home-right-p-h scrollbar-custom">
+            <div onScroll={handleScroll} className="teacher-home-list-class teacher-home-right-p-h scrollbar-custom">
               {listClass?.map((item) => {
                 return (
                   <div className="teacher-home-item-class" key={item?.class_id}>