feat(in-603): send requests only for open tabs

src/features/MatchPage/store/hooks/index.tsx

@@ -111,7 +111,7 @@ export const useMatchPage = () => {
     matchPlaylists,
     selectedPlaylist,
     setFullMatchPlaylistDuration,
-  } = useMatchData({ matchProfile })
+  } = useMatchData({ matchProfile, selectedTab })
 
   const profile = matchProfile
 
@@ -297,6 +297,8 @@ export const useMatchPage = () => {
     matchProfile,
     playingProgress,
     selectedPlaylist,
+    selectedStatsTable,
+    selectedTab,
     setIsTeamsStatsFetching,
     statsType,
   })
@@ -304,13 +306,14 @@ export const useMatchPage = () => {
   const {
     beforeCloseTourCallback: beforeCloseTourCallbackPlayers,
     getParams,
-    isEmptyPlayersStats,
     playersData,
     playersStats,
   } = usePlayersStats({
     matchProfile,
     playingProgress,
     selectedPlaylist,
+    selectedStatsTable,
+    selectedTab,
     setIsPlayersStatsFetching,
     statsType,
   })
@@ -413,7 +416,6 @@ export const useMatchPage = () => {
     isAllActionsChecked,
     isClickable,
     isEmptyFilters,
-    isEmptyPlayersStats,
     isExpanded,
     isFirstTeamPlayersChecked,
     isLiveMatch,

src/features/MatchPage/store/hooks/useMatchData.tsx

@@ -4,6 +4,8 @@ import {
   useCallback,
 } from 'react'
 
+import isEmpty from 'lodash/isEmpty'
+
 import type { MatchInfo } from 'requests/getMatchInfo'
 
 import {
@@ -14,6 +16,7 @@ import {
 
 import { FULL_GAME_KEY } from 'features/MatchPage/helpers/buildPlaylists'
 import { useMatchPopupStore } from 'features/MatchPopup'
+import { Tabs } from 'features/MatchSidePlaylists/config'
 
 import { useMatchPlaylists } from './useMatchPlaylists'
 import { useEvents } from './useEvents'
@@ -23,9 +26,10 @@ const MATCH_DATA_POLL_INTERVAL = 5000
 
 type UseMatchDataArgs = {
   matchProfile: MatchInfo,
+  selectedTab: Tabs,
 }
 
-export const useMatchData = ({ matchProfile: profile }: UseMatchDataArgs) => {
+export const useMatchData = ({ matchProfile: profile, selectedTab }: UseMatchDataArgs) => {
   const { profileId: matchId, sportType } = usePageParams()
   const { chapters } = useMatchPopupStore()
   const [matchDuration, setMatchDuration] = useState(0)
@@ -42,41 +46,43 @@ export const useMatchData = ({ matchProfile: profile }: UseMatchDataArgs) => {
 
   const chaptersDuration = useDuration(chapters) / 1000
   const fullMatchDuration = matchDuration
+
   useEffect(() => {
     if (!profile || profile.live) return
 
-    fetchMatchPlaylists({
+    isEmpty(matchPlaylists.match) && selectedTab === Tabs.WATCH && fetchMatchPlaylists({
       fullMatchDuration,
       id: matchId,
       sportType,
     })
-    fetchMatchEvents()
+    isEmpty(events) && selectedTab === Tabs.EVENTS && fetchMatchEvents()
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     profile?.live,
     fullMatchDuration,
     matchId,
     sportType,
+    selectedTab,
   ])
 
   const intervalCallback = useCallback(() => {
-    fetchMatchPlaylists({
+    (selectedTab === Tabs.WATCH || selectedTab === Tabs.PLAYERS) && fetchMatchPlaylists({
       fullMatchDuration,
       id: matchId,
       sportType,
     })
-    fetchMatchEvents()
+    selectedTab === Tabs.EVENTS && fetchMatchEvents()
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     fullMatchDuration,
     matchId,
     sportType,
+    selectedTab,
   ])
 
   const { start, stop } = useInterval({
     callback: intervalCallback,
     intervalDuration: MATCH_DATA_POLL_INTERVAL,
-    startImmediate: false,
   })
 
   useEffect(() => {

src/features/MatchPage/store/hooks/usePlayersStats.tsx

@@ -9,7 +9,7 @@ import { useQueryClient } from 'react-query'
 
 import throttle from 'lodash/throttle'
 import isEmpty from 'lodash/isEmpty'
-import every from 'lodash/every'
+import includes from 'lodash/includes'
 import find from 'lodash/find'
 import isUndefined from 'lodash/isUndefined'
 import flatMapDepth from 'lodash/flatMapDepth'
@@ -19,7 +19,11 @@ import size from 'lodash/size'
 
 import { querieKeys } from 'config'
 
-import type { MatchScore, PlayerParam } from 'requests'
+import type {
+  DataItem,
+  MatchScore,
+  PlayerParam,
+} from 'requests'
 import {
   MatchInfo,
   PlayersStats,
@@ -33,21 +37,24 @@ import { getLocalStorageItem } from 'helpers/getLocalStorage'
 import { useObjectState, usePageParams } from 'hooks'
 
 import type{ PlaylistOption } from 'features/MatchPage/types'
-import { StatsType } from 'features/MatchSidePlaylists/components/TabStats/config'
+import { StatsType, Tabs as StatsTabs } from 'features/MatchSidePlaylists/components/TabStats/config'
 import { FULL_GAME_KEY } from 'features/MatchPage/helpers/buildPlaylists'
 import { getHalfTime } from 'features/MatchPage/helpers/getHalfTime'
 import { TOUR_COMPLETED_STORAGE_KEY } from 'features/MatchTour'
+import { Tabs } from 'features/MatchSidePlaylists/config'
 
 import { DISPLAYED_PARAMS_COLUMNS } from 'features/MatchSidePlaylists/components/PlayersTable/config'
 import { useFakeData } from './useFakeData'
 
-const REQUEST_DELAY = 3000
+const REQUEST_DELAY = 5000
 const STATS_POLL_INTERVAL = 30000
 
 type UsePlayersStatsArgs = {
   matchProfile: MatchInfo,
   playingProgress: number,
   selectedPlaylist?: PlaylistOption,
+  selectedStatsTable: StatsTabs,
+  selectedTab: Tabs,
   setIsPlayersStatsFetching: Dispatch<SetStateAction<boolean>>,
   statsType: StatsType,
 }
@@ -61,6 +68,8 @@ export const usePlayersStats = ({
   matchProfile,
   playingProgress,
   selectedPlaylist,
+  selectedStatsTable,
+  selectedTab,
   setIsPlayersStatsFetching,
   statsType,
 }: UsePlayersStatsArgs) => {
@@ -81,12 +90,6 @@ export const usePlayersStats = ({
 
   const isCurrentStats = statsType === StatsType.CURRENT_STATS
 
-  const isEmptyPlayersStats = (teamId: number) => (
-    isEmpty(playersStats[teamId])
-      || every(playersStats[teamId], isEmpty)
-      || isEmpty(playersData[matchProfile?.team1.id === teamId ? 'team1' : 'team2'])
-  )
-
   const getParams = useCallback((stats: PlayersStats) => (
     uniqBy(flatMapDepth(stats, values), 'id') as Array<PlayerParam>
   ), [])
@@ -141,16 +144,25 @@ export const usePlayersStats = ({
   ])
 
   const fetchData = useMemo(() => throttle(async (second?: number) => {
+    const isTeam1Selected = selectedStatsTable === StatsTabs.TEAM1
+
     if (
       selectedPlaylist?.id !== FULL_GAME_KEY
-       || (matchProfile?.live && Number(matchProfile.c_match_calc_status) <= 1)
+       || selectedTab !== Tabs.STATS
+       || !includes([StatsTabs.TEAM1, StatsTabs.TEAM2], selectedStatsTable)
+       || !matchProfile?.team1.id
+       || !matchProfile?.team2.id
+       || (!matchProfile?.live && !isCurrentStats && !isEmpty(playersStats[isTeam1Selected
+         ? matchProfile.team1.id
+         : matchProfile.team2.id]))
     ) return
 
-    const [res1, res2, res3] = await Promise.all([
+    const [res1, res2] = await Promise.all([
       fetchPlayers(second),
-      fetchPlayersStats('team1', second),
+      isTeam1Selected
-      fetchPlayersStats('team2', second),
+        ? fetchPlayersStats('team1', second)
-    ])
+        : fetchPlayersStats('team2', second),
+    ]) as [Array<DataItem> | null, PlayersStats | null]
 
     const team1Players = find(res1, { team_id: matchProfile?.team1.id })?.players || []
     const team2Players = find(res1, { team_id: matchProfile?.team2.id })?.players || []
@@ -168,19 +180,20 @@ export const usePlayersStats = ({
     })
 
     setPlayersStats({
-      ...(matchProfile?.team1.id && res2 && {
+      ...(isTeam1Selected && res2 && {
         [matchProfile.team1.id]: needUseFakeData
           ? fakeData.playersStats as unknown as PlayersStats
           : res2,
       }),
-      ...(matchProfile?.team2.id && res3 && {
+      ...(!isTeam1Selected && res2 && {
         [matchProfile.team2.id]: needUseFakeData
           ? fakeData.playersStats as unknown as PlayersStats
-          : res3,
+          : res2,
       }),
     })
 
     setIsPlayersStatsFetching(false)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, REQUEST_DELAY), [
     selectedPlaylist?.id,
     fetchPlayers,
@@ -189,10 +202,12 @@ export const usePlayersStats = ({
     matchProfile?.team1.id,
     matchProfile?.team2.id,
     matchProfile?.live,
-    matchProfile?.c_match_calc_status,
     setIsPlayersStatsFetching,
     getParams,
     fakeData,
+    selectedTab,
+    selectedStatsTable,
+    isCurrentStats,
   ])
 
   const beforeCloseTourCallback = () => {
@@ -233,7 +248,6 @@ export const usePlayersStats = ({
   return {
     beforeCloseTourCallback,
     getParams,
-    isEmptyPlayersStats,
     playersData,
     playersStats,
   }

src/features/MatchPage/store/hooks/useTeamsStats.tsx

@@ -26,20 +26,23 @@ import { usePageParams } from 'hooks'
 import { getLocalStorageItem } from 'helpers/getLocalStorage'
 
 import type { PlaylistOption } from 'features/MatchPage/types'
-import { StatsType } from 'features/MatchSidePlaylists/components/TabStats/config'
+import { StatsType, Tabs as StatsTab } from 'features/MatchSidePlaylists/components/TabStats/config'
 import { FULL_GAME_KEY } from 'features/MatchPage/helpers/buildPlaylists'
 import { getHalfTime } from 'features/MatchPage/helpers/getHalfTime'
 import { TOUR_COMPLETED_STORAGE_KEY } from 'features/MatchTour'
+import { Tabs } from 'features/MatchSidePlaylists/config'
 
 import { useFakeData } from './useFakeData'
 
-const REQUEST_DELAY = 3000
+const REQUEST_DELAY = 5000
 const STATS_POLL_INTERVAL = 30000
 
 type UseTeamsStatsArgs = {
   matchProfile: MatchInfo,
   playingProgress: number,
   selectedPlaylist?: PlaylistOption,
+  selectedStatsTable: StatsTab,
+  selectedTab: Tabs,
   setIsTeamsStatsFetching: Dispatch<SetStateAction<boolean>>,
   statsType: StatsType,
 }
@@ -52,6 +55,8 @@ export const useTeamsStats = ({
   matchProfile,
   playingProgress,
   selectedPlaylist,
+  selectedStatsTable,
+  selectedTab,
   setIsTeamsStatsFetching,
   statsType,
 }: UseTeamsStatsArgs) => {
@@ -98,7 +103,9 @@ export const useTeamsStats = ({
       !sportName
       || selectedPlaylist?.id !== FULL_GAME_KEY
       || !videoBounds
-      || (matchProfile?.live && Number(matchProfile.c_match_calc_status) <= 1)
+      || selectedTab !== Tabs.STATS
+      || selectedStatsTable !== StatsTab.TEAMS
+      || (!matchProfile?.live && !isCurrentStats && !isEmpty(teamsStats))
     ) return
 
     try {
@@ -117,9 +124,9 @@ export const useTeamsStats = ({
 
     // eslint-disable-next-line no-empty
     } catch (e) {}
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, REQUEST_DELAY), [
     matchProfile?.video_bounds,
-    matchProfile?.c_match_calc_status,
     matchProfile?.live,
     matchScore?.video_bounds,
     selectedPlaylist?.id,
@@ -128,6 +135,9 @@ export const useTeamsStats = ({
     sportName,
     fakeData,
     getFirstClickableParam,
+    selectedTab,
+    selectedStatsTable,
+    isCurrentStats,
   ])
 
   const beforeCloseTourCallback = () => {

src/features/MatchSidePlaylists/components/TabStats/hooks.tsx

@@ -1,21 +1,14 @@
-import { useEffect } from 'react'
-
-import isEmpty from 'lodash/isEmpty'
-
 import { useTooltip } from 'hooks'
 
 import { useMatchPageStore } from 'features/MatchPage/store'
 
-import { StatsType, Tabs } from './config'
+import { StatsType } from './config'
 
 export const useTabStats = () => {
   const {
-    isEmptyPlayersStats,
-    profile: matchProfile,
     selectedStatsTable: selectedTab,
     setSelectedStatsTable: setSelectedTab,
     statsType,
-    teamsStats,
     toggleStatsType,
   } = useMatchPageStore()
 
@@ -32,43 +25,9 @@ export const useTabStats = () => {
   const switchTitleLexic = isFinalStatsType ? 'final_stats' : 'current_stats'
   const switchButtonTooltipLexic = isFinalStatsType ? 'display_all_stats' : 'display_stats_according_to_video'
 
-  const isVisibleTeamsTab = !isEmpty(teamsStats)
-  const isVisibleTeam1PlayersTab = Boolean(
-    matchProfile && !isEmptyPlayersStats(matchProfile.team1.id),
-  )
-  const isVisibleTeam2PlayersTab = Boolean(
-    matchProfile && !isEmptyPlayersStats(matchProfile.team2.id),
-  )
-
-  useEffect(() => {
-    switch (true) {
-      case isVisibleTeamsTab:
-        setSelectedTab(Tabs.TEAMS)
-        break
-
-      case isVisibleTeam1PlayersTab:
-        setSelectedTab(Tabs.TEAM1)
-        break
-
-      case isVisibleTeam2PlayersTab:
-        setSelectedTab(Tabs.TEAM2)
-        break
-
-      default:
-    }
-  }, [
-    isVisibleTeam1PlayersTab,
-    isVisibleTeam2PlayersTab,
-    isVisibleTeamsTab,
-    setSelectedTab,
-  ])
-
   return {
     isFinalStatsType,
     isTooltipShown,
-    isVisibleTeam1PlayersTab,
-    isVisibleTeam2PlayersTab,
-    isVisibleTeamsTab,
     onMouseLeave,
     onMouseOver,
     selectedTab,

src/features/MatchSidePlaylists/components/TabStats/index.tsx

@@ -46,9 +46,6 @@ export const TabStats = () => {
   const {
     isFinalStatsType,
     isTooltipShown,
-    isVisibleTeam1PlayersTab,
-    isVisibleTeam2PlayersTab,
-    isVisibleTeamsTab,
     onMouseLeave,
     onMouseOver,
     selectedTab,
@@ -76,7 +73,6 @@ export const TabStats = () => {
     <Container>
       <Header>
         <TabList>
-          {isVisibleTeamsTab && (
           <Tab
             aria-pressed={selectedTab === Tabs.TEAMS}
             onClick={() => setSelectedTab(Tabs.TEAMS)}
@@ -89,8 +85,6 @@ export const TabStats = () => {
               <Spotlight />
             )}
           </Tab>
-          )}
-          {isVisibleTeam1PlayersTab && (
           <Tab
             aria-pressed={selectedTab === Tabs.TEAM1}
             onClick={() => setSelectedTab(Tabs.TEAM1)}
@@ -121,8 +115,6 @@ export const TabStats = () => {
               <Spotlight />
             )}
           </Tab>
-          )}
-          {isVisibleTeam2PlayersTab && (
           <Tab
             aria-pressed={selectedTab === Tabs.TEAM2}
             onClick={() => setSelectedTab(Tabs.TEAM2)}
@@ -149,7 +141,6 @@ export const TabStats = () => {
               />
             </TabTitle>
           </Tab>
-          )}
         </TabList>
         <Switch
           data-step={Steps.FinalStats}

src/features/MatchSidePlaylists/hooks.tsx

@@ -1,7 +1,13 @@
-import { useEffect, useMemo } from 'react'
+import { useEffect } from 'react'
+import { useQueryClient } from 'react-query'
 
-import isEmpty from 'lodash/isEmpty'
+import findIndex from 'lodash/findIndex'
-import compact from 'lodash/compact'
+import isNil from 'lodash/isNil'
+
+import { querieKeys } from 'config'
+
+import type { MatchScore } from 'requests'
+import { MatchStatuses } from 'requests'
 
 import { useMatchPageStore } from 'features/MatchPage/store'
 
@@ -10,77 +16,27 @@ import { Tabs } from './config'
 export const useMatchSidePlaylists = () => {
   const {
     closePopup,
-    events,
-    isEmptyPlayersStats,
-    matchPlaylists: playlists,
     profile: matchProfile,
     selectedTab,
     setSelectedTab,
-    teamsStats,
   } = useMatchPageStore()
+  const client = useQueryClient()
 
-  const isWatchTabVisible = !matchProfile?.live || Number(matchProfile.c_match_calc_status) > 1
+  const matchScore = client.getQueryData<MatchScore>(querieKeys.matchScore)
-
-  const isEventTabVisible = useMemo(() => (
-    events.length > 0
-  ), [events])
-
-  const isPlayersTabVisible = useMemo(() => (
-    !isEmpty(playlists.players.team1)
-  ), [playlists.players.team1])
 
-  const isStatsTabVisible = useMemo(() => (
+  const videoBounds = matchScore?.video_bounds || matchProfile?.video_bounds
-    !isEmpty(teamsStats)
+  const matchStatus = matchScore?.c_match_calc_status || matchProfile?.c_match_calc_status
-      || (matchProfile?.team1.id && !isEmptyPlayersStats(matchProfile.team1.id))
-      || (matchProfile?.team2.id && !isEmptyPlayersStats(matchProfile.team2.id))
-  ), [
-    isEmptyPlayersStats,
-    matchProfile?.team1.id,
-    matchProfile?.team2.id,
-    teamsStats,
-  ])
 
-  const hasLessThanFourTabs = compact([
+  const showTabs = Number(matchStatus) > MatchStatuses.Upcoming
-    isWatchTabVisible,
+    && findIndex(videoBounds, ({ h, s }) => h === '1' && !isNil(s)) !== -1
-    isEventTabVisible,
-    isPlayersTabVisible,
-    isStatsTabVisible,
-  ]).length < 4
-
-  useEffect(() => {
-    switch (true) {
-      case isWatchTabVisible:
-        setSelectedTab(Tabs.WATCH)
-        break
-      case isEventTabVisible:
-        setSelectedTab(Tabs.EVENTS)
-        break
-      case isPlayersTabVisible:
-        setSelectedTab(Tabs.PLAYERS)
-        break
-      case isStatsTabVisible:
-        setSelectedTab(Tabs.STATS)
-        break
-    }
-  }, [
-    isEventTabVisible,
-    isPlayersTabVisible,
-    isStatsTabVisible,
-    isWatchTabVisible,
-    setSelectedTab,
-  ])
 
   useEffect(() => {
     if (selectedTab !== Tabs.EVENTS) closePopup()
   }, [selectedTab, closePopup])
 
   return {
-    hasLessThanFourTabs,
-    isEventTabVisible,
-    isPlayersTabVisible,
-    isStatsTabVisible,
-    isWatchTabVisible,
     onTabClick: setSelectedTab,
     selectedTab,
+    showTabs,
   }
 }

src/features/MatchSidePlaylists/index.tsx

@@ -67,12 +67,8 @@ export const MatchSidePlaylists = ({
   } = useMatchPageStore()
 
   const {
-    hasLessThanFourTabs,
-    isEventTabVisible,
-    isPlayersTabVisible,
-    isStatsTabVisible,
-    isWatchTabVisible,
     onTabClick,
+    showTabs,
   } = useMatchSidePlaylists()
 
   const {
@@ -108,14 +104,14 @@ export const MatchSidePlaylists = ({
     if (
       getLocalStorageItem(TOUR_COMPLETED_STORAGE_KEY) === 'true'
         || isOpen
-        || !isStatsTabVisible
+        || !showTabs
         || Number(profile?.c_match_calc_status) < 2
     ) return undefined
 
     const timer = setTimeout(() => setIsOpen(true), 1500)
 
     return () => clearTimeout(timer)
-  }, [isStatsTabVisible, setIsOpen, profile?.c_match_calc_status, isOpen])
+  }, [showTabs, setIsOpen, profile?.c_match_calc_status, isOpen])
 
   useEventListener({
     callback: () => {
@@ -140,9 +136,10 @@ export const MatchSidePlaylists = ({
       isTourOpen={Boolean(isOpen)}
       isHidden={!profileCardShown}
     >
+      {showTabs
+        && (
           <TabsWrapper>
-        <TabsGroup hasLessThanFourTabs={hasLessThanFourTabs}>
+            <TabsGroup>
-          {isWatchTabVisible ? (
               <Tab
                 aria-pressed={selectedTab === Tabs.WATCH}
                 onClick={() => onTabClick(Tabs.WATCH)}
@@ -153,8 +150,6 @@ export const MatchSidePlaylists = ({
                   <TabTitle t='watch' />
                 </TabButton>
               </Tab>
-          ) : null}
-          {isEventTabVisible ? (
               <Tab
                 aria-pressed={selectedTab === Tabs.EVENTS}
                 onClick={() => onTabClick(Tabs.EVENTS)}
@@ -165,8 +160,6 @@ export const MatchSidePlaylists = ({
                   <TabTitle t='actions' />
                 </TabButton>
               </Tab>
-          ) : null}
-          {isPlayersTabVisible ? (
               <Tab
                 aria-pressed={selectedTab === Tabs.PLAYERS}
                 onClick={() => onTabClick(Tabs.PLAYERS)}
@@ -177,8 +170,6 @@ export const MatchSidePlaylists = ({
                   <TabTitle t='players' />
                 </TabButton>
               </Tab>
-          ) : null}
-          {isStatsTabVisible ? (
               <Tab
                 aria-pressed={selectedTab === Tabs.STATS}
                 onClick={() => onTabClick(Tabs.STATS)}
@@ -193,10 +184,9 @@ export const MatchSidePlaylists = ({
                   <TabTitle t='stats' />
                 </TabButton>
               </Tab>
-          ) : null}
             </TabsGroup>
-
           </TabsWrapper>
+        )}
       <Container
         hasScroll={hasTabPaneScroll}
         ref={tabPaneContainerRef}

src/features/MatchSidePlaylists/styled.tsx

@@ -54,28 +54,10 @@ export const Wrapper = styled.div<WrapperProps>`
 
 export const TabsWrapper = styled.div``
 
-type TabsGroupProps = {
+export const TabsGroup = styled.div.attrs({ role: 'tablist' })`
-  hasLessThanFourTabs?: boolean,
-}
-
-export const TabsGroup = styled.div.attrs({ role: 'tablist' })<TabsGroupProps>`
   display: flex;
   justify-content: center;
   gap: ${isMobileDevice ? 30 : 20}px;
-
-  ${({ hasLessThanFourTabs }) => (hasLessThanFourTabs
-    ? css`
-      ${Tab} {
-          justify-content: center;
-          flex-direction: row;
-          gap: 5px;
-        }
-
-      ${TabIcon} {
-        margin-bottom: 0;
-      }
-      `
-    : '')}
 `
 
 export const TabTitle = styled(T9n)`

src/hooks/useInterval.tsx

@@ -29,9 +29,11 @@ export const useInterval = ({
   useEffect(() => {
     if (!isRunning) return undefined
 
+    if (startImmediate) savedCallback.current()
+
     const id = setInterval(savedCallback.current, intervalDuration)
     return () => clearInterval(id)
-  }, [isRunning, intervalDuration, callback])
+  }, [isRunning, intervalDuration, callback, startImmediate])
 
   return { start, stop }
 }

src/requests/getMatchParticipants.tsx

@@ -28,7 +28,7 @@ export type Player = {
   weight: number | null,
 }
 
-type DataItem = {
+export type DataItem = {
   players: Array<Player>,
   team_id: number,
 }

src/requests/getMatchScore.tsx

@@ -6,7 +6,8 @@ import type {
   Team,
   MatchTournament,
   VideoBounds,
-} from 'requests/getMatchInfo'
+} from './getMatchInfo'
+import { MatchStatuses } from './getMatchInfo'
 
 type Params = {
   profileId: number,
@@ -14,6 +15,7 @@ type Params = {
 }
 
 export type MatchScore = {
+  c_match_calc_status: MatchStatuses | null,
   match_date: string,
   match_date_utc: string,
   match_id: number,