Ott 455 sport name refactor (#153)

* feat(ott-445): changed sportName component logic

* fix(ott-455): minor changes

* fix(ott-455): added sport types enum

Co-authored-by: Armen <armen9339@gmail.com>

src/features/Common/SportName/index.tsx

@@ -1,17 +1,21 @@
-import styled from 'styled-components/macro'
+import React from 'react'
 
-import { devices } from 'config/devices'
-import { T9n } from 'features/T9n'
+import { SportTypes } from 'config'
 
-export const SportName = styled(T9n)<{ color: string }>`
-  margin-right: 10px;
-  font-size: 11px;
-  color: ${({ color }) => color};
-  letter-spacing: 0.02em;
-  text-transform: uppercase;
+import { getSportColor, getSportLexic } from 'helpers'
 
-  @media ${devices.tablet} {
-    font-size: 10px;
-    margin-right: 5px;
-  }
-`
+import { useLexicsStore } from 'features/LexicsStore'
+
+import { Text } from './styled'
+
+type SportNameProps = { sport: SportTypes }
+
+export const SportName = ({ sport }: SportNameProps) => {
+  const { translate } = useLexicsStore()
+
+  return (
+    <Text color={getSportColor(sport)}>
+      {translate(getSportLexic(sport))}
+    </Text>
+  )
+}

src/features/Common/SportName/styled.tsx

@@ -0,0 +1,16 @@
+import styled from 'styled-components/macro'
+
+import { devices } from 'config/devices'
+
+export const Text = styled.span<{ color: string }>`
+  margin-right: 10px;
+  font-size: 11px;
+  color: ${({ color }) => color};
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+
+  @media ${devices.tablet} {
+    font-size: 10px;
+    margin-right: 5px;
+  }
+`

src/features/HeaderFilters/components/TournamentFilter/helpers.tsx

@@ -5,8 +5,6 @@ import { Tournaments } from 'requests'
 import { ProfileTypes } from 'config'
 import {
   getProfileLogo,
-  getSportColor,
-  getSportLexic,
   getProfileFallbackLogo,
 } from 'helpers'
 
@@ -16,9 +14,7 @@ type ShortName = 'short_name_rus' | 'short_name_eng'
 export const normalizeTournaments = (tournaments: Tournaments, suffix: string) => (
   map(tournaments, (tournament) => {
     const profileType = ProfileTypes.TOURNAMENTS
-    const { c_sport: sportType, id } = tournament
-    const color = getSportColor(sportType)
-    const sportLexic = getSportLexic(sportType)
+    const { id, sport: sportType } = tournament
     const name = tournament[`name_${suffix}` as Name]
     const shortName = tournament[`short_name_${suffix}` as ShortName] || name
     const country = tournament.country?.[`name_${suffix}` as Name]
@@ -32,16 +28,14 @@ export const normalizeTournaments = (tournaments: Tournaments, suffix: string) =
       profileType,
       sportType,
     })
-
     return {
-      color,
       country,
       fallbackImage,
       id,
       logo,
       name,
       shortName,
-      sportLexic,
+      sportType,
     }
   })
 )

src/features/HeaderFilters/components/TournamentFilter/hooks.tsx

@@ -50,6 +50,7 @@ export const useTournamentFilter = () => {
   }
 
   const tournaments = normalizeTournaments(list, suffix)
