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:
parent
fe2d257653
commit
4cae70b5e8
@ -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,
|
||||||
|
|||||||
@ -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)
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user