Merge pull request #304 from bipproduction/amalia/14-okt-24

Amalia/14 okt 24

src/app/api/position/[id]/route.ts

@@ -120,7 +120,6 @@ export async function PUT(request: Request, context: { params: { id: string } })
                 },
                 data: {
                     name: data.name,
-                    // idGroup: data.idGroup,
                 },
             });
 

src/app/api/position/route.ts

@@ -113,6 +113,7 @@ export async function POST(request: Request) {
                 select: {
                     id: true,
                     name: true,
+                    idGroup: true
                 },
             });
 

src/app/api/user/[id]/route.ts

@@ -111,6 +111,10 @@ export async function DELETE(request: Request, context: { params: { id: string }
             data: {
                 isActive: !isActive,
             },
+            select: {
+                id: true,
+                idGroup: true,
+            },
         });
 
         // create log user
@@ -120,7 +124,7 @@ export async function DELETE(request: Request, context: { params: { id: string }
             {
                 success: true,
                 message: "Berhasil mengupdate status anggota",
-                result,
+                data: result,
             },
             { status: 200 }
         );

src/app/api/user/route.ts

@@ -186,7 +186,8 @@ export async function POST(request: Request) {
           idUserRole: data.idUserRole,
         },
         select: {
-          id: true
+          id: true,
+          idGroup: true,
         },
       });
 
@@ -211,7 +212,7 @@ export async function POST(request: Request) {
       // create log user
       const log = await createLogUser({ act: 'CREATE', desc: 'User membuat data user baru', table: 'user', data: users.id })
 
-      return Response.json({ success: true, message: 'Sukses membuat user' }, { status: 200 });
+      return Response.json({ success: true, message: 'Sukses membuat user', data: users}, { status: 200 });
     } else {
       return Response.json({ success: false, message: "User sudah ada" }, { status: 400 });
     }

src/module/_global/components/reload_button_top.tsx

