From 0215c9204895ed1f9ef6d5dd5cd5c8011be1b8ec Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Mon, 14 Oct 2024 17:53:20 +0800
Subject: [PATCH] upd: pengumuman

Deskripsi:
- update realtime tambah pengumuman pake yg refresh page

No Issues
---
 src/module/_global/components/wrap_layout.tsx | 21 +++--
 .../announcement/ui/list_announcement.tsx     | 76 ++++++++++++++-----
 2 files changed, 72 insertions(+), 25 deletions(-)

diff --git a/src/module/_global/components/wrap_layout.tsx b/src/module/_global/components/wrap_layout.tsx
index 6d7869b..1902a2a 100644
--- a/src/module/_global/components/wrap_layout.tsx
+++ b/src/module/_global/components/wrap_layout.tsx
@@ -5,7 +5,7 @@ import { useShallowEffect } from "@mantine/hooks";
 import { useEffect, useState } from "react";
 import { useWibuRealtime } from "wibu-realtime";
 import NotificationCustome from "./notification_custome";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import { globalParamJumlahNotif } from "@/module/home";
 import ReloadButtonTop from "./reload_button_top";
 
@@ -20,6 +20,8 @@ export default function WrapLayout({ children, role, theme, user }: { children:
       WIBU_REALTIME_TOKEN: keyWibu,
       project: "sdm"
    })
+   const path = usePathname()
+
 
    useEffect(() => {
       roleLogin.set(role)
@@ -29,11 +31,18 @@ export default function WrapLayout({ children, role, theme, user }: { children:
 
    useShallowEffect(() => {
       if (data && data.some((i: any) => i.idUserTo == user)) {
-         setTampilNotif(true)
-         paramNotif.set(!paramNotif.get())
-         setTimeout(() => {
-            setTampilNotif(false);
-         }, 4000);
+         if (data.some((i: any) => i.category == path.substring(1))) {
+            notifLoadPage.set({
+               category: path.substring(1),
+               load: true
+            })
+         } else {
+            setTampilNotif(true)
+            paramNotif.set(!paramNotif.get())
+            setTimeout(() => {
+               setTampilNotif(false);
+            }, 4000);
+         }
       }
    }, [data])
 
diff --git a/src/module/announcement/ui/list_announcement.tsx b/src/module/announcement/ui/list_announcement.tsx
index 93f3f89..5a0c2c6 100644
--- a/src/module/announcement/ui/list_announcement.tsx
+++ b/src/module/announcement/ui/list_announcement.tsx
@@ -1,28 +1,29 @@
 'use client'
-import { currentScroll, globalNotifPage, SkeletonSingle, SkeletonUser, TEMA, WARNA } from '@/module/_global';
-import { ActionIcon, Box, Center, Divider, Grid, Group, Spoiler, Stack, Text, TextInput } from '@mantine/core';
-import React, { useEffect, useState } from 'react';
-import { TfiAnnouncement } from "react-icons/tfi";
-import { HiMagnifyingGlass } from 'react-icons/hi2';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { useShallowEffect } from '@mantine/hooks';
-import { IListDataAnnouncement } from '../lib/type_announcement';
-import { funGetAllAnnouncement } from '../lib/api_announcement';
-import toast from 'react-hot-toast';
+import { currentScroll, globalNotifPage, ReloadButtonTop, SkeletonUser, TEMA } from '@/module/_global';
+import { funGetUserByCookies } from '@/module/auth';
 import { useHookstate } from '@hookstate/core';
+import { ActionIcon, Box, Center, Divider, Grid, Spoiler, Stack, Text, TextInput } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import toast from 'react-hot-toast';
+import { HiMagnifyingGlass } from 'react-icons/hi2';
+import { TfiAnnouncement } from "react-icons/tfi";
+import { funGetAllAnnouncement } from '../lib/api_announcement';
+import { IListDataAnnouncement } from '../lib/type_announcement';
 
 
 export default function ListAnnouncement() {
    const [isData, setIsData] = useState<IListDataAnnouncement[]>([])
+   const [user, setUser] = useState('')
    const [searchQuery, setSearchQuery] = useState('')
    const router = useRouter()
    const [loading, setLoading] = useState(true);
    const tema = useHookstate(TEMA)
-   const load = useHookstate(globalNotifPage)
-
-   // ini
+   const notifLoadPage = useHookstate(globalNotifPage)
    const { value: containerRef } = useHookstate(currentScroll);
    const [isPage, setPage] = useState(1)
+   const [isRefresh, setRefresh] = useState(false)
 
 
    const fetchData = async (loading: boolean) => {
@@ -31,11 +32,11 @@ export default function ListAnnouncement() {
             setLoading(true)
          const response = await funGetAllAnnouncement('?search=' + searchQuery + '&page=' + isPage)
          if (response.success) {
-               if (isPage == 1) {
-                  setIsData(response?.data)
-               } else {
-                  setIsData([...isData, ...response?.data])
-               }
+            if (isPage == 1) {
+               setIsData(response?.data)
+            } else {
+               setIsData([...isData, ...response?.data])
+            }
          } else {
             toast.error(response.message);
          }
@@ -48,7 +49,12 @@ export default function ListAnnouncement() {
       }
    }
 
-   function onSearch(val:string){
+   async function onUser() {
+      const user = await funGetUserByCookies()
+      setUser(String(user.id))
+   }
+
+   function onSearch(val: string) {
       setSearchQuery(val)
       setPage(1)
    }
@@ -63,6 +69,11 @@ export default function ListAnnouncement() {
    }, [isPage])
 
 
+   useShallowEffect(() => {
+      onUser()
+   }, [])
+
+
 
    useEffect(() => {
       const handleScroll = async () => {
@@ -84,8 +95,35 @@ export default function ListAnnouncement() {
       };
    }, [containerRef, isPage]);
 
+
+   useShallowEffect(() => {
+      if (notifLoadPage.get().category == 'announcement' && notifLoadPage.get().load == true) {
+         setRefresh(true)
+      }
+   }, [notifLoadPage.get().load])
+
+   function onRefresh() {
+      notifLoadPage.set({
+         category: '',
+         load: false
+      })
+      setRefresh(false)
+      setPage(1)
+      setTimeout(() => {
+         fetchData(true)
+      }, 500)
+   }
+
    return (
       <Box p={20}>
+         {
+            isRefresh &&
+            <ReloadButtonTop
+               onReload={() => { onRefresh() }}
+               title='UPDATE'
+            />
+
+         }
          <TextInput
             styles={{
                input: {