fix fill edit formField

src/pages/master/profession/blocks/EditDialog.tsx

@@ -20,7 +20,7 @@ const API_URL = apiConfig.service_master_data;
 const EditDialog = () => {
   const { showEditDialog, handleEditDialog, selectedProfession } = useManageProfessionContext();
   const { reload } = useDataGrid();
-  const { PutData } = useCallApi();
+  const { PutData, GetData } = useCallApi();
   const parsedUser = getAuth()?.user;
   const created_time = new Date();
   const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
@@ -62,6 +62,19 @@ const EditDialog = () => {
     [selectedProfession, formField]
   );
 
+  const doFetchData = useCallback(async (id: string) => {
+    const response = await GetData(`${API_URL}/profession/getdata/${id}`, { id });
+
+    if (response?.status) {
+      setFormField((prev) => ({
+        ...prev,
+        name: response.data.name
+      }));
+    } else {
+      setFormField(initialState);
+    }
+  }, []);
+
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
@@ -75,6 +88,12 @@ const EditDialog = () => {
     setAlert({ show: false, message: '' });
   };
 
+  useEffect(() => {
+    if (selectedProfession) {
+      doFetchData(selectedProfession);
+    }
+  }, [selectedProfession]);
+
   useEffect(() => {
     if (showEditDialog) {
       setFormField({
@@ -85,6 +104,12 @@ const EditDialog = () => {
     }
   }, [formattedTime]);
 
+  useEffect(() => {
+    if (showEditDialog === false) {
+      resetForm();
+    }
+  }, [showEditDialog]);
+
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
       <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">

src/pages/master/provider/blocks/EditDialog.tsx

@@ -91,22 +91,54 @@ const EditDialog = () => {
     [selectedProvider, formField]
   );
 
-  const doFetchData = useCallback(async () => {
-    if (selectedProvider) {
-      const data = provider.find((item) => item.id === selectedProvider);
-      if (data) {
-        setFormField((prev) => ({
-          ...prev,
-          name: data.name,
-          description: data.description,
-          type: data.type,
-          status: data.status,
-          transactionTypeId: data.transactionTypeId,
-          agentId: data.agentId
-        }));
-      }
-    } else {
-      resetForm();
+  const getCustomerList = async (sorting: any) => {
+    try {
+      sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+      const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
+        limit: 100,
+        page: 1,
+        with_deleted: false,
+        order_field: sorting[0].id,
+        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+      });
+
+      // console.log('CUSTOMER: ', response?.data);
+      setCustomers(response?.data.list);
+    } catch (error) {
+      console.error('Error fetching customer', error);
+    }
+  };
+
+  const getTransactionTypeList = async (sorting: any) => {
+    try {
+      const response = await GetData(`${API_URL_TRANSACTION}/transactiontype/list`, {
+        limit: 100,
+        page: 1,
+        with_deleted: false,
+        order_field: sorting[0].id,
+        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+      });
+
+      // console.log('TRANSACTION TYPE: ', response?.data);
+      setTransactions(response?.data.list);
+    } catch (error) {
+      console.error('Error fetching transaction type', error);
+    }
+  };
+
+  const doFetchData = useCallback(async (id: string) => {
+    const response = await GetData(`${API_URL_MASTERDATA}/provider/getdata/${id}`, { id });
+
+    if (response?.status) {
+      setFormField((prev) => ({
+        ...prev,
+        name: response?.data.name,
+        description: response?.data.description,
+        type: response?.data.type,
+        status: response?.data.status,
+        transactionTypeId: response?.data.transactionTypeId,
+        agentId: response?.data.agentId
+      }));
     }
   }, []);
 
@@ -130,9 +162,15 @@ const EditDialog = () => {
     setAlert({ show: false, message: '' });
   };
 
+  useEffect(() => {
+    if (showEditDialog === false) {
+      resetForm();
+    }
+  }, [showEditDialog]);
+
   useEffect(() => {
     if (selectedProvider) {
-      doFetchData();
+      doFetchData(selectedProvider);
     }
   }, [selectedProvider]);
 
@@ -147,41 +185,6 @@ const EditDialog = () => {
   }, [formattedTime]);
 
   useEffect(() => {
-    const getCustomerList = async (sorting: any) => {
-      try {
-        sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
-        const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
-          limit: 100,
-          page: 1,
-          with_deleted: false,
-          order_field: sorting[0].id,
-          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
-        });
-
-        // console.log('CUSTOMER: ', response?.data);
-        setCustomers(response?.data.list);
-      } catch (error) {
-        console.error('Error fetching customer', error);
-      }
-    };
-
-    const getTransactionTypeList = async (sorting: any) => {
-      try {
-        const response = await GetData(`${API_URL_TRANSACTION}/transactiontype/list`, {
-          limit: 100,
-          page: 1,
-          with_deleted: false,
-          order_field: sorting[0].id,
-          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
-        });
-
-        // console.log('TRANSACTION TYPE: ', response?.data);
-        setTransactions(response?.data.list);
-      } catch (error) {
-        console.error('Error fetching transaction type', error);
-      }
-    };
-
     getCustomerList([{ id: 'msisdn', desc: false }]);
     getTransactionTypeList([{ id: 'name', desc: false }]);
   }, []);