frontend
/
spa_instat_tv
1
0
Fork 0
Code Pull Requests 1 Releases Wiki Activity

feat(in-603): send requests only for open tabs
continuous-integration/drone/push Build is passing
Details

Browse Source
pull/202/head
Ruslan Khayrullin 3 years ago
parent 3d1d9e05cd
commit e202aa1d30
12 changed files with 210 additions and 296 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 8
      src/features/MatchPage/store/hooks/index.tsx
  2. 18
      src/features/MatchPage/store/hooks/useMatchData.tsx
  3. 54
      src/features/MatchPage/store/hooks/usePlayersStats.tsx
  4. 18
      src/features/MatchPage/store/hooks/useTeamsStats.tsx
  5. 43
      src/features/MatchSidePlaylists/components/TabStats/hooks.tsx
  6. 141
      src/features/MatchSidePlaylists/components/TabStats/index.tsx
  7. 76
      src/features/MatchSidePlaylists/hooks.tsx
  8. 118
      src/features/MatchSidePlaylists/index.tsx
  9. 20
      src/features/MatchSidePlaylists/styled.tsx
  10. 4
      src/hooks/useInterval.tsx
  11. 2
      src/requests/getMatchParticipants.tsx
  12. 4
      src/requests/getMatchScore.tsx

8
src/features/MatchPage/store/hooks/index.tsx
Unescape View File

@ -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,

18
src/features/MatchPage/store/hooks/useMatchData.tsx
Unescape View File

@ -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(() => {

54
src/features/MatchPage/store/hooks/usePlayersStats.tsx
Unescape View File

@ -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),
fetchPlayersStats('team2', second),
])
isTeam1Selected
? 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,
}

18
src/features/MatchPage/store/hooks/useTeamsStats.tsx
Unescape View File

