Refactor ObjectTable component to improve real-time update handling
- Updated subscription methods to use more descriptive names for clarity. - Simplified the new event handler to always reload data on updates. - Enhanced code readability by restructuring useEffect dependencies and callback functions.
This commit is contained in:
parent
dcf90469f4
commit
b4763e01af
@ -57,8 +57,12 @@ const ObjectTable = forwardRef(
|
||||
ref
|
||||
) => {
|
||||
const { token } = useContext(AuthContext)
|
||||
const { fetchObjects, connected, subscribeToObject, subscribeToType } =
|
||||
useContext(ApiServerContext)
|
||||
const {
|
||||
fetchObjects,
|
||||
connected,
|
||||
subscribeToObjectUpdates,
|
||||
subscribeToObjectTypeUpdates
|
||||
} = useContext(ApiServerContext)
|
||||
const isMobile = useMediaQuery({ maxWidth: 768 })
|
||||
const navigate = useNavigate()
|
||||
var adjustedScrollHeight = scrollHeight
|
||||
@ -286,14 +290,9 @@ const ObjectTable = forwardRef(
|
||||
)
|
||||
}, [])
|
||||
|
||||
const newEventHandler = useCallback(
|
||||
(newData) => {
|
||||
if (newData.type == type) {
|
||||
reload()
|
||||
}
|
||||
},
|
||||
[reload, type]
|
||||
)
|
||||
const newEventHandler = useCallback(() => {
|
||||
reload()
|
||||
}, [reload, type])
|
||||
|
||||
// Subscribe to real-time updates for all items
|
||||
useEffect(() => {
|
||||
@ -305,7 +304,7 @@ const ObjectTable = forwardRef(
|
||||
if (page?.items && page?.items?.length > 0) {
|
||||
page.items.forEach((item) => {
|
||||
if (!item.isSkeleton) {
|
||||
const unsubscribe = subscribeToObject(
|
||||
const unsubscribe = subscribeToObjectUpdates(
|
||||
item._id,
|
||||
type,
|
||||
updateEventHandler
|
||||
@ -325,18 +324,18 @@ const ObjectTable = forwardRef(
|
||||
})
|
||||
}
|
||||
}
|
||||
}, [pages, type, subscribeToObject, updateEventHandler, connected])
|
||||
}, [pages, type, subscribeToObjectUpdates, updateEventHandler, connected])
|
||||
|
||||
useEffect(() => {
|
||||
if (connected == true) {
|
||||
const unsubscribe = subscribeToType(type, newEventHandler)
|
||||
const unsubscribe = subscribeToObjectTypeUpdates(type, newEventHandler)
|
||||
return () => {
|
||||
if (unsubscribe) {
|
||||
unsubscribe()
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [type, subscribeToType, connected, newEventHandler])
|
||||
}, [type, subscribeToObjectTypeUpdates, connected, newEventHandler])
|
||||
|
||||
const updateData = useCallback(
|
||||
(_id, updatedData) => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user