fix(in-655): incorrect team stats lexics

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<MatchScore>(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
           ? (
-            <ParamValue>
+            <ParamValue onMouseLeave={onMouseLeave}>
               <CircleAnimationBar
                 text={getDisplayedValue(teamStatItem.param1.val)}
                 size={22}
@@ -147,13 +172,21 @@ export const Cell = ({
           : (
             <ParamValue
               clickable={isClickable(teamStatItem.param1)}
-              onClick={() => 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
               ? (
-                <ParamValue>
+                <ParamValue onMouseLeave={onMouseLeave}>
                   <CircleAnimationBar
                     text={getDisplayedValue(teamStatItem.param2.val)}
                     size={22}
@@ -180,13 +213,24 @@ export const Cell = ({
                   <Divider>/</Divider>
                   <ParamValue
                     clickable={isClickable(teamStatItem.param2)}
-                    onClick={() => 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 = ({
           </Fragment>
         )}
       </ParamValueContainer>
+      {isTooltipShown && modalRoot.current && createPortal(
+        <Tooltip style={tooltipStyle}>
+          {tooltipText}
+        </Tooltip>,
+        modalRoot.current,
+      )}
     </CellContainer>
   )
 }

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<TeamStatItem, Array<number>>(
+          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
 

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 = () => {
           <tbody>
             {map(teamsStats[profile.team1.id], (team1StatItem) => {
               const team2StatItem = getStatItemById(team1StatItem.param1.id)
-              const statItemTitle = team1StatItem[`name_${shortSuffix}`]
 
               return (
                 <Row key={team1StatItem.param1.id}>
@@ -80,7 +76,7 @@ export const TeamsStatsTable = () => {
                   />
 
                   <CellContainer>
-                    <StatItemTitle>{statItemTitle}</StatItemTitle>
+                    <StatItemTitle t={team1StatItem.lexic} />
                   </CellContainer>
 
                   <Cell

src/features/MatchSidePlaylists/components/TeamsStatsTable/styled.tsx

@@ -4,6 +4,7 @@ import { isMobileDevice } from 'config'
 
 import { Name } from 'features/Name'
 import { customScrollbar } from 'features/Common'
+import { T9n } from 'features/T9n'
 
 export const Container = styled.div``
 
@@ -59,11 +60,12 @@ export const CellContainer = styled.td`
   }
 
   :first-child, :last-child {
-    width: 32px;
+    width: 50px;
   }
 
   :first-child {
     padding-left: 12px;
+    text-align: left;
   }
 
   :last-child {
@@ -122,7 +124,7 @@ export const ParamValue = styled.span.attrs(({ clickable }: TParamValue) => ({
     : '')}
 `
 
-export const StatItemTitle = styled.span`
+export const StatItemTitle = styled(T9n)`
   color: ${({ theme }) => theme.colors.white};
   letter-spacing: -0.078px;
   text-transform: uppercase;