From f5816e7bd2e016c4a0e6d2da65dac5ecf8885763 Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Thu, 19 Sep 2024 17:38:26 +0800
Subject: [PATCH] upd: diskusi

Deskripsi:
- load scroll deskripsi

No Issues
---
 src/app/api/discussion/route.ts              |  4 ++
 src/app/api/task/route.ts                    |  4 +-
 src/module/discussion/ui/list_discussion.tsx | 54 ++++++++++++++++----
 3 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/src/app/api/discussion/route.ts b/src/app/api/discussion/route.ts
index c00992d..7d2cf7a 100644
--- a/src/app/api/discussion/route.ts
+++ b/src/app/api/discussion/route.ts
@@ -18,6 +18,8 @@ export async function GET(request: Request) {
       const { searchParams } = new URL(request.url);
       const idDivision = searchParams.get("division");
       const name = searchParams.get('search');
+      const page = searchParams.get('page');
+      const dataSkip = Number(page) * 10 - 10;
 
 
       if (idDivision != "null" && idDivision != null && idDivision != undefined) {
@@ -33,6 +35,8 @@ export async function GET(request: Request) {
          }
 
          const data = await prisma.divisionDisscussion.findMany({
+            skip: dataSkip,
+            take: 10,
             where: {
                isActive: true,
                idDivision: idDivision,
diff --git a/src/app/api/task/route.ts b/src/app/api/task/route.ts
index 95a0aa1..679881d 100644
--- a/src/app/api/task/route.ts
+++ b/src/app/api/task/route.ts
@@ -21,7 +21,7 @@ export async function GET(request: Request) {
       const divisi = searchParams.get('division');
       const status = searchParams.get('status');
       const page = searchParams.get('page');
-      const dataSkip = Number(page) * 3 - 3;
+      const dataSkip = Number(page) * 10 - 10;
 
       const cek = await prisma.division.count({
          where: {
@@ -36,7 +36,7 @@ export async function GET(request: Request) {
 
       const data = await prisma.divisionProject.findMany({
          skip: dataSkip,
-         take: 3,
+         take: 10,
          where: {
             isActive: true,
             idDivision: String(divisi),
diff --git a/src/module/discussion/ui/list_discussion.tsx b/src/module/discussion/ui/list_discussion.tsx
index 1c789cc..43b9c47 100644
--- a/src/module/discussion/ui/list_discussion.tsx
+++ b/src/module/discussion/ui/list_discussion.tsx
@@ -1,8 +1,8 @@
 'use client'
-import { TEMA } from "@/module/_global";
+import { currentScroll, TEMA } from "@/module/_global";
 import { Avatar, Badge, Box, Divider, Flex, Grid, Group, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { GrChatOption } from "react-icons/gr";
 import { HiMagnifyingGlass } from "react-icons/hi2";
 import { funGetAllDiscussion } from "../lib/api_discussion";
@@ -18,15 +18,21 @@ export default function ListDiscussion({ id }: { id: string }) {
    const param = useParams<{ id: string }>()
    const [loading, setLoading] = useState(true)
    const tema = useHookstate(TEMA)
+   const router = useRouter()
+   const { value: containerRef } = useHookstate(currentScroll);
+   const [isPage, setPage] = useState(1)
 
-   const getData = async () => {
+   const getData = async (loading: boolean) => {
       try {
-         setLoading(true)
-         const response = await funGetAllDiscussion('?division=' + id + '&search=' + searchQuery)
-         if (
-            response.success
-         ) {
-            setData(response.data)
+         if (loading)
+            setLoading(true)
+         const response = await funGetAllDiscussion('?division=' + id + '&search=' + searchQuery + '&page=' + isPage)
+         if (response.success) {
+            if (isPage == 1) {
+               setData(response.data)
+            } else {
+               setData([...isData, ...response.data])
+            }
          } else {
             toast.error(response.message)
          }
@@ -39,10 +45,36 @@ export default function ListDiscussion({ id }: { id: string }) {
    }
 
    useShallowEffect(() => {
-      getData()
+      setPage(1)
+      getData(true)
    }, [searchQuery])
 
-   const router = useRouter()
+   useShallowEffect(() => {
+      getData(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 p={20}>
          <TextInput