upd: update fitur group

Deskripsi:
- update pembaruan api terbaru
- pengaplikasian api, consume api

No Issues

src/module/group/ui/drawer_group.tsx

@@ -23,7 +23,7 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean)
   async function createData() {
     try {
       const response = await funCreateGroup({ name: namaGroup })
-      
+
       if (response.success) {
         toast.success(response.message);
         setOpenDrawerGroup(false)

src/module/group/ui/edit_drawer_group.tsx

@@ -17,19 +17,13 @@ import React, { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { FaPencil, FaToggleOff } from "react-icons/fa6";
 import { IoAddCircle, IoCloseCircleOutline } from "react-icons/io5";
+import { funEditGroup, funEditStatusGroup } from "../lib/api_group";
 
-export default function EditDrawerGroup({
-  onUpdated,
-  id,
-  isActive,
-}: {
-  onUpdated: (val: boolean) => void;
-  id: string | null;
-  isActive: boolean | null;
-}) {
+export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdated: (val: boolean) => void; id: string; isActive: boolean; }) {
   const [openDrawerGroup, setOpenDrawerGroup] = useState(false);
   const [isModal, setModal] = useState(false);
   const [name, setName] = useState("");
+  const [loading, setLoading] = useState(false);
 
   async function getOneGroup() {
     try {
@@ -49,49 +43,40 @@ export default function EditDrawerGroup({
 
   async function isUpdate() {
     try {
-      const res = await fetch(API_ADDRESS.apiUpdateGroup, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          id: id,
-          name: name
-        }),
-      });
-      setOpenDrawerGroup(false);
-      onUpdated(true);
+      setLoading(true)
+      const res = await funEditGroup(id, { name });
+      if (res.success) {
+        toast.success(res.message);
+        setOpenDrawerGroup(false);
+        onUpdated(true);
+      } else {
+        toast.error(res.message)
+      }
     } catch (error) {
       console.error(error);
+      toast.error("Edit grup gagal, coba lagi nanti");
+    } finally {
+      setLoading(false);
     }
   }
 
   async function nonActive(val: boolean) {
     try {
       if (val) {
-        const res = await fetch(API_ADDRESS.apiDeleteGroup, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({
-            id,
-            isActive,
-          }),
-        });
-
-        if (res.status == 200) {
+        const res = await funEditStatusGroup(id, { isActive: isActive });
+        if (res.success) {
+          toast.success(res.message);
+          setOpenDrawerGroup(false);
           onUpdated(true);
         } else {
-          onUpdated(false);
+          toast.error(res.message)
         }
       }
       setModal(false);
     } catch (error) {
-      console.log(error);
       setModal(false);
-      toast.error("Terjadi kesalahan");
-      onUpdated(false);
+      console.error(error);
+      toast.error("Edit grup gagal, coba lagi nanti");
     }
   }
 
@@ -157,6 +142,7 @@ export default function EditDrawerGroup({
               radius={30}
               fullWidth
               onClick={isUpdate}
+              loading={loading}
             >
               Simpan
             </Button>

src/module/group/ui/list_group_active.tsx

@@ -15,16 +15,20 @@ import toast from "react-hot-toast";
 import { useShallowEffect } from "@mantine/hooks";
 import { funGetAllGroup } from "../lib/api_group";
 import { IDataGroup } from "../lib/type_group";
+import { useSearchParams } from "next/navigation";
 
 
-export default function ListGroupActive({ status }: { status: boolean }) {
+export default function ListGroupActive() {
   const [openDrawer, setOpenDrawer] = useState(false);
   const [valChoose, setValChoose] = useState("");
   const [isData, setData] = useState<IDataGroup[]>([]);
-  const [selectId, setSelectId] = useState<string | null>(null);
-  const [active, setActive] = useState<boolean | null>(null);
+  const [selectId, setSelectId] = useState<string>("");
+  const [active, setActive] = useState<boolean>(false);
   const [searchQuery, setSearchQuery] = useState('')
   const [loading, setLoading] = useState(true);
+  const searchParams = useSearchParams()
+  const status = searchParams.get('active')
+  
 
   const fetchData = async () => {
     try {
@@ -128,8 +132,7 @@ export default function ListGroupActive({ status }: { status: boolean }) {
           isActive={active}
           onUpdated={(val) => {
             if (val) {
-              toast.success("Sukses! data tersimpan");
-              // fetchData();
+              fetchData();
             }
             setOpenDrawer(false);
           }}

src/module/group/ui/tab_list_group.tsx

@@ -3,13 +3,18 @@ import { Box, Tabs, rem } from "@mantine/core";
 import { IoCloseCircleOutline } from "react-icons/io5";
 import { IoMdCheckmarkCircleOutline } from "react-icons/io";
 import ListGroupActive from "./list_group_active";
+import { useRouter, useSearchParams } from "next/navigation";
 
 export default function TabListGroup() {
   const iconStyle = { width: rem(20), height: rem(20) };
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const status = searchParams.get('active')
+
 
   return (
     <Box p={20}>
-      <Tabs variant="pills" color="#FF9861" radius="xl" defaultValue="aktif">
+      <Tabs variant="pills" color="#FF9861" radius="xl" defaultValue={(status == "false") ? "false" : "true"}>
         <Tabs.List
           bg={"white"}
           style={{
@@ -19,28 +24,23 @@ export default function TabListGroup() {
           }}
         >
           <Tabs.Tab
-            value="aktif"
+            value="true"
             w={"45%"}
             leftSection={<IoMdCheckmarkCircleOutline style={iconStyle} />}
+            onClick={() => { router.push("/group?active=true") }}
           >
             Aktif
           </Tabs.Tab>
           <Tabs.Tab
-            value="tidak-aktif"
+            value="false"
             w={"53%"}
             leftSection={<IoCloseCircleOutline style={iconStyle} />}
+            onClick={() => { router.push("/group?active=false") }}
           >
             Tidak Aktif
           </Tabs.Tab>
         </Tabs.List>
-
-        <Tabs.Panel value="aktif">
-          <ListGroupActive status={true} />
-        </Tabs.Panel>
-
-        <Tabs.Panel value="tidak-aktif">
-          <ListGroupActive status={false} />
-        </Tabs.Panel>
+        <ListGroupActive />
       </Tabs>
     </Box>
   );