Refactor ActionHandler and EditObjectForm components to support forward refs and improve functionality

- Updated ActionHandler to use forwardRef, allowing parent components to access the callAction method.
- Enhanced EditObjectForm with forwardRef, enabling external control over editing state and form handling.
- Added onEdit and onStateChange props to EditObjectForm for better integration with parent components.
- Improved form validation and state management within EditObjectForm, ensuring a smoother user experience.
- Cleaned up code for better readability and maintainability.

src/components/Dashboard/common/ActionHandler.jsx

@@ -1,15 +1,19 @@
-import React, { useEffect, useRef } from 'react'
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import PropTypes from 'prop-types'
 
-const ActionHandler = ({
+const ActionHandler = forwardRef(
+  (
+    {
       children,
       actions = {},
       actionParam = 'action',
       clearAfterExecute = true,
       onAction,
       loading = true
-}) => {
+    },
+    ref
+  ) => {
     const location = useLocation()
     const navigate = useNavigate()
     const action = new URLSearchParams(location.search).get(actionParam)
@@ -36,6 +40,7 @@ const ActionHandler = ({
       ) {
         // Execute the action
         const result = actions[action]()
+
         // Mark this action as executed
         lastExecutedAction.current = action
         // Call optional callback
@@ -66,9 +71,16 @@ const ActionHandler = ({
       navigate
     ])
 
+    useImperativeHandle(ref, () => ({
+      callAction
+    }))
+
     // Return null as this is a utility component
-  return <>{children({ callAction })}</>
+    return children
-}
+  }
+)
+
+ActionHandler.displayName = 'ActionHandler'
 
 ActionHandler.propTypes = {
   children: PropTypes.func,

src/components/Dashboard/common/EditObjectForm.jsx

@@ -1,4 +1,11 @@
-import React, { useState, useEffect, useContext, useCallback } from 'react'
+import React, {
+  useState,
+  useEffect,
+  useContext,
+  useCallback,
+  forwardRef,
+  useImperativeHandle
+} from 'react'
 import { Form, message } from 'antd'
 import { ApiServerContext } from '../context/ApiServerContext'
 import { AuthContext } from '../context/AuthContext'
@@ -18,7 +25,8 @@ import merge from 'lodash/merge'
  *     loading, isEditing, startEditing, cancelEditing, handleUpdate, form, formValid, objectData, setIsEditing, setObjectData
  *   }) => ReactNode
  */
-const EditObjectForm = ({ id, type, style, children }) => {
+const EditObjectForm = forwardRef(
+  ({ id, type, style, children, onEdit, onStateChange }, ref) => {
     const [objectData, setObjectData] = useState(null)
     const [serverObjectData, setServerObjectData] = useState(null)
     const [fetchLoading, setFetchLoading] = useState(true)
@@ -41,16 +49,22 @@ const EditObjectForm = ({ id, type, style, children }) => {
       fetchObjectLock,
       showError,
       connected,
-    subscribeToObject,
+      subscribeToObjectUpdates,
-    subscribeToLock
+      subscribeToObjectLock
     } = useContext(ApiServerContext)
     const { token } = useContext(AuthContext)
     // Validate form on change
     useEffect(() => {
       form
         .validateFields({ validateOnly: true })
-      .then(() => setFormValid(true))
+        .then(() => {
-      .catch(() => setFormValid(false))
+          setFormValid(true)
+          onStateChange({ formValid: true })
+        })
+        .catch(() => {
+          setFormValid(false)
+          onStateChange({ formValid: true })
+        })
     }, [form, formUpdateValues])
 
     // Cleanup on unmount
@@ -65,13 +79,16 @@ const EditObjectForm = ({ id, type, style, children }) => {
     const handleFetchObject = useCallback(async () => {
       try {
         setFetchLoading(true)
+        onStateChange({ loading: true })
         const data = await fetchObject(id, type)
         const lockEvent = await fetchObjectLock(id, type)
         setLock(lockEvent)
+        onStateChange({ lock: lockEvent })
         setObjectData(data)
         setServerObjectData(data)
         form.setFieldsValue(data)
         setFetchLoading(false)
+        onStateChange({ loading: false })
       } catch (err) {
         messageApi.error('Failed to fetch object info')
         showError(
@@ -88,7 +105,10 @@ const EditObjectForm = ({ id, type, style, children }) => {
 
     // Update event handler
     const updateLockEventHandler = useCallback((value) => {
-    setLock((prev) => ({ ...prev, ...value }))
+      setLock((prev) => {
+        onStateChange({ lock: { ...prev, ...value } })
+        return { ...prev, ...value }
+      })
     }, [])
 
     useEffect(() => {
@@ -100,22 +120,26 @@ const EditObjectForm = ({ id, type, style, children }) => {
 
     useEffect(() => {
       if (id && connected) {
-      const objectUnsubscribe = subscribeToObject(
+        const objectUpdatesUnsubscribe = subscribeToObjectUpdates(
           id,
           type,
           updateObjectEventHandler
         )
-      const lockUnsubscribe = subscribeToLock(id, type, updateLockEventHandler)
+        const lockUnsubscribe = subscribeToObjectLock(
+          id,
+          type,
+          updateLockEventHandler
+        )
         return () => {
-        if (objectUnsubscribe) objectUnsubscribe()
+          if (objectUpdatesUnsubscribe) objectUpdatesUnsubscribe()
           if (lockUnsubscribe) lockUnsubscribe()
         }
       }
     }, [
       id,
       type,
-    subscribeToObject,
+      subscribeToObjectUpdates,
-    subscribeToLock,
+      subscribeToObjectLock,
       updateObjectEventHandler,
       connected,
       updateLockEventHandler
@@ -123,6 +147,7 @@ const EditObjectForm = ({ id, type, style, children }) => {
 
     const startEditing = () => {
       setIsEditing(true)
+      onStateChange({ isEditing: true })
       lockObject(id, type)
     }
 
@@ -132,6 +157,7 @@ const EditObjectForm = ({ id, type, style, children }) => {
         setObjectData(serverObjectData)
       }
       setIsEditing(false)
+      onStateChange({ isEditing: false })
       unlockObject(id, type)
     }
 
@@ -139,9 +165,11 @@ const EditObjectForm = ({ id, type, style, children }) => {
       try {
         const value = await form.validateFields()
         setEditLoading(true)
+        onStateChange({ editLoading: true })
         await updateObject(id, type, value)
         setObjectData({ ...objectData, ...value })
         setIsEditing(false)
+        onStateChange({ isEditing: false })
         messageApi.success('Information updated successfully')
       } catch (err) {
         if (err.errorFields) {
@@ -155,6 +183,7 @@ const EditObjectForm = ({ id, type, style, children }) => {
       } finally {
         handleFetchObject()
         setEditLoading(false)
+        onStateChange({ editLoading: false })
       }
     }
 
@@ -180,6 +209,20 @@ const EditObjectForm = ({ id, type, style, children }) => {
       }
     }
 
+    useImperativeHandle(ref, () => ({
+      startEditing,
+      cancelEditing,
+      handleUpdate,
+      handleDelete,
+      confirmDelete,
+      handleFetchObject,
+      editLoading,
+      fetchLoading,
+      isEditing,
+      objectData,
+      lock
+    }))
+
     return (
       <>
         <DeleteObjectModal
@@ -195,7 +238,12 @@ const EditObjectForm = ({ id, type, style, children }) => {
           layout='vertical'
           style={style}
           onValuesChange={(values) => {
-          setObjectData((prev) => ({ ...prev, ...values }))
+            if (onEdit != undefined) {
+              onEdit(values)
+            }
+            setObjectData((prev) => {
+              return { ...prev, ...values }
+            })
           }}
         >
           {contextHolder}
@@ -218,13 +266,18 @@ const EditObjectForm = ({ id, type, style, children }) => {
         </Form>
       </>
     )
-}
+  }
+)
+
+EditObjectForm.displayName = 'EditObjectForm'
 
 EditObjectForm.propTypes = {
   id: PropTypes.string.isRequired,
   type: PropTypes.string.isRequired,
   children: PropTypes.func.isRequired,
-  style: PropTypes.object
+  style: PropTypes.object,
+  onEdit: PropTypes.func,
+  onStateChange: PropTypes.func
 }
 
 export default EditObjectForm