From 85cea0d785d5e0b4fa86e6ddd788ffa50aaf2d0a Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Tue, 29 Oct 2024 16:31:50 +0800
Subject: [PATCH] upd:

Deskripsi:
- loading saat mengganti status jabatan

No Issues
---
 .../user/member/ui/drawer_detail_member.tsx   | 170 +++++++++---------
 .../user/member/ui/navbar_detail_member.tsx   |  26 +--
 2 files changed, 100 insertions(+), 96 deletions(-)

diff --git a/src/module/user/member/ui/drawer_detail_member.tsx b/src/module/user/member/ui/drawer_detail_member.tsx
index bb537fd..744b096 100644
--- a/src/module/user/member/ui/drawer_detail_member.tsx
+++ b/src/module/user/member/ui/drawer_detail_member.tsx
@@ -11,92 +11,96 @@ import { useWibuRealtime } from "wibu-realtime";
 import { funEditStatusMember } from "../lib/api_member";
 
 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"
-  })
+   const router = useRouter()
+   const [isModal, setModal] = useState(false)
+   const tema = useHookstate(TEMA)
+   const [loadingModal, setLoadingModal] = useState(false)
+   const [dataRealTime, setDataRealtime] = useWibuRealtime({
+      WIBU_REALTIME_TOKEN: keyWibu,
+      project: "sdm"
+   })
 
-  async function nonActive(val: boolean) {
-    try {
-      if (val) {
-        const res = await funEditStatusMember(id, {
-          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);
-        } else {
-          onDeleted(false);
-        }
+   async function nonActive(val: boolean) {
+      try {
+         if (val) {
+            setLoadingModal(true)
+            const res = await funEditStatusMember(id, {
+               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);
+            } else {
+               onDeleted(false);
+            }
+         }
+      } catch (error) {
+         console.error(error);
+         toast.error("Terjadi kesalahan");
+      } finally {
+         setModal(false)
+         setLoadingModal(false)
       }
-      setModal(false);
-    } catch (error) {
-      console.error(error);
-      setModal(false);
-      toast.error("Terjadi kesalahan");
-    }
-  }
+   }
 
-  return (
-    <Box>
-      <Stack pt={10}>
-        <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }}>
-          <Flex
-            justify={"center"}
-            align={"center"}
-            direction={"column"}
-            style={{ cursor: "pointer" }}
-            onClick={() => {
-              setModal(true);
-            }}
-          >
-            <Box>
-              <FaToggleOff size={30} color={tema.get().utama} />
-            </Box>
-            <Box>
-              <Text c={tema.get().utama} ta="center">
-                {" "}
-                {status === false ? "Aktifkan" : "Non Aktifkan"}
-              </Text>
-            </Box>
-          </Flex>
+   return (
+      <Box>
+         <Stack pt={10}>
+            <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }}>
+               <Flex
+                  justify={"center"}
+                  align={"center"}
+                  direction={"column"}
+                  style={{ cursor: "pointer" }}
+                  onClick={() => {
+                     setModal(true);
+                  }}
+               >
+                  <Box>
+                     <FaToggleOff size={30} color={tema.get().utama} />
+                  </Box>
+                  <Box>
+                     <Text c={tema.get().utama} ta="center">
+                        {" "}
+                        {status === false ? "Aktifkan" : "Non Aktifkan"}
+                     </Text>
+                  </Box>
+               </Flex>
 
-          <Flex
-            justify={"center"}
-            align={"center"}
-            direction={"column"}
-            style={{ cursor: "pointer" }}
-            onClick={() => {
-              router.push(`/member/edit/${id}`);
+               <Flex
+                  justify={"center"}
+                  align={"center"}
+                  direction={"column"}
+                  style={{ cursor: "pointer" }}
+                  onClick={() => {
+                     router.push(`/member/edit/${id}`);
+                  }}
+               >
+                  <Box>
+                     <FaPencil size={30} color={tema.get().utama} />
+                  </Box>
+                  <Box>
+                     <Text c={tema.get().utama} ta="center">
+                        Edit
+                     </Text>
+                  </Box>
+               </Flex>
+            </SimpleGrid>
+         </Stack>
+         <LayoutModal
+            loading={loadingModal}
+            opened={isModal}
+            onClose={() => setModal(false)}
+            description="Apakah Anda yakin ingin mengubah status aktifasi anggota?"
+            onYes={(val) => {
+               nonActive(val);
             }}
-          >
-            <Box>
-              <FaPencil size={30} color={tema.get().utama} />
-            </Box>
-            <Box>
-              <Text c={tema.get().utama} ta="center">
-                Edit
-              </Text>
-            </Box>
-          </Flex>
-        </SimpleGrid>
-      </Stack>
-      <LayoutModal
-        opened={isModal}
-        onClose={() => setModal(false)}
-        description="Apakah Anda yakin ingin mengubah status aktifasi anggota?"
-        onYes={(val) => {
-          nonActive(val);
-        }}
-      />
-    </Box>
-  );
+         />
+      </Box>
+   );
 }
diff --git a/src/module/user/member/ui/navbar_detail_member.tsx b/src/module/user/member/ui/navbar_detail_member.tsx
index 56b3fe9..c3123ab 100644
--- a/src/module/user/member/ui/navbar_detail_member.tsx
+++ b/src/module/user/member/ui/navbar_detail_member.tsx
@@ -1,19 +1,19 @@
 'use client'
-import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer, SkeletonDetailProfile, globalRole, TEMA } from "@/module/_global";
-import { Box, Group, ActionIcon, Stack, Text, Center, Avatar, Skeleton, Grid } from "@mantine/core";
-import { HiMenu } from "react-icons/hi";
-import DrawerDetailMember from "./drawer_detail_member";
-import { useState } from "react";
-import { RiIdCardFill } from "react-icons/ri";
-import { FaSquarePhone } from "react-icons/fa6";
-import { MdEmail } from "react-icons/md";
-import { IoMaleFemale } from "react-icons/io5";
-import { useShallowEffect } from "@mantine/hooks";
-import { funGetOneMember } from "../lib/api_member";
-import toast from "react-hot-toast";
-import { IListMember, IMember } from "../lib/type_member";
+import { globalRole, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, SkeletonDetailProfile, TEMA } from "@/module/_global";
 import { useHookstate } from "@hookstate/core";
+import { ActionIcon, Avatar, Box, Center, Grid, Group, Skeleton, Stack, Text } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { FaSquarePhone } from "react-icons/fa6";
+import { HiMenu } from "react-icons/hi";
+import { IoMaleFemale } from "react-icons/io5";
+import { MdEmail } from "react-icons/md";
+import { RiIdCardFill } from "react-icons/ri";
 import { valueRoleUser } from "../../lib/val_user";
+import { funGetOneMember } from "../lib/api_member";
+import { IListMember, IMember } from "../lib/type_member";
+import DrawerDetailMember from "./drawer_detail_member";
 
 
 export default function NavbarDetailMember({ id }: IMember) {