diff --git a/src/components/Dashboard/common/ObjectDisplay.jsx b/src/components/Dashboard/common/ObjectDisplay.jsx index d29eae4..88af03c 100644 --- a/src/components/Dashboard/common/ObjectDisplay.jsx +++ b/src/components/Dashboard/common/ObjectDisplay.jsx @@ -86,12 +86,18 @@ const ObjectDisplay = ({ [fetchSpotlightData, isMinimalObject, objectType] ) - // Subscribe to object updates when component mounts + const subscriptionObjectId = getStringId(object) + + // Subscribe to object updates when the object ID changes useEffect(() => { - const id = getStringId(object) - if (isValidId(id) && objectType && connected && token != null) { + if ( + isValidId(subscriptionObjectId) && + objectType && + connected && + token != null + ) { const objectUpdatesUnsubscribe = subscribeToObjectUpdates( - id, + subscriptionObjectId, objectType, updateObjectEventHandler ) @@ -101,14 +107,13 @@ const ObjectDisplay = ({ } } }, [ - object, + subscriptionObjectId, objectType, subscribeToObjectUpdates, connected, token, updateObjectEventHandler, - isValidId, - getStringId + isValidId ]) // Update local state when object prop changes diff --git a/src/components/Dashboard/common/ObjectTable.jsx b/src/components/Dashboard/common/ObjectTable.jsx index 9649ff5..e931a7c 100644 --- a/src/components/Dashboard/common/ObjectTable.jsx +++ b/src/components/Dashboard/common/ObjectTable.jsx @@ -183,6 +183,12 @@ const ObjectTable = forwardRef( const unsubscribesRef = useRef([]) const updateEventHandlerRef = useRef() const subscribeToObjectTypeUpdatesRef = useRef(null) + const subscribedTypeRef = useRef(null) + const newEventHandlerRef = useRef() + const subscriptionFilterRef = useRef() + const subscribeToObjectTypeUpdatesFnRef = useRef( + subscribeToObjectTypeUpdates + ) const prevValuesRef = useRef({ type, masterFilter }) const rowActions = @@ -611,6 +617,10 @@ const ObjectTable = forwardRef( return { ...active, ...masterFilter } }, [sidebarFilter, masterFilter]) + newEventHandlerRef.current = newEventHandler + subscriptionFilterRef.current = subscriptionFilter + subscribeToObjectTypeUpdatesFnRef.current = subscribeToObjectTypeUpdates + // Subscribe to real-time updates for all items useEffect(() => { if (pages.length > 0 && connected == true) { @@ -682,28 +692,26 @@ const ObjectTable = forwardRef( }, [connected]) useEffect(() => { - if (connected == true) { - const unsubscribe = subscribeToObjectTypeUpdates( - type, - subscriptionFilter, - newEventHandler - ) - subscribeToObjectTypeUpdatesRef.current = unsubscribe + if (connected !== true) return + if (subscribedTypeRef.current === type) return - return () => { - if (unsubscribe) unsubscribe() - if (subscribeToObjectTypeUpdatesRef.current === unsubscribe) { - subscribeToObjectTypeUpdatesRef.current = null - } + const unsubscribe = subscribeToObjectTypeUpdatesFnRef.current( + type, + subscriptionFilterRef.current, + (params) => newEventHandlerRef.current(params) + ) + subscribeToObjectTypeUpdatesRef.current = unsubscribe + subscribedTypeRef.current = type + return () => { + if (unsubscribe) unsubscribe() + if (subscribeToObjectTypeUpdatesRef.current === unsubscribe) { + subscribeToObjectTypeUpdatesRef.current = null + } + if (subscribedTypeRef.current === type) { + subscribedTypeRef.current = null } } - }, [ - type, - subscriptionFilter, - subscribeToObjectTypeUpdates, - connected, - newEventHandler - ]) + }, [type, connected]) const updateData = useCallback( (id, updatedData) => {