upd: project

Deskripsi:
- update scroll page

No Issues

src/app/api/project/route.ts

@@ -22,6 +22,8 @@ export async function GET(request: Request) {
         const name = searchParams.get('search');
         const status = searchParams.get('status');
         const idGroup = searchParams.get("group");
+        const page = searchParams.get('page');
+        const dataSkip = Number(page) * 10 - 10;
         const villageId = user.idVillage
         const userId = user.id
 
@@ -73,6 +75,8 @@ export async function GET(request: Request) {
 
 
         const data = await prisma.project.findMany({
+            skip: dataSkip,
+            take: 10,
             where: kondisi,
             select: {
                 id: true,
@@ -95,6 +99,11 @@ export async function GET(request: Request) {
             member: v.ProjectMember.length
         }))
 
+
+        const totalData = await prisma.project.count({
+            where: kondisi
+        })
+
         const filter = await prisma.group.findUnique({
             where: {
                 id: grup
@@ -106,7 +115,7 @@ export async function GET(request: Request) {
         })
 
 
-        return NextResponse.json({ success: true, message: "Berhasil mendapatkan kegiatan", data: omitData, filter }, { status: 200 });
+        return NextResponse.json({ success: true, message: "Berhasil mendapatkan kegiatan", data: omitData, filter, total: totalData }, { status: 200 });
 
     } catch (error) {
         console.error(error);

src/module/project/ui/list_project.tsx

@@ -1,8 +1,8 @@
 "use client"
-import { globalRole, TEMA, WARNA } from '@/module/_global';
+import { currentScroll, globalRole, TEMA, WARNA } from '@/module/_global';
 import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, Skeleton, Text, TextInput, Title } from '@mantine/core';
 import { useRouter, useSearchParams } from 'next/navigation';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiOutlineListBullet, HiSquares2X2 } from 'react-icons/hi2';
 import { MdAccountCircle } from 'react-icons/md';
 import { RiCircleFill } from 'react-icons/ri';
@@ -25,14 +25,29 @@ export default function ListProject() {
   const roleLogin = useHookstate(globalRole)
   const [nameGroup, setNameGroup] = useState('')
   const tema = useHookstate(TEMA)
+  const { value: containerRef } = useHookstate(currentScroll)
+  const [isPage, setPage] = useState(1)
+  const [totalData, setTotalData] = useState(0)
+  const isMobile = useMediaQuery('(max-width: 369px)');
+  const paddingLift = useMediaQuery('(max-width: 505px)')
 
-  const fetchData = async () => {
+  const handleList = () => {
+    setIsList(!isList)
+  }
+
+  const fetchData = async (loading: boolean) => {
     try {
-      setLoading(true)
-      const response = await funGetAllProject('?status=' + status + '&search=' + searchQuery + '&group=' + group)
+      if (loading)
+        setLoading(true)
+      const response = await funGetAllProject('?status=' + status + '&search=' + searchQuery + '&group=' + group + '&page=' + isPage)
       if (response.success) {
-        setData(response?.data)
         setNameGroup(response.filter.name)
+        setTotalData(response.total)
+        if (isPage == 1) {
+          setData(response.data)
+        } else {
+          setData([...isData, ...response.data])
+        }
       } else {
         toast.error(response.message);
       }
@@ -47,15 +62,35 @@ export default function ListProject() {
 
 
   useShallowEffect(() => {
-    fetchData();
+    setPage(1)
+    fetchData(true);
   }, [status, searchQuery]);
 
-  const handleList = () => {
-    setIsList(!isList)
-  }
-  const isMobile = useMediaQuery('(max-width: 369px)');
 
-  const paddingLift = useMediaQuery('(max-width: 505px)')
+  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 + 1 >= scrollHeight) {
+          setPage(isPage + 1)
+        }
+      }
+    };
+
+    const container = containerRef?.current;
+    container?.addEventListener("scroll", handleScroll);
+
+    return () => {
+      container?.removeEventListener("scroll", handleScroll);
+    };
+  }, [containerRef, isPage]);
 
   return (
     <Box mt={20}>
@@ -97,7 +132,7 @@ export default function ListProject() {
           <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>
         }