From c4da324ad5c58df1e5c49828b940e38d94154cbb Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Thu, 19 Sep 2024 12:12:54 +0800
Subject: [PATCH] upd: division

Deskripsi:
- update load pagination

No Issues
---
 src/app/api/division/route.ts                 | 10 +++-
 .../announcement/ui/list_announcement.tsx     |  4 +-
 src/module/division_new/ui/list_division.tsx  | 52 +++++++++++++++----
 3 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/src/app/api/division/route.ts b/src/app/api/division/route.ts
index cc52a2d..21471cd 100644
--- a/src/app/api/division/route.ts
+++ b/src/app/api/division/route.ts
@@ -20,6 +20,8 @@ export async function GET(request: Request) {
       const { searchParams } = new URL(request.url);
       const idGroup = searchParams.get("group");
       const name = searchParams.get('search');
+      const page = searchParams.get('page');
+      const dataSkip = Number(page) * 10 - 10;
 
       if (idGroup == "null" || idGroup == undefined) {
          grup = user.idGroup
@@ -56,7 +58,13 @@ export async function GET(request: Request) {
          }
       }
 
+      const totalData = await prisma.division.count({
+         where: kondisi
+      })
+
       const data = await prisma.division.findMany({
+         skip: dataSkip,
+         take: 10,
          where: kondisi,
          select: {
             id: true,
@@ -90,7 +98,7 @@ export async function GET(request: Request) {
       })
 
 
-      return NextResponse.json({ success: true, message: "Berhasil mendapatkan divisi", data: allData, filter }, { status: 200 });
+      return NextResponse.json({ success: true, message: "Berhasil mendapatkan divisi", data: allData, total: totalData, filter }, { status: 200 });
 
    } catch (error) {
       console.error(error);
diff --git a/src/module/announcement/ui/list_announcement.tsx b/src/module/announcement/ui/list_announcement.tsx
index 76e58fc..ce57010 100644
--- a/src/module/announcement/ui/list_announcement.tsx
+++ b/src/module/announcement/ui/list_announcement.tsx
@@ -31,13 +31,13 @@ export default function ListAnnouncement() {
             setLoading(true)
          const response = await funGetAllAnnouncement('?search=' + searchQuery + '&page=' + isPage)
          if (response.success) {
-            if (response.data.length > 0) {
+            // if (response.data.length > 0) {
                if (isPage == 1) {
                   setIsData(response?.data)
                } else {
                   setIsData([...isData, ...response?.data])
                }
-            }
+            // }
          } else {
             toast.error(response.message);
          }
diff --git a/src/module/division_new/ui/list_division.tsx b/src/module/division_new/ui/list_division.tsx
index 1ecd3e1..8f7792c 100644
--- a/src/module/division_new/ui/list_division.tsx
+++ b/src/module/division_new/ui/list_division.tsx
@@ -1,8 +1,8 @@
 'use client'
-import { globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
+import { currentScroll, globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
 import { ActionIcon, Avatar, 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 { HiMenu } from 'react-icons/hi';
 import { HiMagnifyingGlass, HiMiniUserGroup, HiOutlineListBullet, HiSquares2X2 } from 'react-icons/hi2';
 import { MdAccountCircle } from 'react-icons/md';
@@ -26,6 +26,8 @@ export default function ListDivision() {
   const [nameGroup, setNameGroup] = useState('')
   const roleLogin = useHookstate(globalRole)
   const tema = useHookstate(TEMA)
+  const { value: containerRef } = useHookstate(currentScroll);
+  const [isPage, setPage] = useState(1)
 
   const paddingLift = useMediaQuery('(max-width: 505px)')
 
@@ -34,15 +36,19 @@ export default function ListDivision() {
     setIsList(!isList)
   }
 
-  const fetchData = async (search: string) => {
+  const fetchData = async (loading: boolean) => {
     try {
-      setData([]);
-      setLoading(true);
-      const response = await funGetAllDivision('?search=' + search + '&group=' + group)
+      if (loading)
+        setLoading(true);
+      const response = await funGetAllDivision('?search=' + searchQuery + '&group=' + group + '&page=' + isPage)
       if (response.success) {
-        setData(response.data)
-        setJumlah(response.data.length)
+        setJumlah(response.total)
         setNameGroup(response.filter.name)
+        if (isPage == 1) {
+          setData(response.data)
+        }else{
+          setData([...data, ...response.data])
+        }
       } else {
         toast.error(response.message);
       }
@@ -57,14 +63,40 @@ export default function ListDivision() {
 
   function searchDivision(search: string) {
     setSearchQuery(search)
-    fetchData(search)
+    setPage(1)
   }
 
   useShallowEffect(() => {
-    fetchData(searchQuery)
+    fetchData(true)
   }, [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>
       <LayoutNavbarNew back='/home' title='Divisi'