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,62 +91,6 @@ 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 handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    if (
-      formField.name.trim() === '' ||
-      formField.description.trim() === '' ||
-      formField.type.trim() === '' ||
-      formField.status.trim() === '' ||
-      formField.transactionTypeId.trim() === '' ||
-      formField.agentId.trim() === ''
-    ) {
-      setAlert({ show: true, message: 'Please fill in all required fields.' });
-      return;
-    }
-
-    doUpdateProvider(e);
-    // console.log(formField);
-    setAlert({ show: false, message: '' });
-  };
-
-  useEffect(() => {
-    if (selectedProvider) {
-      doFetchData();
-    }
-  }, [selectedProvider]);
-
-  useEffect(() => {
-    if (showEditDialog) {
-      setFormField({
-        ...formField,
-        updated_by: parsedUser.username,
-        updated_at: formattedTime
-      });
-    }
-  }, [formattedTime]);
-
-  useEffect(() => {
   const getCustomerList = async (sorting: any) => {
     try {
       sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
@@ -182,6 +126,65 @@ const EditDialog = () => {
     }
   };
 
+  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
+      }));
+    }
+  }, []);
+
+  const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (
+      formField.name.trim() === '' ||
+      formField.description.trim() === '' ||
+      formField.type.trim() === '' ||
+      formField.status.trim() === '' ||
+      formField.transactionTypeId.trim() === '' ||
+      formField.agentId.trim() === ''
+    ) {
+      setAlert({ show: true, message: 'Please fill in all required fields.' });
+      return;
+    }
+
+    doUpdateProvider(e);
+    // console.log(formField);
+    setAlert({ show: false, message: '' });
+  };
+
+  useEffect(() => {
+    if (showEditDialog === false) {
+      resetForm();
+    }
+  }, [showEditDialog]);
+
+  useEffect(() => {
+    if (selectedProvider) {
+      doFetchData(selectedProvider);
+    }
+  }, [selectedProvider]);
+
+  useEffect(() => {
+    if (showEditDialog) {
+      setFormField({
+        ...formField,
+        updated_by: parsedUser.username,
+        updated_at: formattedTime
+      });
+    }
+  }, [formattedTime]);
+
+  useEffect(() => {
     getCustomerList([{ id: 'msisdn', desc: false }]);
     getTransactionTypeList([{ id: 'name', desc: false }]);
   }, []);