70 lines
1.9 KiB
JavaScript
70 lines
1.9 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import { Typography, Flex, Badge } from 'antd'
|
|
import { useState, useEffect, useContext, useCallback } from 'react'
|
|
import { getModelByName } from '../../../database/ObjectModels'
|
|
import { ApiServerContext } from '../context/ApiServerContext'
|
|
import { AuthContext } from '../context/AuthContext'
|
|
import merge from 'lodash/merge'
|
|
|
|
const { Text } = Typography
|
|
|
|
const ObjectDisplay = ({ object, objectType }) => {
|
|
const [objectData, setObjectData] = useState(object)
|
|
const { subscribeToObjectUpdates, connected } = useContext(ApiServerContext)
|
|
const { token } = useContext(AuthContext)
|
|
|
|
// Update event handler
|
|
const updateObjectEventHandler = useCallback((value) => {
|
|
setObjectData((prev) => merge({}, prev, value))
|
|
}, [])
|
|
|
|
// Subscribe to object updates when component mounts
|
|
useEffect(() => {
|
|
if (object?._id && objectType && connected && token) {
|
|
const objectUpdatesUnsubscribe = subscribeToObjectUpdates(
|
|
object._id,
|
|
objectType,
|
|
updateObjectEventHandler
|
|
)
|
|
|
|
return () => {
|
|
if (objectUpdatesUnsubscribe) objectUpdatesUnsubscribe()
|
|
}
|
|
}
|
|
}, [
|
|
object?._id,
|
|
objectType,
|
|
subscribeToObjectUpdates,
|
|
connected,
|
|
token,
|
|
updateObjectEventHandler
|
|
])
|
|
|
|
// Update local state when object prop changes
|
|
useEffect(() => {
|
|
setObjectData(object)
|
|
}, [object])
|
|
|
|
if (!objectData) {
|
|
return <Text type='secondary'>n/a</Text>
|
|
}
|
|
|
|
const model = getModelByName(objectType)
|
|
const Icon = model.icon
|
|
return (
|
|
<Flex gap={'small'} align='center'>
|
|
<Icon />
|
|
{objectData?.color ? <Badge color={objectData?.color} /> : null}
|
|
<Text ellipsis>{objectData?.name ? objectData.name : null}</Text>
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
ObjectDisplay.propTypes = {
|
|
object: PropTypes.object,
|
|
objectType: PropTypes.string,
|
|
style: PropTypes.object
|
|
}
|
|
|
|
export default ObjectDisplay
|