feat(1013): rerequest live match profile to update scores (#351)

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<MatchInfo>(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