+
   const selectedTournament = find(
     tournaments,
     (tournament) => tournament.id === selectedTournamentId,

src/features/HeaderFilters/components/TournamentList/index.tsx

@@ -2,6 +2,8 @@ import React from 'react'
 
 import map from 'lodash/map'
 
+import { SportTypes } from 'config'
+
 import { useItemsList } from 'features/ItemsList/hooks'
 import {
   Logo,
@@ -16,13 +18,12 @@ import { SportName } from 'features/Common'
 import { ListItem } from './styled'
 
 type Tournament = {
-  color: string,
   country?: string,
   fallbackImage: string,
   id: number,
   logo: string,
   name: string,
-  sportLexic: string,
+  sportType: SportTypes,
 }
 
 type TournamentListProps = {
@@ -39,13 +40,12 @@ export const TournamentList = ({ onSelect, tournaments }: TournamentListProps) =
   return (
     <Wrapper ref={ref} role='listbox'>
       {map(tournaments, ({
-        color,
         country,
         fallbackImage,
         id,
         logo,
         name,
-        sportLexic,
+        sportType,
       }) => (
         <ListItem
           key={`${id}_${name}`}
@@ -61,10 +61,7 @@ export const TournamentList = ({ onSelect, tournaments }: TournamentListProps) =
           </LogoWrapper>
           <ItemInfo>
             <Name>{name}</Name>
-            <SportName
-              color={color}
-              t={sportLexic}
-            />
+            <SportName sport={sportType} />
             <TeamOrCountry>{country}</TeamOrCountry>
           </ItemInfo>
         </ListItem>

src/features/ItemsList/index.tsx

@@ -2,6 +2,8 @@ import React from 'react'
 
 import map from 'lodash/map'
 
+import { SportTypes } from 'config'
+
 import { SportName } from 'features/Common'
 
 import { useItemsList } from './hooks'
@@ -25,7 +27,7 @@ type SearchItemsListProps = {
     logo: string,
     name: string,
     profileUrl: string,
-    sportLexic: string,
+    sportType: SportTypes,
     teamOrCountry?: string,
   }>,
 }
@@ -39,13 +41,12 @@ export const ItemsList = ({ close, list }: SearchItemsListProps) => {
   return (
     <Wrapper ref={ref}>
       {map(list, ({
-        color,
         fallbackImage,
         id,
         logo,
         name,
         profileUrl,
-        sportLexic,
+        sportType,
         teamOrCountry,
       }) => (
         <Item key={id}>
@@ -58,10 +59,7 @@ export const ItemsList = ({ close, list }: SearchItemsListProps) => {
             </LogoWrapper>
             <ItemInfo>
               <Name>{name}</Name>
-              <SportName
-                color={color}
-                t={sportLexic}
-              />
+              <SportName sport={sportType} />
               <TeamOrCountry>{teamOrCountry}</TeamOrCountry>
             </ItemInfo>
           </StyledLink>

src/features/MatchCard/CardFinished/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 
 import type { Match } from 'features/Matches'
-import { getSportColor } from 'helpers'
 import { SportName } from 'features/Common'
 
 import { useCard } from '../hooks'
@@ -76,7 +75,7 @@ export const CardFinished = ({
         />
       </PreviewWrapper>
       <Info>
-        <SportName t={sportName} color={getSportColor(sportType)} />
+        <SportName sport={sportType} />
         <TournamentName title={tournamentName}>{tournamentName}</TournamentName>
         <Teams>
           <Team>

src/features/MatchCard/CardLive/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 
 import type { Match } from 'features/Matches'
-import { getSportColor } from 'helpers'
 import { SportName } from 'features/Common'
 
 import { useCard } from '../hooks'
@@ -76,7 +75,7 @@ export const CardLive = ({
         />
       </PreviewWrapper>
       <Info>
-        <SportName t={sportName} color={getSportColor(sportType)} />
+        <SportName sport={sportType} />
         <TournamentName title={tournamentName}>{tournamentName}</TournamentName>
         <Teams>
           <Team>

src/features/MatchCard/CardSoon/index.tsx

@@ -5,7 +5,7 @@ import styled from 'styled-components/macro'
 import { devices } from 'config/devices'
 
 import type { Match } from 'features/Matches'
-import { getSportColor, handleImageError } from 'helpers'
+import { handleImageError } from 'helpers'
 import { SportName } from 'features/Common'
 
 import {
@@ -99,7 +99,7 @@ export const CardSoon = ({
         </TeamLogos>
       </PreviewWrapper>
       <Info>
-        <SportName t={sportName} color={getSportColor(sportType)} />
+        <SportName sport={sportType} />
         <TournamentName title={tournamentName}>{tournamentName}</TournamentName>
         <Teams>
           <Team>

src/features/MatchPage/MatchProfileCard/index.tsx

@@ -3,7 +3,6 @@ import React, { Fragment } from 'react'
 import isNull from 'lodash/isNull'
 
 import { getProfileUrl } from 'helpers'
-import { getSportColor } from 'helpers/getSportColor'
 
 import { ProfileTypes } from 'config'
 
@@ -27,12 +26,11 @@ type Props = {
 }
 
 export const MatchProfileCard = ({ profile }: Props) => {
-  const { sportName, sportType } = useSportNameParam()
+  const { sportType } = useSportNameParam()
   const { isHidden } = useScoreStore()
 
   if (!profile) return <Wrapper />
 
-  const color = getSportColor(sportType)
   const {
     team1,
     team2,
@@ -74,10 +72,7 @@ export const MatchProfileCard = ({ profile }: Props) => {
           </Teams>
 
           <Tournament>
-            <SportName
-              color={color}
-              t={sportName}
-            />
+            <SportName sport={sportType} />
             <StyledLink to={getProfileUrl({
               id: tournament.id,
               profileType: ProfileTypes.TOURNAMENTS,

src/features/Search/hooks/useNormalizedItems.tsx

@@ -5,7 +5,6 @@ import { ProfileTypes } from 'config'
 import {
   getProfileLogo,
   getSportColor,
-  getSportLexic,
   getProfileFallbackLogo,
   getProfileUrl,
 } from 'helpers'
@@ -28,8 +27,6 @@ export const useNormalizedItems = (searchItems: SearchItems) => {
     const lastName = player[`lastname_${suffix}` as Lastname]
     const teamName = player.team?.[`name_${suffix}` as Name]
 
-    const sportLexic = getSportLexic(sportType)
-
     const logo = getProfileLogo({
       id,
       profileType,
@@ -51,7 +48,7 @@ export const useNormalizedItems = (searchItems: SearchItems) => {
         profileType: ProfileTypes.PLAYERS,
         sportType,
       }),
-      sportLexic,
+      sportType,
       teamOrCountry: teamName,
     }
   })
@@ -61,8 +58,6 @@ export const useNormalizedItems = (searchItems: SearchItems) => {
     const profileType = ProfileTypes.TEAMS
     const name = team[`name_${suffix}` as Name]
 
-    const sportLexic = getSportLexic(sportType)
-
     const logo = getProfileLogo({
       id,
       profileType,
@@ -86,7 +81,7 @@ export const useNormalizedItems = (searchItems: SearchItems) => {
         profileType: ProfileTypes.TEAMS,
         sportType,
       }),
-      sportLexic,
+      sportType,
       teamOrCountry: country,
     }
   })
@@ -96,8 +91,6 @@ export const useNormalizedItems = (searchItems: SearchItems) => {
     const { id, sport: sportType } = tournament
     const name = tournament[`name_${suffix}` as Name]
 
-    const sportLexic = getSportLexic(sportType)
-
     const logo = getProfileLogo({
       id,
       profileType,
@@ -121,7 +114,7 @@ export const useNormalizedItems = (searchItems: SearchItems) => {
         profileType: ProfileTypes.TOURNAMENTS,
         sportType,
       }),
-      sportLexic,
+      sportType,
       teamOrCountry: country,
     }
   })

src/requests/getSportTournaments.tsx

@@ -14,15 +14,15 @@ type Country = {
 }
 
 export type Tournament = {
-  c_gender: number | null,
-  c_sport: SportTypes,
-  c_tournament_type: number,
   country: Country,
+  gender: number | null,
   id: number,
   name_eng: string,
   name_rus: string,
   short_name_eng: string | null,
   short_name_rus: string | null,
+  sport: SportTypes,
+  tournament_type: number,
 }
 
 export type Tournaments = Array<Tournament>