upd: announcement

Deskripsi:
- pagination scrooll load

No Issues

src/module/_global/bin/val_global.ts

@@ -1,5 +1,6 @@
 import { hookstate } from "@hookstate/core"
 import { IGlobalTema } from './type_global';
+import { RefObject } from "react";
 
 export const pwd_key_config = "fchgvjknlmdfnbvghhujlaknsdvjbhknlkmsdbdyu567t8y9u30r4587638y9uipkoeghjvuyi89ipkoefmnrjbhtiu4or9ipkoemnjfbhjiuoijdklnjhbviufojkejnshbiuojijknehgruyu"
 export const globalRole = hookstate<string>('')
@@ -24,4 +25,6 @@ export const TEMA = hookstate<IGlobalTema>({
 export const globalNotifPage = hookstate({
    load: false,
    category: ''
-})
+})
+
+export const currentScroll = hookstate<RefObject<HTMLDivElement> | null>(null);

src/module/_global/components/scroll_provider.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useHookstate } from "@hookstate/core";
+import { useEffect, useRef } from "react";
+import { Box } from "@mantine/core";
+import { currentScroll } from "../bin/val_global";
+
+export function ScrollProvider({ children }: { children: React.ReactNode }) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { set } = useHookstate(currentScroll);
+
+  useEffect(() => {
+    if (window) {
+      const handleScroll = () => {
+        if (containerRef.current) {
+          set(containerRef);
+        }
+      };
+
+      const container = containerRef.current;
+      container?.addEventListener("scroll", handleScroll);
+
+      return () => {
+        container?.removeEventListener("scroll", handleScroll);
+      };
+    }
+  }, [containerRef, set]);
+  return (
+    <Box
+      h={"100vh"}
+      style={{ overflow: "auto", position: "relative" }}
+      ref={containerRef}
+    >
+      {children}
+    </Box>
+  );
+}
+

src/module/_global/index.ts

@@ -1,6 +1,6 @@
 import MqttLoad from "./bin/mqtt_load";
 import prisma from "./bin/prisma";
-import { DIR, globalNotifPage, globalRole, pwd_key_config, TEMA } from "./bin/val_global";
+import { currentScroll, DIR, globalNotifPage, globalRole, pwd_key_config, TEMA } from "./bin/val_global";
 import SkeletonAvatar from "./components/skeleton_avatar";
 import SkeletonDetailDiscussionComment from "./components/skeleton_detail_discussion_comment";
 import SkeletonDetailDiscussionMember from "./components/skeleton_detail_discussion_member";
@@ -24,6 +24,7 @@ import ReloadButtonTop from "./components/reload_button_top";
 import ViewFilter from "./view/view_filter";
 import mtqq_client from "./bin/mqtt_client"
 import NotificationCustome from "./components/notification_custome";
+import { ScrollProvider } from "./components/scroll_provider";
 
 export { WARNA };
 export { LayoutLogin };
@@ -55,3 +56,5 @@ export { globalNotifPage }
 export { SkeletonAvatar }
 export { ReloadButtonTop }
 export { NotificationCustome }
+export { ScrollProvider }
+export { currentScroll }

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)