@@ -13,7 +13,7 @@ export default function ReloadButtonTop({ onReload, title }: { onReload: () => v
   useShallowEffect(() => {
     const timer = setTimeout(() => {
       setOpened(true);
-    }, 2000);
+    }, 500);
     return () => clearTimeout(timer);
   }, []);
 

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,12 +31,19 @@ export default function WrapLayout({ children, role, theme, user }: { children:
 
    useShallowEffect(() => {
       if (data && data.some((i: any) => i.idUserTo == user)) {
+         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])
 
 
@@ -53,15 +62,6 @@ export default function WrapLayout({ children, role, theme, user }: { children:
                onClose={() => { '' }}
             />
          }
-
-         {/* <ReloadButtonTop
-            onReload={
-               () => {
-                  ''
-               }
-            }
-            title='UPDATE'
-         /> */}
          {children}
       </>
    );

src/module/announcement/ui/list_announcement.tsx

@@ -1,28 +1,29 @@
 'use client'
-import { currentScroll, globalNotifPage, SkeletonSingle, SkeletonUser, TEMA, WARNA } from '@/module/_global';
+import { currentScroll, globalNotifPage, ReloadButtonTop, SkeletonUser, TEMA } from '@/module/_global';
-import { ActionIcon, Box, Center, Divider, Grid, Group, Spoiler, Stack, Text, TextInput } from '@mantine/core';
+import { funGetUserByCookies } from '@/module/auth';
-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 { 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)
+   const notifLoadPage = useHookstate(globalNotifPage)
-
-   // ini
    const { value: containerRef } = useHookstate(currentScroll);
    const [isPage, setPage] = useState(1)
+   const [isRefresh, setRefresh] = useState(false)
 
 
    const fetchData = async (loading: boolean) => {
@@ -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: {

src/module/position/ui/drawer_detail_position.tsx

@@ -1,4 +1,4 @@
-import { LayoutDrawer, TEMA, WARNA } from "@/module/_global"
+import { keyWibu, LayoutDrawer, TEMA, WARNA } from "@/module/_global"
 import LayoutModal from "@/module/_global/layout/layout_modal"
 import { funGetAllGroup, IDataGroup } from "@/module/group"
 import { Box, Stack, SimpleGrid, Flex, Text, Select, TextInput, Button, Skeleton } from "@mantine/core"
@@ -10,6 +10,7 @@ import { funEditPosition, funEditStatusPosition, funGetOnePosition } from "../li
 import { IDataPosition } from "../lib/type_position"
 import { useHookstate } from "@hookstate/core"
 import { globalRefreshPosition } from "../lib/val_posisition"
+import { useWibuRealtime } from "wibu-realtime"
 
 export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
    onUpdated: (val: boolean) => void, id: string, isActive: boolean;
@@ -29,6 +30,10 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
    const [touched, setTouched] = useState({
       name: false,
    });
+   const [dataRealTime, setDataRealtime] = useWibuRealtime({
+      WIBU_REALTIME_TOKEN: keyWibu,
+      project: "sdm"
+   })
 
    function onCLose() {
       onUpdated(true)
@@ -78,6 +83,10 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
 
          if (res.success) {
             toast.success(res.message);
+            setDataRealtime([{
+               category: "data-position",
+               group: data.idGroup,
+            }])
             refresh.set(!refresh.get())
             onUpdated(true);
             onCLose();
@@ -122,6 +131,10 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
             const res = await funEditStatusPosition(id, { isActive: isActive })
             if (res.success) {
                toast.success(res.message);
+               setDataRealtime([{
+                  category: "data-position",
+                  group: data.idGroup,
+               }])
                refresh.set(!refresh.get())
                onUpdated(true);
             } else {

src/module/position/ui/drawer_list_position.tsx

@@ -1,4 +1,4 @@
-import { WARNA, LayoutDrawer, globalRole, TEMA } from "@/module/_global";
+import { WARNA, LayoutDrawer, globalRole, TEMA, keyWibu } from "@/module/_global";
 import { funGetAllGroup, IDataGroup } from "@/module/group";
 import { Box, Stack, SimpleGrid, Flex, TextInput, Button, Text, Select } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
@@ -10,6 +10,7 @@ import { RiFilter2Line } from "react-icons/ri";
 import { funCreatePosition } from "../lib/api_position";
 import { useHookstate } from "@hookstate/core";
 import { globalRefreshPosition } from "../lib/val_posisition";
+import { useWibuRealtime } from "wibu-realtime";
 
 
 export default function DrawerListPosition({ onCreated }: { onCreated: (val: boolean) => void }) {
@@ -26,11 +27,14 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
       name: false,
       idGroup: false
    });
-
    const [listData, setListData] = useState({
       name: "",
       idGroup: "",
    })
+   const [dataRealTime, setDataRealtime] = useWibuRealtime({
+      WIBU_REALTIME_TOKEN: keyWibu,
+      project: "sdm"
+   })
 
    async function getAllGroup() {
       try {
@@ -60,10 +64,14 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
          })
 
          if (res.success) {
-            setOpenDrawerGroup(false)
             toast.success(res.message)
+            setDataRealtime([{
+               category: "data-position",
+               group: res.positions.idGroup,
+            }])
             refresh.set(!refresh.get())
             onCreated(true)
+            setOpenDrawerGroup(false)
          } else {
             toast.error(res.message)
             setOpenDrawerGroup(false)

src/module/position/ui/list_position_active.tsx

@@ -1,17 +1,17 @@
-import { globalRole, LayoutDrawer, SkeletonSingle, TEMA, WARNA } from "@/module/_global";
+import { globalRole, keyWibu, LayoutDrawer, TEMA } from "@/module/_global";
+import { useHookstate } from "@hookstate/core";
 import { ActionIcon, Box, Flex, Grid, Group, Skeleton, Text, TextInput } from "@mantine/core";
-import React, { useState } from "react";
-import { FaUserTie } from "react-icons/fa6";
-import { HiMagnifyingGlass } from "react-icons/hi2";
-import DrawerDetailPosition from "./drawer_detail_position";
-import toast from "react-hot-toast";
-import _ from "lodash";
 import { useShallowEffect } from "@mantine/hooks";
 import { useSearchParams } from "next/navigation";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { FaUserTie } from "react-icons/fa6";
+import { HiMagnifyingGlass } from "react-icons/hi2";
+import { useWibuRealtime } from "wibu-realtime";
 import { funGetAllPosition } from "../lib/api_position";
 import { IDataPosition } from "../lib/type_position";
-import { useHookstate } from "@hookstate/core";
 import { globalRefreshPosition } from "../lib/val_posisition";
+import DrawerDetailPosition from "./drawer_detail_position";
 
 
 export default function ListPositionActive() {
@@ -29,10 +29,14 @@ export default function ListPositionActive() {
   const roleLogin = useHookstate(globalRole)
   const [nameGroup, setNameGroup] = useState('')
   const tema = useHookstate(TEMA)
+  const [dataRealTime, setDataRealtime] = useWibuRealtime({
+    WIBU_REALTIME_TOKEN: keyWibu,
+    project: "sdm"
+  })
 
-  async function getAllPosition() {
+  async function getAllPosition(loading: boolean) {
     try {
-      setLoading(true)
+      setLoading(loading)
       const res = await funGetAllPosition('?active=' + status + '&group=' + group + '&search=' + searchQuery)
       setDataPosition(res.data);
       setNameGroup(res.filter.name)
@@ -46,9 +50,15 @@ export default function ListPositionActive() {
   }
 
   useShallowEffect(() => {
-    getAllPosition();
+    getAllPosition(true);
   }, [status, group, searchQuery, refresh.get()])
 
+  useShallowEffect(() => {
+    if (dataRealTime && dataRealTime.some((i: any) => i.category == 'data-position' && i.group == group)) {
+      getAllPosition(false)
+    }
+  }, [dataRealTime])
+
 
   return (
     <Box pt={20}>

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({
+export default function DrawerDetailMember({ onDeleted, id, status, }: { onDeleted: (val: boolean) => void; id: string; status: boolean; }) {
-  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 { currentScroll, globalRole, keyWibu, ReloadButtonTop, SkeletonUser, TEMA } from "@/module/_global"
-import { Box, Text, TextInput, Divider, Avatar, Grid, Group, ActionIcon, Skeleton } from "@mantine/core"
+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 { HiMagnifyingGlass } from "react-icons/hi2"
-import { useHookstate } from "@hookstate/core"
+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: {