upd: announcement

Deskripsi:
- pagination scrooll load

No Issues

src/module/announcement/ui/list_announcement.tsx

@@ -1,7 +1,7 @@
 'use client'
-import { globalNotifPage, SkeletonSingle, TEMA, WARNA } from '@/module/_global';
+import { currentScroll, globalNotifPage, SkeletonSingle, TEMA, WARNA } from '@/module/_global';
 import { ActionIcon, Box, Center, Divider, Grid, Group, Spoiler, Stack, Text, TextInput } from '@mantine/core';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { TfiAnnouncement } from "react-icons/tfi";
 import { HiMagnifyingGlass } from 'react-icons/hi2';
 import { useRouter, useSearchParams } from 'next/navigation';
@@ -9,7 +9,6 @@ import { useShallowEffect } from '@mantine/hooks';
 import { IListDataAnnouncement } from '../lib/type_announcement';
 import { funGetAllAnnouncement } from '../lib/api_announcement';
 import toast from 'react-hot-toast';
-import { funGetAllGroup, IDataGroup } from '@/module/group';
 import { useHookstate } from '@hookstate/core';
 
 
@@ -21,13 +20,24 @@ export default function ListAnnouncement() {
    const tema = useHookstate(TEMA)
    const load = useHookstate(globalNotifPage)
 
-   const fetchData = async () => {
-      try {
-         setLoading(true);
-         const response = await funGetAllAnnouncement('?search=' + searchQuery)
+   // ini
+   const { value: containerRef } = useHookstate(currentScroll);
+   const [isPage, setPage] = useState(1)
 
+
+   const fetchData = async (loading: boolean) => {
+      try {
+         if (loading)
+            setLoading(true)
+         const response = await funGetAllAnnouncement('?search=' + searchQuery + '&page=' + isPage)
          if (response.success) {
-            setIsData(response?.data)
+            if (response.data.length > 0) {
+               if (isPage == 1) {
+                  setIsData(response?.data)
+               } else {
+                  setIsData([...isData, ...response?.data])
+               }
+            }
          } else {
             toast.error(response.message);
          }
@@ -40,16 +50,49 @@ export default function ListAnnouncement() {
       }
    }
 
-   useShallowEffect(() => {
-      fetchData()
-   }, [searchQuery, load.get().load])
+   function onSearch(val:string){
+      setSearchQuery(val)
+      setPage(1)
+   }
 
    useShallowEffect(() => {
-      if (load.get().category == "announcement") {
-         console.log('masuk sinii', load.get().load)
-         fetchData()
-      }
-   }, [load.get().load])
+      fetchData(true)
+   }, [searchQuery])
+
+
+   useShallowEffect(() => {
+      fetchData(false)
+   }, [isPage])
+
+
+   // useShallowEffect(() => {
+   //    if (load.get().category == "announcement") {
+   //       console.log('masuk sinii', load.get().load)
+   //       fetchData()
+   //    }
+   // }, [load.get().load])
+
+
+   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}>
@@ -65,7 +108,7 @@ export default function ListAnnouncement() {
             radius={30}
             leftSection={<HiMagnifyingGlass size={20} />}
             placeholder="Pencarian"
-            onChange={(e) => setSearchQuery(e.target.value)}
+            onChange={(e) => onSearch(e.target.value)}
          />
          {loading
             ? Array(6)