upd: task division

Deskripsi:
- load scroll

No Issues

src/app/api/task/route.ts

@@ -20,6 +20,8 @@ export async function GET(request: Request) {
       const name = searchParams.get('search');
       const divisi = searchParams.get('division');
       const status = searchParams.get('status');
+      const page = searchParams.get('page');
+      const dataSkip = Number(page) * 3 - 3;
 
       const cek = await prisma.division.count({
          where: {
@@ -33,6 +35,8 @@ export async function GET(request: Request) {
       }
 
       const data = await prisma.divisionProject.findMany({
+         skip: dataSkip,
+         take: 3,
          where: {
             isActive: true,
             idDivision: String(divisi),
@@ -73,7 +77,19 @@ export async function GET(request: Request) {
          member: v.DivisionProjectMember.length
       }))
 
-      return NextResponse.json({ success: true, message: "Berhasil mendapatkan divisi", data: formatData, }, { status: 200 });
+      const totalData = await prisma.divisionProject.count({
+         where: {
+            isActive: true,
+            idDivision: String(divisi),
+            status: (status == "0" || status == "1" || status == "2" || status == "3") ? Number(status) : 0,
+            title: {
+               contains: (name == undefined || name == "null") ? "" : name,
+               mode: "insensitive"
+            }
+         }
+      })
+
+      return NextResponse.json({ success: true, message: "Berhasil mendapatkan divisi", data: formatData, total: totalData }, { status: 200 });
 
    } catch (error) {
       console.error(error);

src/module/task/ui/list_division_task.tsx

@@ -1,7 +1,7 @@
-import { TEMA } from "@/module/_global";
+import { currentScroll, TEMA } from "@/module/_global";
 import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Progress, Skeleton, Text, TextInput, Title } from "@mantine/core";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiOutlineListBullet, HiSquares2X2 } from "react-icons/hi2";
 import { MdAccountCircle } from "react-icons/md";
 import { IDataTask } from "../lib/type_task";
@@ -22,20 +22,26 @@ export default function ListDivisionTask() {
    const [loading, setLoading] = useState(true);
    const tema = useHookstate(TEMA)
    const paddingLift = useMediaQuery('(max-width: 505px)')
+   const { value: containerRef } = useHookstate(currentScroll)
+   const [isPage, setPage] = useState(1)
+   const [totalData, setTotalData] = useState(0)
 
    const handleList = () => {
       setIsList(!isList)
    }
 
-   const fetchData = async () => {
+   const fetchData = async (loading: boolean) => {
       try {
-         setData([]);
+         if (loading)
-         setLoading(true);
+            setLoading(true)
-
+         const response = await funGetAllTask('?division=' + param.id + '&status=' + status + '&search=' + searchQuery + '&page=' + isPage)
-         const response = await funGetAllTask('?division=' + param.id + '&status=' + status + '&search=' + searchQuery)
-
          if (response.success) {
-            setData(response?.data)
+            setTotalData(response.total)
+            if (isPage == 1) {
+               setData(response?.data)
+            } else {
+               setData([...isData, ...response.data])
+            }
          } else {
             toast.error(response.message);
          }
@@ -51,9 +57,36 @@ export default function ListDivisionTask() {
 
 
    useShallowEffect(() => {
-      fetchData();
+      setPage(1)
+      fetchData(true);
    }, [status, searchQuery]);
 
+
+   useShallowEffect(() => {
+      fetchData(false)
+   }, [isPage])
+
+   useEffect(() => {
+      const handleScroll = async () => {
+         if (containerRef && containerRef.current) {
+            const scrollTop = containerRef.current.scrollTop;
+            const containerHeight = containerRef.current.clientHeight;
+            const scrollHeight = containerRef.current.scrollHeight;
+
+            if (scrollTop + containerHeight >= scrollHeight) {
+               setPage(isPage + 1)
+            }
+         }
+      };
+
+      const container = containerRef?.current;
+      container?.addEventListener("scroll", handleScroll);
+
+      return () => {
+         container?.removeEventListener("scroll", handleScroll);
+      };
+   }, [containerRef, isPage]);
+
    return (
       <Box py={20}>
          <Grid justify='center' align='center'>
@@ -92,7 +125,7 @@ export default function ListDivisionTask() {
                <Box bg={tema.get().bgTotalKegiatan} p={10} style={{ borderRadius: 10 }}>
                   <Text fw={'bold'} c={tema.get().utama}>Total Kegiatan</Text>
                   <Flex justify={'center'} align={'center'} h={'100%'}>
-                     <Text fz={40} fw={'bold'} c={tema.get().utama}>{isData.length}</Text>
+                     <Text fz={40} fw={'bold'} c={tema.get().utama}>{totalData}</Text>
                   </Flex>
                </Box>
             }