diff --git a/src/features/MatchPage/hooks/useMatchProfile.tsx b/src/features/MatchPage/hooks/useMatchProfile.tsx index 25951ee7..8ca10dc2 100644 --- a/src/features/MatchPage/hooks/useMatchProfile.tsx +++ b/src/features/MatchPage/hooks/useMatchProfile.tsx @@ -1,4 +1,5 @@ import { + useCallback, useEffect, useState, } from 'react' @@ -6,19 +7,41 @@ import { import type { MatchInfo } from 'requests' import { getMatchInfo } from 'requests' -import { useSportNameParam, usePageId } from 'hooks' +import { + useSportNameParam, + useInterval, + usePageId, +} from 'hooks' + +const INTERVAL_20_SEC = 20000 export const useMatchProfile = () => { const [matchProfile, setMatchProfile] = useState(null) const { sportType } = useSportNameParam() const matchId = usePageId() - useEffect(() => { + const fetchMatchProfile = useCallback(() => { getMatchInfo(sportType, matchId).then(setMatchProfile) }, - [ - sportType, - matchId, + [sportType, matchId]) + + const { start, stop } = useInterval({ + callback: fetchMatchProfile, + intervalDuration: INTERVAL_20_SEC, + startImmediate: false, + }) + + useEffect(fetchMatchProfile, [fetchMatchProfile]) + useEffect(() => { + if (matchProfile?.live) { + start() + } else { + stop() + } + }, [ + matchProfile, + start, + stop, ]) return matchProfile