From fe18150ee72a10a3fdc71e8e6dc88d24b53c2fb3 Mon Sep 17 00:00:00 2001 From: Ruslan Khayrullin Date: Thu, 1 Jun 2023 14:56:45 +0500 Subject: [PATCH] fix(in-655): incorrect team stats lexics --- .../components/TeamsStatsTable/Cell.tsx | 68 ++++++++++++++++--- .../components/TeamsStatsTable/hooks.tsx | 26 ++++++- .../components/TeamsStatsTable/index.tsx | 6 +- .../components/TeamsStatsTable/styled.tsx | 6 +- 4 files changed, 89 insertions(+), 17 deletions(-) diff --git a/src/features/MatchSidePlaylists/components/TeamsStatsTable/Cell.tsx b/src/features/MatchSidePlaylists/components/TeamsStatsTable/Cell.tsx index 9b29e6fd..112456ac 100644 --- a/src/features/MatchSidePlaylists/components/TeamsStatsTable/Cell.tsx +++ b/src/features/MatchSidePlaylists/components/TeamsStatsTable/Cell.tsx @@ -1,11 +1,16 @@ import { Fragment, useRef } from 'react' +import { createPortal } from 'react-dom' import { useQueryClient } from 'react-query' import { useTour } from '@reactour/tour' import isNumber from 'lodash/isNumber' -import { KEYBOARD_KEYS, querieKeys } from 'config' +import { + isMobileDevice, + KEYBOARD_KEYS, + querieKeys, +} from 'config' import type { Param, @@ -14,7 +19,12 @@ import type { } from 'requests' import { getStatsEvents } from 'requests' -import { usePageParams, useEventListener } from 'hooks' +import { + usePageParams, + useEventListener, + useTooltip, + useModalRoot, +} from 'hooks' import { getHalfTime } from 'features/MatchPage/helpers/getHalfTime' import { useMatchPageStore } from 'features/MatchPage/store' @@ -24,6 +34,7 @@ import { Spotlight, Steps } from 'features/MatchTour' import { StatsType } from '../TabStats/config' import { CircleAnimationBar } from '../CircleAnimationBar' +import { Tooltip } from '../TabStats/styled' import { CellContainer, ParamValueContainer, @@ -59,14 +70,28 @@ export const Cell = ({ watchAllEpisodesTimer, } = useMatchPageStore() - const { shortSuffix, suffix } = useLexicsStore() + const { suffix } = useLexicsStore() const { currentStep, isOpen } = useTour() const client = useQueryClient() + const { + isTooltipShown, + onMouseLeave, + onMouseOver, + tooltipStyle, + tooltipText, + } = useTooltip() + + const modalRoot = useModalRoot() + + const { translate } = useLexicsStore() + const matchScore = client.getQueryData(querieKeys.matchScore) + const isTeam1 = teamId === profile?.team1.id + const getDisplayedValue = (val: number | null) => ( isNumber(val) ? String(val) : '-' ) @@ -104,7 +129,7 @@ export const Cell = ({ setEpisodeInfo({ episodesCount: param.val!, paramName, - playerOrTeamName: teamId === profile?.team1.id + playerOrTeamName: isTeam1 ? profile.team1[`name_${suffix}`] : profile?.team2[`name_${suffix}`] || '', }) @@ -122,7 +147,7 @@ export const Cell = ({ ? teamStatItem.param1 : teamStatItem.param2) - param && onParamClick(param, teamStatItem[`name_${shortSuffix}`]) + param && onParamClick(param, translate(teamStatItem.lexic)) }, event: 'keydown', target: paramValueContainerRef, @@ -137,7 +162,7 @@ export const Cell = ({ && playingData.team.paramId === teamStatItem.param1.id && playingData.team.id === teamId ? ( - + onParamClick(teamStatItem.param1, teamStatItem[`name_${shortSuffix}`])} + onClick={() => onParamClick(teamStatItem.param1, translate(teamStatItem.lexic))} data-param-id={teamStatItem.param1.id} hasValue={Boolean(teamStatItem.param1.val)} // eslint-disable-next-line react/jsx-props-no-spreading {...firstClickableParam === teamStatItem.param1 && { 'data-step': Steps.ClickToWatchPlaylist, }} + // eslint-disable-next-line react/jsx-props-no-spreading + {...!isMobileDevice && isNumber(teamStatItem.param1.val) && teamStatItem.param2 && { + onMouseLeave, + onMouseOver: onMouseOver({ + horizontalPosition: isTeam1 ? 'left' : 'right', + tooltipText: translate(teamStatItem.param1.lexic), + }), + }} > {getDisplayedValue(teamStatItem.param1.val)} {firstClickableParam === teamStatItem.param1 @@ -168,7 +201,7 @@ export const Cell = ({ && playingData.team.paramId === teamStatItem.param2.id && playingData.team.id === teamId ? ( - + / onParamClick(teamStatItem.param2!, teamStatItem[`name_${shortSuffix}`])} + onClick={() => onParamClick( + teamStatItem.param2!, + translate(teamStatItem.lexic), + )} data-param-id={teamStatItem.param2.id} hasValue={Boolean(teamStatItem.param2.val)} // eslint-disable-next-line react/jsx-props-no-spreading {...firstClickableParam === teamStatItem.param2 && { 'data-step': Steps.ClickToWatchPlaylist, }} + // eslint-disable-next-line react/jsx-props-no-spreading + {...!isMobileDevice && isNumber(teamStatItem.param2.val) && { + onMouseLeave, + onMouseOver: onMouseOver({ + horizontalPosition: isTeam1 ? 'left' : 'right', + tooltipText: translate(teamStatItem.param2.lexic), + }), + }} > {getDisplayedValue(teamStatItem.param2.val)} {firstClickableParam === teamStatItem.param2 @@ -198,6 +242,12 @@ export const Cell = ({ )} + {isTooltipShown && modalRoot.current && createPortal( + + {tooltipText} + , + modalRoot.current, + )} ) } diff --git a/src/features/MatchSidePlaylists/components/TeamsStatsTable/hooks.tsx b/src/features/MatchSidePlaylists/components/TeamsStatsTable/hooks.tsx index c3f1bf7d..ff5bd97e 100644 --- a/src/features/MatchSidePlaylists/components/TeamsStatsTable/hooks.tsx +++ b/src/features/MatchSidePlaylists/components/TeamsStatsTable/hooks.tsx @@ -1,8 +1,12 @@ -import { useEffect } from 'react' +import { useEffect, useMemo } from 'react' import find from 'lodash/find' +import reduce from 'lodash/reduce' + +import type { TeamStatItem } from 'requests' import { useMatchPageStore } from 'features/MatchPage/store' +import { useLexicsConfig } from 'features/LexicsStore' export const useTeamsStatsTable = () => { const { @@ -13,6 +17,26 @@ export const useTeamsStatsTable = () => { teamsStats, } = useMatchPageStore() + const lexicsIds = useMemo( + () => ( + profile + ? reduce>( + teamsStats[profile.team1.id], + (acc, curr) => { + !acc.includes(curr.lexic) && acc.push(curr.lexic) + !acc.includes(curr.param1.lexic) && acc.push(curr.param1.lexic) + curr.param2 && !acc.includes(curr.param2.lexic) && acc.push(curr.param2.lexic) + + return acc + }, + [], + ) + : []), + [profile, teamsStats], + ) + + useLexicsConfig(lexicsIds) + const getStatItemById = (paramId: number) => { if (!profile) return null diff --git a/src/features/MatchSidePlaylists/components/TeamsStatsTable/index.tsx b/src/features/MatchSidePlaylists/components/TeamsStatsTable/index.tsx index c1c05cde..dc5f59f6 100644 --- a/src/features/MatchSidePlaylists/components/TeamsStatsTable/index.tsx +++ b/src/features/MatchSidePlaylists/components/TeamsStatsTable/index.tsx @@ -3,7 +3,6 @@ import { useTour } from '@reactour/tour' import map from 'lodash/map' import { useMatchPageStore } from 'features/MatchPage/store' -import { useLexicsStore } from 'features/LexicsStore' import { Loader } from 'features/Loader' import { defaultTheme } from 'features/Theme/config' @@ -32,8 +31,6 @@ export const TeamsStatsTable = () => { getStatItemById, } = useTeamsStatsTable() - const { shortSuffix } = useLexicsStore() - const { isOpen } = useTour() if (!profile) return null @@ -69,7 +66,6 @@ export const TeamsStatsTable = () => { {map(teamsStats[profile.team1.id], (team1StatItem) => { const team2StatItem = getStatItemById(team1StatItem.param1.id) - const statItemTitle = team1StatItem[`name_${shortSuffix}`] return ( @@ -80,7 +76,7 @@ export const TeamsStatsTable = () => { /> - {statItemTitle} + ({ : '')} ` -export const StatItemTitle = styled.span` +export const StatItemTitle = styled(T9n)` color: ${({ theme }) => theme.colors.white}; letter-spacing: -0.078px; text-transform: uppercase;