Integrate AuthContext into ObjectKanban and ObjectTimeline for Enhanced Subscription Management

- Added AuthContext to both ObjectKanban and ObjectTimeline components to manage subscriptions based on user authentication status.
- Updated useEffect hooks to conditionally subscribe to updates only when the user is connected and authenticated, improving performance and reliability.
- Refactored dependency arrays in useEffect hooks to include token checks, ensuring proper cleanup and subscription management.
This commit is contained in:
Tom Butcher 2026-09-05 01:58:55 +01:00
parent fe2d257653
commit 4cae70b5e8
2 changed files with 23 additions and 9 deletions

View File

@ -13,6 +13,7 @@ import { Flex } from 'antd'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import classNames from 'classnames' import classNames from 'classnames'
import { ApiServerContext } from '../context/ApiServerContext' import { ApiServerContext } from '../context/ApiServerContext'
import { AuthContext } from '../context/AuthContext'
import ObjectCard from './ObjectCard' import ObjectCard from './ObjectCard'
import ObjectKanbanColumn from './ObjectKanbanColumn' import ObjectKanbanColumn from './ObjectKanbanColumn'
import ObjectKanbanHeader from './ObjectKanbanHeader' import ObjectKanbanHeader from './ObjectKanbanHeader'
@ -285,6 +286,7 @@ const ObjectKanban = forwardRef(
subscribeToAllObjectUpdates, subscribeToAllObjectUpdates,
subscribeToObjectTypeUpdates subscribeToObjectTypeUpdates
} = useContext(ApiServerContext) } = useContext(ApiServerContext)
const { token } = useContext(AuthContext)
const columnRefs = useRef({}) const columnRefs = useRef({})
const headerTrackRef = useRef(null) const headerTrackRef = useRef(null)
const skeletonTrackRef = useRef(null) const skeletonTrackRef = useRef(null)
@ -698,19 +700,27 @@ const ObjectKanban = forwardRef(
useEffect(() => { useEffect(() => {
return () => { return () => {
if (connected == true && subscribeToObjectTypeUpdatesRef.current) { if (
connected == true &&
token &&
subscribeToObjectTypeUpdatesRef.current
) {
subscribeToObjectTypeUpdatesRef.current() subscribeToObjectTypeUpdatesRef.current()
subscribeToObjectTypeUpdatesRef.current = null subscribeToObjectTypeUpdatesRef.current = null
} }
if (connected == true && subscribeToAllObjectUpdatesRef.current) { if (
connected == true &&
token &&
subscribeToAllObjectUpdatesRef.current
) {
subscribeToAllObjectUpdatesRef.current() subscribeToAllObjectUpdatesRef.current()
subscribeToAllObjectUpdatesRef.current = null subscribeToAllObjectUpdatesRef.current = null
} }
} }
}, [connected]) }, [connected, token])
useEffect(() => { useEffect(() => {
if (connected !== true || !type) return if (connected !== true || !type || !token) return
const unsubscribe = subscribeToAllObjectUpdates( const unsubscribe = subscribeToAllObjectUpdates(
type, type,
@ -725,10 +735,10 @@ const ObjectKanban = forwardRef(
subscribeToAllObjectUpdatesRef.current = null subscribeToAllObjectUpdatesRef.current = null
} }
} }
}, [type, connected, subscribeToAllObjectUpdates]) }, [type, connected, subscribeToAllObjectUpdates, token])
useEffect(() => { useEffect(() => {
if (connected !== true) return if (connected !== true || !token) return
if (subscribedTypeRef.current === type) return if (subscribedTypeRef.current === type) return
const unsubscribe = subscribeToObjectTypeUpdatesFnRef.current( const unsubscribe = subscribeToObjectTypeUpdatesFnRef.current(
@ -747,7 +757,7 @@ const ObjectKanban = forwardRef(
subscribedTypeRef.current = null subscribedTypeRef.current = null
} }
} }
}, [type, connected]) }, [type, connected, token])
useImperativeHandle( useImperativeHandle(
ref, ref,

View File

@ -16,6 +16,7 @@ import ObjectTimelineRow from './ObjectTimelineRow'
import { getTimelineRangeFromValues, getTimelineTicks } from './timelineUtils' import { getTimelineRangeFromValues, getTimelineTicks } from './timelineUtils'
import cn from 'classnames' import cn from 'classnames'
import { getStateTagInfo } from '../utils/Utils' import { getStateTagInfo } from '../utils/Utils'
import { AuthContext } from '../context/AuthContext'
const { Text } = Typography const { Text } = Typography
const LABEL_WIDTH = 226 const LABEL_WIDTH = 226
@ -40,7 +41,8 @@ const ObjectTimeline = ({
onScroll, onScroll,
rowWrapper rowWrapper
}) => { }) => {
const { getModelPropertyValues } = useContext(ApiServerContext) const { getModelPropertyValues, connected } = useContext(ApiServerContext)
const { token } = useContext(AuthContext)
const getModelPropertyValuesRef = useRef(getModelPropertyValues) const getModelPropertyValuesRef = useRef(getModelPropertyValues)
getModelPropertyValuesRef.current = getModelPropertyValues getModelPropertyValuesRef.current = getModelPropertyValues
@ -60,6 +62,8 @@ const ObjectTimeline = ({
) )
useEffect(() => { useEffect(() => {
if (connected !== true || !token) return
if (!type || !startDate) { if (!type || !startDate) {
setStartValues([]) setStartValues([])
setEndValues([]) setEndValues([])
@ -105,7 +109,7 @@ const ObjectTimeline = ({
return () => { return () => {
cancelled = true cancelled = true
} }
}, [endDate, rangeQueryKey, startDate, type]) }, [endDate, rangeQueryKey, startDate, type, connected, token])
const [showShadow, setShowShadow] = useState(false) const [showShadow, setShowShadow] = useState(false)