diff --git a/src/_screens/home/education-department/educationDepartmentHome.style.scss b/src/_screens/home/education-department/educationDepartmentHome.style.scss index f95d0d2..91b08c6 100644 --- a/src/_screens/home/education-department/educationDepartmentHome.style.scss +++ b/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; diff --git a/src/_screens/home/education-department/index.js b/src/_screens/home/education-department/index.js index a05b46c..3a500da 100644 --- a/src/_screens/home/education-department/index.js +++ b/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 (