@ -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 = () => {

43
src/features/MatchSidePlaylists/components/TabStats/hooks.tsx
Unescape View File

@ -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,

141
src/features/MatchSidePlaylists/components/TabStats/index.tsx
Unescape View File

@ -46,9 +46,6 @@ export const TabStats = () => {
const {
isFinalStatsType,
isTooltipShown,
isVisibleTeam1PlayersTab,
isVisibleTeam2PlayersTab,
isVisibleTeamsTab,
onMouseLeave,
onMouseOver,
selectedTab,
@ -76,80 +73,74 @@ export const TabStats = () => {
<Container>
<Header>
<TabList>
{isVisibleTeamsTab && (
<Tab
aria-pressed={selectedTab === Tabs.TEAMS}
onClick={() => setSelectedTab(Tabs.TEAMS)}
data-step={Steps.TeamsTab}
<Tab
aria-pressed={selectedTab === Tabs.TEAMS}
onClick={() => setSelectedTab(Tabs.TEAMS)}
data-step={Steps.TeamsTab}
>
<TabTitle>
<T9n t='team' />
</TabTitle>
{Boolean(currentStep === Steps.TeamsTab && isOpen) && (
<Spotlight />
)}
</Tab>
<Tab
aria-pressed={selectedTab === Tabs.TEAM1}
onClick={() => setSelectedTab(Tabs.TEAM1)}
data-step={Steps.PlayersTab}
id='match_stats_team1'
>
<TabTitle
teamColor={team1.shirt_color}
onMouseOver={isMobileDevice
? undefined
: onMouseOver({
anchorId: 'team1Tab',
horizontalPosition: 'left',
indent: 25,
tooltipText: team1[`name_${suffix}`],
})}
onMouseLeave={isMobileDevice ? undefined : onMouseLeave}
>
<TabTitle>
<T9n t='team' />
</TabTitle>
{Boolean(currentStep === Steps.TeamsTab && isOpen) && (
<Spotlight />
)}
</Tab>
)}
{isVisibleTeam1PlayersTab && (
<Tab
aria-pressed={selectedTab === Tabs.TEAM1}
onClick={() => setSelectedTab(Tabs.TEAM1)}
data-step={Steps.PlayersTab}
id='match_stats_team1'
>
<TabTitle
teamColor={team1.shirt_color}
onMouseOver={isMobileDevice
? undefined
: onMouseOver({
anchorId: 'team1Tab',
horizontalPosition: 'left',
indent: 25,
tooltipText: team1[`name_${suffix}`],
})}
onMouseLeave={isMobileDevice ? undefined : onMouseLeave}
>
<Name
id='team1Tab'
nameObj={{
name_eng: team1.abbrev_eng || getTeamAbbr(team1.name_eng),
name_rus: team1.abbrev_rus || getTeamAbbr(team1.name_rus),
}}
/>
</TabTitle>
{Boolean(currentStep === Steps.PlayersTab && isOpen) && (
<Spotlight />
)}
</Tab>
)}
{isVisibleTeam2PlayersTab && (
<Tab
aria-pressed={selectedTab === Tabs.TEAM2}
onClick={() => setSelectedTab(Tabs.TEAM2)}
id='match_stats_team2'
<Name
id='team1Tab'
nameObj={{
name_eng: team1.abbrev_eng || getTeamAbbr(team1.name_eng),
name_rus: team1.abbrev_rus || getTeamAbbr(team1.name_rus),
}}
/>
</TabTitle>
{Boolean(currentStep === Steps.PlayersTab && isOpen) && (
<Spotlight />
)}
</Tab>
<Tab
aria-pressed={selectedTab === Tabs.TEAM2}
onClick={() => setSelectedTab(Tabs.TEAM2)}
id='match_stats_team2'
>
<TabTitle
teamColor={team2.shirt_color}
onMouseOver={isMobileDevice
? undefined
: onMouseOver({
anchorId: 'team2Tab',
horizontalPosition: 'left',
indent: 25,
tooltipText: team2[`name_${suffix}`],
})}
onMouseLeave={isMobileDevice ? undefined : onMouseLeave}
>
<TabTitle
teamColor={team2.shirt_color}
onMouseOver={isMobileDevice
? undefined
: onMouseOver({
anchorId: 'team2Tab',
horizontalPosition: 'left',
indent: 25,
tooltipText: team2[`name_${suffix}`],
})}
onMouseLeave={isMobileDevice ? undefined : onMouseLeave}
>
<Name
id='team2Tab'
nameObj={{
name_eng: team2.abbrev_eng || getTeamAbbr(team2.name_eng),
name_rus: team2.abbrev_rus || getTeamAbbr(team2.name_rus),
}}
/>
</TabTitle>
</Tab>
)}
<Name
id='team2Tab'
nameObj={{
name_eng: team2.abbrev_eng || getTeamAbbr(team2.name_eng),
name_rus: team2.abbrev_rus || getTeamAbbr(team2.name_rus),
}}
/>
</TabTitle>
</Tab>
</TabList>
<Switch
data-step={Steps.FinalStats}

76
src/features/MatchSidePlaylists/hooks.tsx
Unescape View File

@ -1,7 +1,13 @@
import { useEffect, useMemo } from 'react'
import { useEffect } from 'react'
import { useQueryClient } from 'react-query'
import isEmpty from 'lodash/isEmpty'
import compact from 'lodash/compact'
import findIndex from 'lodash/findIndex'
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 isEventTabVisible = useMemo(() => (
events.length > 0
), [events])
const isPlayersTabVisible = useMemo(() => (
!isEmpty(playlists.players.team1)
), [playlists.players.team1])
const matchScore = client.getQueryData<MatchScore>(querieKeys.matchScore)
const isStatsTabVisible = useMemo(() => (
!isEmpty(teamsStats)
|| (matchProfile?.team1.id && !isEmptyPlayersStats(matchProfile.team1.id))
|| (matchProfile?.team2.id && !isEmptyPlayersStats(matchProfile.team2.id))
), [
isEmptyPlayersStats,
matchProfile?.team1.id,
matchProfile?.team2.id,
teamsStats,
])
const videoBounds = matchScore?.video_bounds || matchProfile?.video_bounds
const matchStatus = matchScore?.c_match_calc_status || matchProfile?.c_match_calc_status
const hasLessThanFourTabs = compact([
isWatchTabVisible,
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,
])
const showTabs = Number(matchStatus) > MatchStatuses.Upcoming
&& findIndex(videoBounds, ({ h, s }) => h === '1' && !isNil(s)) !== -1
useEffect(() => {
if (selectedTab !== Tabs.EVENTS) closePopup()
}, [selectedTab, closePopup])
return {
hasLessThanFourTabs,
isEventTabVisible,
isPlayersTabVisible,
isStatsTabVisible,
isWatchTabVisible,
onTabClick: setSelectedTab,
selectedTab,
showTabs,
}
}

118
src/features/MatchSidePlaylists/index.tsx
Unescape View File

@ -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,63 +136,57 @@ export const MatchSidePlaylists = ({
isTourOpen={Boolean(isOpen)}
isHidden={!profileCardShown}
>
<TabsWrapper>
<TabsGroup hasLessThanFourTabs={hasLessThanFourTabs}>
{isWatchTabVisible ? (
<Tab
aria-pressed={selectedTab === Tabs.WATCH}
onClick={() => onTabClick(Tabs.WATCH)}
id='match_watch'
>
<TabButton>
<TabIcon icon='watch' />
<TabTitle t='watch' />
</TabButton>
</Tab>
) : null}
{isEventTabVisible ? (
<Tab
aria-pressed={selectedTab === Tabs.EVENTS}
onClick={() => onTabClick(Tabs.EVENTS)}
id='match_plays'
>
<TabButton>
<TabIcon icon='plays' />
<TabTitle t='actions' />
</TabButton>
</Tab>
) : null}
{isPlayersTabVisible ? (
<Tab
aria-pressed={selectedTab === Tabs.PLAYERS}
onClick={() => onTabClick(Tabs.PLAYERS)}
id='match_players'
>
<TabButton>
<TabIcon icon='players' />
<TabTitle t='players' />
</TabButton>
</Tab>
) : null}
{isStatsTabVisible ? (
<Tab
aria-pressed={selectedTab === Tabs.STATS}
onClick={() => onTabClick(Tabs.STATS)}
data-step={Steps.Start}
id='match_stats'
>
{Boolean(currentStep === Steps.Start && isOpen) && (
<Spotlight />
)}
<TabButton>
<TabIcon icon='stats' />
<TabTitle t='stats' />
</TabButton>
</Tab>
) : null}
</TabsGroup>
</TabsWrapper>
{showTabs
&& (
<TabsWrapper>
<TabsGroup>
<Tab
aria-pressed={selectedTab === Tabs.WATCH}
onClick={() => onTabClick(Tabs.WATCH)}
id='match_watch'
>
<TabButton>
<TabIcon icon='watch' />
<TabTitle t='watch' />
</TabButton>
</Tab>
<Tab
aria-pressed={selectedTab === Tabs.EVENTS}
onClick={() => onTabClick(Tabs.EVENTS)}
id='match_plays'
>
<TabButton>
<TabIcon icon='plays' />
<TabTitle t='actions' />
</TabButton>
</Tab>
<Tab
aria-pressed={selectedTab === Tabs.PLAYERS}
onClick={() => onTabClick(Tabs.PLAYERS)}
id='match_players'
>
<TabButton>
<TabIcon icon='players' />
<TabTitle t='players' />
</TabButton>
</Tab>
<Tab
aria-pressed={selectedTab === Tabs.STATS}
onClick={() => onTabClick(Tabs.STATS)}
data-step={Steps.Start}
id='match_stats'
>
{Boolean(currentStep === Steps.Start && isOpen) && (
<Spotlight />
)}
<TabButton>
<TabIcon icon='stats' />
<TabTitle t='stats' />
</TabButton>
</Tab>
</TabsGroup>
</TabsWrapper>
)}
<Container
hasScroll={hasTabPaneScroll}
ref={tabPaneContainerRef}

20
src/features/MatchSidePlaylists/styled.tsx
Unescape View File

@ -54,28 +54,10 @@ export const Wrapper = styled.div<WrapperProps>`
export const TabsWrapper = styled.div``
type TabsGroupProps = {
hasLessThanFourTabs?: boolean,
}
export const TabsGroup = styled.div.attrs({ role: 'tablist' })<TabsGroupProps>`
export const TabsGroup = styled.div.attrs({ role: 'tablist' })`
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)`

4
src/hooks/useInterval.tsx
Unescape View File

@ -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 }
}

2
src/requests/getMatchParticipants.tsx
Unescape View File

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

4
src/requests/getMatchScore.tsx
Unescape View File

@ -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,

Write Preview
Loading…
Cancel
Save