Refactor DocumentPrinterInfo component to improve state management and enhance editing functionality. Introduce useRef for action handling and object form references, and update the rendering logic for better performance and user experience.

src/components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx

@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Space, Flex, Card } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -25,6 +26,8 @@ log.setLevel(config.logLevel)
 
 const DocumentPrinterInfo = () => {
   const location = useLocation()
+  const objectFormRef = useRef(null)
+  const actionHandlerRef = useRef(null)
   const documentPrinterId = new URLSearchParams(location.search).get(
     'documentPrinterId'
   )
@@ -32,52 +35,42 @@ const DocumentPrinterInfo = () => {
     'DocumentPrinterInfo',
     {
       info: true,
+      stocks: true,
       notes: true,
       auditLogs: true
     }
   )
 
-  return (
+  const [objectFormState, setEditFormState] = useState({
-    <ObjectForm
+    isEditing: false,
-      id={documentPrinterId}
+    editLoading: false,
-      type='documentPrinter'
+    formValid: false,
-      style={{ height: '100%' }}
+    locked: false,
-    >
+    loading: false,
-      {({
+    objectData: {}
-        loading,
+  })
-        isEditing,
+
-        startEditing,
-        cancelEditing,
-        handleUpdate,
-        formValid,
-        objectData,
-        editLoading,
-        lock,
-        fetchObject
-      }) => {
-        // Define actions for ActionHandler
   const actions = {
     reload: () => {
-            fetchObject()
+      objectFormRef?.current.handleFetchObject()
       return true
     },
     edit: () => {
-            startEditing()
+      objectFormRef?.current.startEditing()
       return false
     },
     cancelEdit: () => {
-            cancelEditing()
+      objectFormRef?.current.cancelEditing()
       return true
     },
     finishEdit: () => {
-            handleUpdate()
+      objectFormRef?.current.handleUpdate()
       return true
     }
   }
 
   return (
-          <ActionHandler actions={actions} loading={loading}>
+    <>
-            {({ callAction }) => (
       <Flex
         gap='large'
         vertical='true'
@@ -92,17 +85,16 @@ const DocumentPrinterInfo = () => {
               <ObjectActions
                 type='documentPrinter'
                 id={documentPrinterId}
-                        disabled={loading}
+                disabled={objectFormState.loading}
-                        objectData={objectData}
+                objectData={objectFormState.objectData}
               />
               <ViewButton
-                        disabled={loading}
+                disabled={objectFormState.loading}
                 items={[
                   {
                     key: 'info',
                     label: 'DocumentPrinter Information'
                   },
-                          { key: 'stocks', label: 'DocumentPrinter Stocks' },
                   { key: 'notes', label: 'Notes' },
                   { key: 'auditLogs', label: 'Audit Logs' }
                 ]}
@@ -111,43 +103,57 @@ const DocumentPrinterInfo = () => {
               />
               <DocumentPrintButton
                 type='documentPrinter'
-                        objectData={objectData}
+                objectData={objectFormState.objectData}
-                        disabled={loading}
+                disabled={objectFormState.loading}
               />
             </Space>
-                    <LockIndicator lock={lock} />
+            <LockIndicator lock={objectFormState.lock} />
           </Space>
           <Space>
             <EditButtons
-                      isEditing={isEditing}
+              isEditing={objectFormState.isEditing}
               handleUpdate={() => {
-                        callAction('finishEdit')
+                actionHandlerRef.current.callAction('finishEdit')
               }}
               cancelEditing={() => {
-                        callAction('cancelEdit')
+                actionHandlerRef.current.callAction('cancelEdit')
               }}
               startEditing={() => {
-                        callAction('edit')
+                actionHandlerRef.current.callAction('edit')
               }}
-                      editLoading={editLoading}
+              editLoading={objectFormState.editLoading}
-                      formValid={formValid}
+              formValid={objectFormState.formValid}
-                      disabled={lock?.locked || loading}
+              disabled={objectFormState.lock?.locked || objectFormState.loading}
-                      loading={editLoading}
+              loading={objectFormState.editLoading}
             />
           </Space>
         </Flex>
 
         <div style={{ height: '100%', overflowY: 'scroll' }}>
           <Flex vertical gap={'large'}>
+            <ActionHandler
+              actions={actions}
+              loading={objectFormState.loading}
+              ref={actionHandlerRef}
+            >
               <InfoCollapse
                 title='Document Printer Information'
                 icon={<InfoCircleIcon />}
                 active={collapseState.info}
-                      onToggle={(expanded) =>
+                onToggle={(expanded) => updateCollapseState('info', expanded)}
-                        updateCollapseState('info', expanded)
-                      }
                 collapseKey='info'
               >
+                <ObjectForm
+                  id={documentPrinterId}
+                  type='documentPrinter'
+                  style={{ height: '100%' }}
+                  ref={objectFormRef}
+                  onStateChange={(state) => {
+                    setEditFormState((prev) => ({ ...prev, ...state }))
+                  }}
+                >
+                  {({ loading, isEditing, objectData }) => {
+                    return (
                       <ObjectInfo
                         loading={loading}
                         indicator={<LoadingOutlined />}
@@ -155,22 +161,21 @@ const DocumentPrinterInfo = () => {
                         type='documentPrinter'
                         objectData={objectData}
                       />
+                    )
+                  }}
+                </ObjectForm>
               </InfoCollapse>
+            </ActionHandler>
 
             <InfoCollapse
               title='Notes'
               icon={<NoteIcon />}
               active={collapseState.notes}
-                      onToggle={(expanded) =>
+              onToggle={(expanded) => updateCollapseState('notes', expanded)}
-                        updateCollapseState('notes', expanded)
-                      }
               collapseKey='notes'
             >
               <Card>
-                        <NotesPanel
+                <NotesPanel _id={documentPrinterId} type='documentPrinter' />
-                          _id={documentPrinterId}
-                          type='documentPrinter'
-                        />
               </Card>
             </InfoCollapse>
 
@@ -183,7 +188,7 @@ const DocumentPrinterInfo = () => {
               }
               collapseKey='auditLogs'
             >
-                      {loading ? (
+              {objectFormState.loading ? (
                 <InfoCollapsePlaceholder />
               ) : (
                 <ObjectTable
@@ -196,11 +201,7 @@ const DocumentPrinterInfo = () => {
           </Flex>
         </div>
       </Flex>
-            )}
+    </>
-          </ActionHandler>
-        )
-      }}
-    </ObjectForm>
   )
 }