feat : update validasi

src/module/group/lib/val_group.ts

@@ -0,0 +1,3 @@
+import { hookstate } from "@hookstate/core";
+
+export const globalRefreshGroup = hookstate<boolean>(false);

src/module/group/ui/drawer_group.tsx

@@ -1,25 +1,25 @@
-import { LayoutDrawer, TEMA, WARNA } from "@/module/_global";
+import { LayoutDrawer, TEMA } from "@/module/_global";
+import { useHookstate } from "@hookstate/core";
 import {
   Box,
   Button,
-  Center,
   Flex,
-  Group,
   SimpleGrid,
   Stack,
   Text,
-  TextInput,
+  TextInput
 } from "@mantine/core";
-import React, { useState } from "react";
+import { useState } from "react";
+import toast from "react-hot-toast";
 import { IoAddCircle } from "react-icons/io5";
 import { funCreateGroup } from "../lib/api_group";
-import toast from "react-hot-toast";
-import { useHookstate } from "@hookstate/core";
+import { globalRefreshGroup } from "../lib/val_group";
 
 export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean) => void; }) {
   const [openDrawerGroup, setOpenDrawerGroup] = useState(false);
   const [namaGroup, setNamaGroup] = useState("");
   const tema = useHookstate(TEMA)
+  const refresh = useHookstate(globalRefreshGroup)
   const [touched, setTouched] = useState({
     name: false,
   });
@@ -31,6 +31,7 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean)
 
       if (response.success) {
         toast.success(response.message);
+        refresh.set(!refresh.get())
         setOpenDrawerGroup(false)
         onSuccess(true)
       } else {
@@ -43,6 +44,23 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean)
     }
   }
 
+  function onCheck() {
+    if (Object.values(touched).some((v) => v == true))
+      return false
+    createData()
+  }
+
+  function onValidation(kategori: string, val: string) {
+    if (kategori == 'name') {
+      setNamaGroup(val)
+      if (val == "" || val.length < 3) {
+        setTouched({ ...touched, name: true })
+      } else {
+        setTouched({ ...touched, name: false })
+      }
+    } 
+  }
+
   return (
     <Box>
       <Stack pt={10}>
@@ -80,11 +98,14 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean)
             required
             placeholder="Grup"
             onChange={(e) => {
-              setNamaGroup(e.target.value)
-              setTouched({ ...touched, name: false })
+              onValidation('name', e.target.value)
             }}
-            error={touched.name ? "Error! harus memasukkan grup" : ""}
-            onBlur={() => setTouched({ ...touched, name: true })}
+            error={
+              touched.name &&
+              (namaGroup == "" ? "Error! harus memasukkan grup" :
+                namaGroup.length < 3 ? "Masukkan Minimal 3 karakter" : ""
+              )
+            }
           />
           <Box mt={"xl"}>
             <Button
@@ -93,7 +114,7 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean)
               size="lg"
               radius={30}
               fullWidth
-              onClick={createData}
+              onClick={() => { onCheck() }}
             >
               Simpan
             </Button>

src/module/group/ui/edit_drawer_group.tsx

@@ -1,30 +1,29 @@
 "use client";
-import { LayoutDrawer, TEMA, WARNA } from "@/module/_global";
+import { LayoutDrawer, TEMA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
+import { useHookstate } from "@hookstate/core";
 import {
   Box,
   Button,
-  Center,
   Flex,
-  Group,
   SimpleGrid,
   Stack,
   Text,
-  TextInput,
+  TextInput
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
-import React, { useEffect, useState } from "react";
+import { 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, funGetGroupById } from "../lib/api_group";
-import { useHookstate } from "@hookstate/core";
+import { globalRefreshGroup } from "../lib/val_group";
 
 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);
+  const refresh = useHookstate(globalRefreshGroup)
   const tema = useHookstate(TEMA)
   const [touched, setTouched] = useState({
     name: false,
@@ -57,6 +56,7 @@ export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdate
       const res = await funEditGroup(id, { name });
       if (res.success) {
         toast.success(res.message);
+        refresh.set(!refresh.get())
         setOpenDrawerGroup(false);
         onUpdated(true);
       } else {
@@ -70,6 +70,23 @@ export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdate
     }
   }
 
+  function onCheck() {
+    if (Object.values(touched).some((v) => v == true))
+      return false
+    isUpdate()
+  }
+
+  function onValidation(kategori: string, val: string) {
+    if (kategori == 'name') {
+      setName(val)
+      if (val == "" || val.length < 3) {
+        setTouched({ ...touched, name: true })
+      } else {
+        setTouched({ ...touched, name: false })
+      }
+    }
+  }
+
   async function nonActive(val: boolean) {
     try {
       if (val) {
@@ -141,17 +158,18 @@ export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdate
             size="lg"
             value={name}
             onChange={(e) => {
-              setName(e.target.value)
-              setTouched({ ...touched, name: false })
+              onValidation('name', e.target.value)
             }}
-            onBlur={() => setTouched({ ...touched, name: true })}
-            error={touched.name ? "Error! harus memasukkan grup" : ""}
+            error={
+              touched.name &&
+              (name == "" ? "Error! harus memasukkan grup" :
+                name.length < 3 ? "Masukkan Minimal 3 karakter" : ""
+              )
+            }
             radius={10}
             placeholder="Grup"
             label="Grup"
             required
-
-
           />
           <Box mt={"xl"}>
             <Button
@@ -160,7 +178,7 @@ export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdate
               size="lg"
               radius={30}
               fullWidth
-              onClick={isUpdate}
+              onClick={() => { onCheck() }}
               loading={loading}
             >
               Simpan

src/module/group/ui/list_group_active.tsx

@@ -20,6 +20,7 @@ import { IDataGroup } from "../lib/type_group";
 import { useSearchParams } from "next/navigation";
 import _ from "lodash";
 import { useHookstate } from "@hookstate/core";
+import { globalRefreshGroup } from "../lib/val_group";
 
 
 export default function ListGroupActive() {
@@ -31,6 +32,7 @@ export default function ListGroupActive() {
   const [searchQuery, setSearchQuery] = useState('')
   const [loading, setLoading] = useState(true);
   const searchParams = useSearchParams()
+  const refresh = useHookstate(globalRefreshGroup)
   const status = searchParams.get('active')
   const tema = useHookstate(TEMA)
 
@@ -59,7 +61,7 @@ export default function ListGroupActive() {
 
   useShallowEffect(() => {
     fetchData();
-  }, [status, searchQuery]);
+  }, [status, searchQuery, refresh.get()]);
 
   return (
     <Box pt={20}>