From 57dcf853c107eff9b53a5c02ad3f886af87a2ec4 Mon Sep 17 00:00:00 2001 From: Armen9339 <71372704+Armen9339@users.noreply.github.com> Date: Fri, 18 Sep 2020 10:36:28 +0300 Subject: [PATCH] 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 --- src/features/Common/SportName/index.tsx | 32 +++++++++++-------- src/features/Common/SportName/styled.tsx | 16 ++++++++++ .../components/TournamentFilter/helpers.tsx | 10 ++---- .../components/TournamentFilter/hooks.tsx | 1 + .../components/TournamentList/index.tsx | 13 +++----- src/features/ItemsList/index.tsx | 12 +++---- src/features/MatchCard/CardFinished/index.tsx | 3 +- src/features/MatchCard/CardLive/index.tsx | 3 +- src/features/MatchCard/CardSoon/index.tsx | 4 +-- .../MatchPage/MatchProfileCard/index.tsx | 9 ++---- .../Search/hooks/useNormalizedItems.tsx | 13 ++------ src/requests/getSportTournaments.tsx | 6 ++-- 12 files changed, 59 insertions(+), 63 deletions(-) create mode 100644 src/features/Common/SportName/styled.tsx diff --git a/src/features/Common/SportName/index.tsx b/src/features/Common/SportName/index.tsx index 9bf3cccc..bb64b86d 100644 --- a/src/features/Common/SportName/index.tsx +++ b/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 ( + + {translate(getSportLexic(sport))} + + ) +} diff --git a/src/features/Common/SportName/styled.tsx b/src/features/Common/SportName/styled.tsx new file mode 100644 index 00000000..86cce731 --- /dev/null +++ b/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; + } +` diff --git a/src/features/HeaderFilters/components/TournamentFilter/helpers.tsx b/src/features/HeaderFilters/components/TournamentFilter/helpers.tsx index fe3e6802..ab3b467b 100644 --- a/src/features/HeaderFilters/components/TournamentFilter/helpers.tsx +++ b/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, } }) ) diff --git a/src/features/HeaderFilters/components/TournamentFilter/hooks.tsx b/src/features/HeaderFilters/components/TournamentFilter/hooks.tsx index ee818e92..54f73e35 100644 --- a/src/features/HeaderFilters/components/TournamentFilter/hooks.tsx +++ b/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, diff --git a/src/features/HeaderFilters/components/TournamentList/index.tsx b/src/features/HeaderFilters/components/TournamentList/index.tsx index ed031cf1..efc74ba5 100644 --- a/src/features/HeaderFilters/components/TournamentList/index.tsx +++ b/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 ( {map(tournaments, ({ - color, country, fallbackImage, id, logo, name, - sportLexic, + sportType, }) => ( {name} - + {country} diff --git a/src/features/ItemsList/index.tsx b/src/features/ItemsList/index.tsx index 9621d64c..415cdef8 100644 --- a/src/features/ItemsList/index.tsx +++ b/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 ( {map(list, ({ - color, fallbackImage, id, logo, name, profileUrl, - sportLexic, + sportType, teamOrCountry, }) => ( @@ -58,10 +59,7 @@ export const ItemsList = ({ close, list }: SearchItemsListProps) => { {name} - + {teamOrCountry} diff --git a/src/features/MatchCard/CardFinished/index.tsx b/src/features/MatchCard/CardFinished/index.tsx index 06f4fb29..ac6f44e3 100644 --- a/src/features/MatchCard/CardFinished/index.tsx +++ b/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 = ({ /> - + {tournamentName} diff --git a/src/features/MatchCard/CardLive/index.tsx b/src/features/MatchCard/CardLive/index.tsx index cce24e24..24f306a5 100644 --- a/src/features/MatchCard/CardLive/index.tsx +++ b/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 = ({ /> - + {tournamentName} diff --git a/src/features/MatchCard/CardSoon/index.tsx b/src/features/MatchCard/CardSoon/index.tsx index 14b1d3fd..48911498 100644 --- a/src/features/MatchCard/CardSoon/index.tsx +++ b/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 = ({ - + {tournamentName} diff --git a/src/features/MatchPage/MatchProfileCard/index.tsx b/src/features/MatchPage/MatchProfileCard/index.tsx index 6cd983f4..f1446190 100644 --- a/src/features/MatchPage/MatchProfileCard/index.tsx +++ b/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 - const color = getSportColor(sportType) const { team1, team2, @@ -74,10 +72,7 @@ export const MatchProfileCard = ({ profile }: Props) => { - + { 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, } }) diff --git a/src/requests/getSportTournaments.tsx b/src/requests/getSportTournaments.tsx index 1e411c91..76d12290 100644 --- a/src/requests/getSportTournaments.tsx +++ b/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