From 808d45273d6e655b79f7eb9e98e64e1609db3c0a Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Mon, 24 Nov 2025 03:33:57 +0000
Subject: [PATCH] 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.

---
 .../DocumentPrinters/DocumentPrinterInfo.jsx  | 305 +++++++++---------
 1 file changed, 153 insertions(+), 152 deletions(-)

diff --git a/src/components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx b/src/components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx
index 67b126d..1c92af7 100644
--- a/src/components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx
+++ b/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,122 +35,125 @@ const DocumentPrinterInfo = () => {
     'DocumentPrinterInfo',
     {
       info: true,
+      stocks: true,
       notes: true,
       auditLogs: true
     }
   )
 
+  const [objectFormState, setEditFormState] = useState({
+    isEditing: false,
+    editLoading: false,
+    formValid: false,
+    locked: false,
+    loading: false,
+    objectData: {}
+  })
+
+  const actions = {
+    reload: () => {
+      objectFormRef?.current.handleFetchObject()
+      return true
+    },
+    edit: () => {
+      objectFormRef?.current.startEditing()
+      return false
+    },
+    cancelEdit: () => {
+      objectFormRef?.current.cancelEditing()
+      return true
+    },
+    finishEdit: () => {
+      objectFormRef?.current.handleUpdate()
+      return true
+    }
+  }
+
   return (
-    <ObjectForm
-      id={documentPrinterId}
-      type='documentPrinter'
-      style={{ height: '100%' }}
-    >
-      {({
-        loading,
-        isEditing,
-        startEditing,
-        cancelEditing,
-        handleUpdate,
-        formValid,
-        objectData,
-        editLoading,
-        lock,
-        fetchObject
-      }) => {
-        // Define actions for ActionHandler
-        const actions = {
-          reload: () => {
-            fetchObject()
-            return true
-          },
-          edit: () => {
-            startEditing()
-            return false
-          },
-          cancelEdit: () => {
-            cancelEditing()
-            return true
-          },
-          finishEdit: () => {
-            handleUpdate()
-            return true
-          }
-        }
+    <>
+      <Flex
+        gap='large'
+        vertical='true'
+        style={{
+          maxHeight: '100%',
+          minHeight: 0
+        }}
+      >
+        <Flex justify={'space-between'}>
+          <Space size='middle'>
+            <Space size='small'>
+              <ObjectActions
+                type='documentPrinter'
+                id={documentPrinterId}
+                disabled={objectFormState.loading}
+                objectData={objectFormState.objectData}
+              />
+              <ViewButton
+                disabled={objectFormState.loading}
+                items={[
+                  {
+                    key: 'info',
+                    label: 'DocumentPrinter Information'
+                  },
+                  { key: 'notes', label: 'Notes' },
+                  { key: 'auditLogs', label: 'Audit Logs' }
+                ]}
+                visibleState={collapseState}
+                updateVisibleState={updateCollapseState}
+              />
+              <DocumentPrintButton
+                type='documentPrinter'
+                objectData={objectFormState.objectData}
+                disabled={objectFormState.loading}
+              />
+            </Space>
+            <LockIndicator lock={objectFormState.lock} />
+          </Space>
+          <Space>
+            <EditButtons
+              isEditing={objectFormState.isEditing}
+              handleUpdate={() => {
+                actionHandlerRef.current.callAction('finishEdit')
+              }}
+              cancelEditing={() => {
+                actionHandlerRef.current.callAction('cancelEdit')
+              }}
+              startEditing={() => {
+                actionHandlerRef.current.callAction('edit')
+              }}
+              editLoading={objectFormState.editLoading}
+              formValid={objectFormState.formValid}
+              disabled={objectFormState.lock?.locked || objectFormState.loading}
+              loading={objectFormState.editLoading}
+            />
+          </Space>
+        </Flex>
 
-        return (
-          <ActionHandler actions={actions} loading={loading}>
-            {({ callAction }) => (
-              <Flex
-                gap='large'
-                vertical='true'
-                style={{
-                  maxHeight: '100%',
-                  minHeight: 0
-                }}
+        <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) => updateCollapseState('info', expanded)}
+                collapseKey='info'
               >
-                <Flex justify={'space-between'}>
-                  <Space size='middle'>
-                    <Space size='small'>
-                      <ObjectActions
-                        type='documentPrinter'
-                        id={documentPrinterId}
-                        disabled={loading}
-                        objectData={objectData}
-                      />
-                      <ViewButton
-                        disabled={loading}
-                        items={[
-                          {
-                            key: 'info',
-                            label: 'DocumentPrinter Information'
-                          },
-                          { key: 'stocks', label: 'DocumentPrinter Stocks' },
-                          { key: 'notes', label: 'Notes' },
-                          { key: 'auditLogs', label: 'Audit Logs' }
-                        ]}
-                        visibleState={collapseState}
-                        updateVisibleState={updateCollapseState}
-                      />
-                      <DocumentPrintButton
-                        type='documentPrinter'
-                        objectData={objectData}
-                        disabled={loading}
-                      />
-                    </Space>
-                    <LockIndicator lock={lock} />
-                  </Space>
-                  <Space>
-                    <EditButtons
-                      isEditing={isEditing}
-                      handleUpdate={() => {
-                        callAction('finishEdit')
-                      }}
-                      cancelEditing={() => {
-                        callAction('cancelEdit')
-                      }}
-                      startEditing={() => {
-                        callAction('edit')
-                      }}
-                      editLoading={editLoading}
-                      formValid={formValid}
-                      disabled={lock?.locked || loading}
-                      loading={editLoading}
-                    />
-                  </Space>
-                </Flex>
-
-                <div style={{ height: '100%', overflowY: 'scroll' }}>
-                  <Flex vertical gap={'large'}>
-                    <InfoCollapse
-                      title='Document Printer Information'
-                      icon={<InfoCircleIcon />}
-                      active={collapseState.info}
-                      onToggle={(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,52 +161,47 @@ const DocumentPrinterInfo = () => {
                         type='documentPrinter'
                         objectData={objectData}
                       />
-                    </InfoCollapse>
+                    )
+                  }}
+                </ObjectForm>
+              </InfoCollapse>
+            </ActionHandler>
 
-                    <InfoCollapse
-                      title='Notes'
-                      icon={<NoteIcon />}
-                      active={collapseState.notes}
-                      onToggle={(expanded) =>
-                        updateCollapseState('notes', expanded)
-                      }
-                      collapseKey='notes'
-                    >
-                      <Card>
-                        <NotesPanel
-                          _id={documentPrinterId}
-                          type='documentPrinter'
-                        />
-                      </Card>
-                    </InfoCollapse>
+            <InfoCollapse
+              title='Notes'
+              icon={<NoteIcon />}
+              active={collapseState.notes}
+              onToggle={(expanded) => updateCollapseState('notes', expanded)}
+              collapseKey='notes'
+            >
+              <Card>
+                <NotesPanel _id={documentPrinterId} type='documentPrinter' />
+              </Card>
+            </InfoCollapse>
 
-                    <InfoCollapse
-                      title='Audit Logs'
-                      icon={<AuditLogIcon />}
-                      active={collapseState.auditLogs}
-                      onToggle={(expanded) =>
-                        updateCollapseState('auditLogs', expanded)
-                      }
-                      collapseKey='auditLogs'
-                    >
-                      {loading ? (
-                        <InfoCollapsePlaceholder />
-                      ) : (
-                        <ObjectTable
-                          type='auditLog'
-                          masterFilter={{ 'parent._id': documentPrinterId }}
-                          visibleColumns={{ _id: false, 'parent._id': false }}
-                        />
-                      )}
-                    </InfoCollapse>
-                  </Flex>
-                </div>
-              </Flex>
-            )}
-          </ActionHandler>
-        )
-      }}
-    </ObjectForm>
+            <InfoCollapse
+              title='Audit Logs'
+              icon={<AuditLogIcon />}
+              active={collapseState.auditLogs}
+              onToggle={(expanded) =>
+                updateCollapseState('auditLogs', expanded)
+              }
+              collapseKey='auditLogs'
+            >
+              {objectFormState.loading ? (
+                <InfoCollapsePlaceholder />
+              ) : (
+                <ObjectTable
+                  type='auditLog'
+                  masterFilter={{ 'parent._id': documentPrinterId }}
+                  visibleColumns={{ _id: false, 'parent._id': false }}
+                />
+              )}
+            </InfoCollapse>
+          </Flex>
+        </div>
+      </Flex>
+    </>
   )
 }