Refactor ObjectSelect component to improve state management and UI structure; add useRef for tracking previous values and enhance rendering with additional div wrapper for ObjectProperty.

This commit is contained in:
Tom Butcher 2025-09-05 23:20:50 +01:00
parent e2a96949b3
commit 09bf3b81c7

View File

@ -1,4 +1,11 @@
import { useEffect, useState, useContext, useCallback, useMemo } from 'react' import {
useEffect,
useState,
useContext,
useCallback,
useMemo,
useRef
} from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { TreeSelect, Space, Button, Input } from 'antd' import { TreeSelect, Space, Button, Input } from 'antd'
import ReloadIcon from '../../Icons/ReloadIcon' import ReloadIcon from '../../Icons/ReloadIcon'
@ -72,14 +79,16 @@ const ObjectSelect = ({
}) })
return { return {
title: ( title: (
<ObjectProperty <div style={{ paddingTop: '1px' }}>
key={object._id} <ObjectProperty
type='object' key={object._id}
value={object} type='object'
objectType={type} value={object}
objectData={object} objectType={type}
isEditing={false} objectData={object}
/> isEditing={false}
/>
</div>
), ),
value: object._id, value: object._id,
key: object._id, key: object._id,
@ -199,7 +208,7 @@ const ObjectSelect = ({
return prev return prev
}) })
} }
}, [objectPropertiesTree, properties, type, buildTreeData]) }, [objectPropertiesTree, properties, buildTreeData])
useEffect(() => { useEffect(() => {
if (value && typeof value === 'object' && value !== null && !initialized) { if (value && typeof value === 'object' && value !== null && !initialized) {
@ -236,6 +245,24 @@ const ObjectSelect = ({
token token
]) ])
const prevValuesRef = useRef({ type, masterFilter })
useEffect(() => {
const prevValues = prevValuesRef.current
// Deep comparison for objects, simple comparison for primitives
const hasChanged =
prevValues.type !== type ||
JSON.stringify(prevValues.masterFilter) !== JSON.stringify(masterFilter)
if (hasChanged) {
setObjectPropertiesTree({})
setTreeData([])
setInitialized(false)
prevValuesRef.current = { type, masterFilter }
}
}, [type, masterFilter])
// --- Error UI --- // --- Error UI ---
if (error) { if (error) {
return ( return (