From 4bc043a8e147275e02b0b5254a3c64d390b34623 Mon Sep 17 00:00:00 2001 From: amel Date: Mon, 14 Oct 2024 15:30:42 +0800 Subject: [PATCH] upd: member Deskripsi: - realtime pada create member - realtime pada edit status member No Issues --- src/app/api/user/[id]/route.ts | 6 ++- src/app/api/user/route.ts | 5 ++- .../_global/components/reload_button_top.tsx | 2 +- src/module/user/member/ui/create_member.tsx | 11 ++++- .../user/member/ui/drawer_detail_member.tsx | 25 +++++------ src/module/user/member/ui/tab_list_member.tsx | 45 +++++++++++++++---- 6 files changed, 68 insertions(+), 26 deletions(-) diff --git a/src/app/api/user/[id]/route.ts b/src/app/api/user/[id]/route.ts index 7936848..f1d96c0 100644 --- a/src/app/api/user/[id]/route.ts +++ b/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 } ); diff --git a/src/app/api/user/route.ts b/src/app/api/user/route.ts index 80ea26a..493ef89 100644 --- a/src/app/api/user/route.ts +++ b/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 }); } diff --git a/src/module/_global/components/reload_button_top.tsx b/src/module/_global/components/reload_button_top.tsx index cf2dd68..ca94071 100644 --- a/src/module/_global/components/reload_button_top.tsx +++ b/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); }, []); diff --git a/src/module/user/member/ui/create_member.tsx b/src/module/user/member/ui/create_member.tsx index 060b197..326b801 100644 --- a/src/module/user/member/ui/create_member.tsx +++ b/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() 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 { diff --git a/src/module/user/member/ui/drawer_detail_member.tsx b/src/module/user/member/ui/drawer_detail_member.tsx index b8b4988..bb537fd 100644 --- a/src/module/user/member/ui/drawer_detail_member.tsx +++ b/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); diff --git a/src/module/user/member/ui/tab_list_member.tsx b/src/module/user/member/ui/tab_list_member.tsx index e370035..a6b0c47 100644 --- a/src/module/user/member/ui/tab_list_member.tsx +++ b/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 ( <> + { + isRefresh && + { onRefresh() }} + title='UPDATE' + /> + + }