upd: member

Deskripsi:
- realtime pada create member
- realtime pada edit status member

No Issues

src/module/user/member/ui/create_member.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { globalRole, TEMA } from "@/module/_global";
+import { globalRole, keyWibu, TEMA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { funGetUserByCookies } from "@/module/auth";
 import { funGetAllGroup, IDataGroup } from "@/module/group";
@@ -16,6 +16,7 @@ import { FaCamera } from "react-icons/fa6";
 import { valueRoleUser } from "../../lib/val_user";
 import { funCreateMember } from "../lib/api_member";
 import { IDataPositionMember, IDataROleMember } from "../lib/type_member";
+import { useWibuRealtime } from "wibu-realtime";
 
 export default function CreateMember() {
   const router = useRouter();
@@ -29,6 +30,10 @@ export default function CreateMember() {
   const [imgForm, setImgForm] = useState<any>()
   const openRef = useRef<() => void>(null)
   const tema = useHookstate(TEMA)
+  const [dataRealTime, setDataRealtime] = useWibuRealtime({
+    WIBU_REALTIME_TOKEN: keyWibu,
+    project: "sdm"
+  })
   const [touched, setTouched] = useState({
     nik: false,
     name: false,
@@ -118,6 +123,10 @@ export default function CreateMember() {
       ))
       const res = await funCreateMember(fd);
       if (res.success) {
+        setDataRealtime([{
+          category: "data-member",
+          group: res.data.idGroup,
+        }])
         toast.success(res.message);
         router.push("/member?active=true");
       } else {

src/module/user/member/ui/drawer_detail_member.tsx

@@ -1,28 +1,23 @@
 "use client";
-import { TEMA, WARNA } from "@/module/_global";
+import { keyWibu, TEMA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
+import { useHookstate } from "@hookstate/core";
 import { Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { FaPencil, FaToggleOff } from "react-icons/fa6";
-import { ImUserCheck } from "react-icons/im";
+import { useWibuRealtime } from "wibu-realtime";
 import { funEditStatusMember } from "../lib/api_member";
-import { useHookstate } from "@hookstate/core";
 
-export default function DrawerDetailMember({
-  onDeleted,
-  id,
-  status,
-}: {
-  onDeleted: (val: boolean) => void;
-  id: string;
-  status: boolean;
-}) {
+export default function DrawerDetailMember({ onDeleted, id, status, }: { onDeleted: (val: boolean) => void; id: string; status: boolean; }) {
   const router = useRouter();
   const [isModal, setModal] = useState(false);
   const tema = useHookstate(TEMA)
+  const [dataRealTime, setDataRealtime] = useWibuRealtime({
+    WIBU_REALTIME_TOKEN: keyWibu,
+    project: "sdm"
+  })
 
   async function nonActive(val: boolean) {
     try {
@@ -31,6 +26,10 @@ export default function DrawerDetailMember({
           isActive: status ? true : false,
         });
         if (res.success) {
+          setDataRealtime([{
+            category: "data-member",
+            group: res.data.idGroup,
+          }])
           toast.success(res.message);
           router.push("/member?active=true");
           onDeleted(true);

src/module/user/member/ui/tab_list_member.tsx

@@ -1,14 +1,15 @@
-import { currentScroll, globalRole, SkeletonSingle, SkeletonUser, TEMA } from "@/module/_global"
-import { Box, Text, TextInput, Divider, Avatar, Grid, Group, ActionIcon, Skeleton } from "@mantine/core"
+import { currentScroll, globalRole, keyWibu, ReloadButtonTop, SkeletonUser, TEMA } from "@/module/_global"
+import { useHookstate } from "@hookstate/core"
+import { Avatar, Box, Divider, Grid, Text, TextInput } from "@mantine/core"
 import { useMediaQuery, useShallowEffect } from "@mantine/hooks"
+import _ from "lodash"
 import { useRouter, useSearchParams } from "next/navigation"
 import { useEffect, useState } from "react"
-import { HiMagnifyingGlass } from "react-icons/hi2"
-import { IListMember } from "../lib/type_member"
-import { funGetAllmember } from "../lib/api_member"
 import toast from "react-hot-toast"
-import _ from "lodash"
-import { useHookstate } from "@hookstate/core"
+import { HiMagnifyingGlass } from "react-icons/hi2"
+import { useWibuRealtime } from "wibu-realtime"
+import { funGetAllmember } from "../lib/api_member"
+import { IListMember } from "../lib/type_member"
 
 
 export default function TabListMember() {
@@ -21,10 +22,16 @@ export default function TabListMember() {
    const status = searchParams.get('active')
    const roleLogin = useHookstate(globalRole)
    const [nameGroup, setNameGroup] = useState('')
+   const [idGroup, setIdGroup] = useState('')
    const tema = useHookstate(TEMA)
    const { value: containerRef } = useHookstate(currentScroll);
    const [isPage, setPage] = useState(1)
    const isMobile2 = useMediaQuery("(max-width: 438px)");
+   const [dataRealTime, setDataRealtime] = useWibuRealtime({
+      WIBU_REALTIME_TOKEN: keyWibu,
+      project: "sdm"
+   })
+   const [isRefresh, setRefresh] = useState(false)
 
 
    async function getAllUser(loading: boolean) {
@@ -34,10 +41,11 @@ export default function TabListMember() {
          const res = await funGetAllmember('?active=' + status + '&group=' + group + '&search=' + searchQuery + '&page=' + isPage)
          if (res.success) {
             setNameGroup(res.filter.name)
+            setIdGroup(res.filter.id)
             if (isPage == 1) {
                setDataMember(res.data)
             } else {
-               setDataMember([...dataMember, ...res.data])
+               setDataMember((dataMember) => [...dataMember, ...res.data])
             }
 
          } else {
@@ -81,9 +89,30 @@ export default function TabListMember() {
       };
    }, [containerRef, isPage]);
 
+
+   useShallowEffect(() => {
+      if (dataRealTime && dataRealTime.some((i: any) => i.category == 'data-member' && i.group == idGroup)) {
+         setRefresh(true)
+      }
+   }, [dataRealTime])
+
+   function onRefresh() {
+      setRefresh(false)
+      setPage(1)
+      getAllUser(true)
+   }
+
    return (
       <>
          <Box>
+            {
+               isRefresh &&
+               <ReloadButtonTop
+                  onReload={() => { onRefresh() }}
+                  title='UPDATE'
+               />
+
+            }
             <TextInput
                styles={{
                   input: {