diff --git a/src/features/HeaderFilters/components/TournamentFilter/helpers.tsx b/src/features/HeaderFilters/components/TournamentFilter/helpers.tsx deleted file mode 100644 index 0d011191..00000000 --- a/src/features/HeaderFilters/components/TournamentFilter/helpers.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import map from 'lodash/map' - -import { Tournaments } from 'requests' - -import { ProfileTypes } from 'config' - -type Name = 'name_rus' | 'name_eng' -type ShortName = 'short_name_rus' | 'short_name_eng' - -export const normalizeTournaments = (tournaments: Tournaments, suffix: string) => ( - map(tournaments, (tournament) => { - const profileType = ProfileTypes.TOURNAMENTS - 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] - return { - country, - id, - name, - profileType, - shortName, - sportType, - } - }) -) diff --git a/src/features/HeaderFilters/components/TournamentFilter/hooks.tsx b/src/features/HeaderFilters/components/TournamentFilter/hooks.tsx index 42c210f9..973645be 100644 --- a/src/features/HeaderFilters/components/TournamentFilter/hooks.tsx +++ b/src/features/HeaderFilters/components/TournamentFilter/hooks.tsx @@ -8,14 +8,9 @@ import { getSportTournaments } from 'requests' import { useRequest, useToggle } from 'hooks' import { useHeaderFiltersStore } from 'features/HeaderFilters' -import { useLexicsStore } from 'features/LexicsStore' - -import { normalizeTournaments } from './helpers' export const useTournamentFilter = () => { - const [list, setList] = useState([]) - - const { suffix } = useLexicsStore() + const [tournaments, setTournaments] = useState([]) const { selectedSportTypeId, @@ -34,9 +29,9 @@ export const useTournamentFilter = () => { const [page, setPage] = useState(0) useEffect(() => { - setList([]) - requestTournaments(selectedSportTypeId, 0).then((tournaments) => { - setList(tournaments) + setTournaments([]) + requestTournaments(selectedSportTypeId, 0).then((newTournaments) => { + setTournaments(newTournaments) setPage(1) }) }, [selectedSportTypeId, requestTournaments]) @@ -45,12 +40,10 @@ export const useTournamentFilter = () => { if (isFetching) return const newTournaments = await requestTournaments(selectedSportTypeId, page) - setList([...list, ...newTournaments]) + setTournaments([...tournaments, ...newTournaments]) setPage(page + 1) } - const tournaments = normalizeTournaments(list, suffix) - const selectedTournament = find( tournaments, (tournament) => tournament.id === selectedTournamentId, diff --git a/src/features/HeaderFilters/components/TournamentFilter/index.tsx b/src/features/HeaderFilters/components/TournamentFilter/index.tsx index f017cb04..3bcb1e7f 100644 --- a/src/features/HeaderFilters/components/TournamentFilter/index.tsx +++ b/src/features/HeaderFilters/components/TournamentFilter/index.tsx @@ -1,6 +1,7 @@ import React from 'react' import { T9n } from 'features/T9n' +import { Name } from 'features/Name' import { OutsideClick } from 'features/OutsideClick' import { TournamentList } from '../TournamentList' @@ -36,7 +37,7 @@ export const TournamentFilter = () => { { selectedTournament - ? selectedTournament.shortName + ? : } diff --git a/src/features/HeaderFilters/components/TournamentList/index.tsx b/src/features/HeaderFilters/components/TournamentList/index.tsx index e8b614c3..2c43a364 100644 --- a/src/features/HeaderFilters/components/TournamentList/index.tsx +++ b/src/features/HeaderFilters/components/TournamentList/index.tsx @@ -2,7 +2,8 @@ import React from 'react' import map from 'lodash/map' -import { SportTypes, ProfileTypes } from 'config' +import type { Tournaments } from 'requests' +import { ProfileTypes } from 'config' import { Logo, @@ -16,45 +17,31 @@ import { SportName } from 'features/Common' import { ListItem } from './styled' -type Tournament = { - country?: string, - id: number, - name: string, - profileType: ProfileTypes, - sportType: SportTypes, -} - type TournamentListProps = { onSelect: (id: number) => void, - tournaments: Array, + tournaments: Tournaments, } export const TournamentList = ({ onSelect, tournaments }: TournamentListProps) => ( - {map(tournaments, ({ - country, - id, - name, - profileType, - sportType, - }) => ( + {map(tournaments, (tournament) => ( onSelect(id)} + key={`${tournament.id}_${tournament.name_eng}`} + onClick={() => onSelect(tournament.id)} role='option' > - {name} - - {country} + + + ))} diff --git a/src/features/ItemsList/index.tsx b/src/features/ItemsList/index.tsx index 914e3ff9..b8f25460 100644 --- a/src/features/ItemsList/index.tsx +++ b/src/features/ItemsList/index.tsx @@ -21,49 +21,55 @@ import { GenderComponent, } from './styled' +type Name = { + name_eng: string, + name_rus: string, +} + type SearchItemsListProps = { close: () => void, list: Array<{ gender?: Gender, id: number, - name: string, - profileType: ProfileTypes, - profileUrl: string, - sportType: SportTypes, - teamOrCountry?: string, + name_eng: string, + name_rus: string, + sport: SportTypes, + teamOrCountry?: Name, }>, + profileType: ProfileTypes, } -export const ItemsList = ({ close, list }: SearchItemsListProps) => { +export const ItemsList = ({ + close, + list, + profileType, +}: SearchItemsListProps) => { const { ref } = useItemsList() return ( - {map(list, ({ - gender, - id, - name, - profileType, - profileUrl, - sportType, - teamOrCountry, - }) => ( - - + {map(list, (item) => ( + + - {name} - - {teamOrCountry} + + + {item.teamOrCountry && } - {gender && } + {item.gender && } ))} diff --git a/src/features/ItemsList/styled.tsx b/src/features/ItemsList/styled.tsx index 0eaacead..0b248a34 100644 --- a/src/features/ItemsList/styled.tsx +++ b/src/features/ItemsList/styled.tsx @@ -1,9 +1,9 @@ -import { Link } from 'react-router-dom' - import styled from 'styled-components/macro' import { GenderComponent as GenderBase } from 'features/Gender' import { ProfileLogo } from 'features/ProfileLogo' +import { ProfileLink } from 'features/ProfileLink' +import { Name as NameBase } from 'features/Name' export const Wrapper = styled.ul` margin: 0; @@ -17,7 +17,7 @@ export const Item = styled.li` } ` -export const StyledLink = styled(Link)` +export const StyledLink = styled(ProfileLink)` position: relative; display: flex; align-items: center; @@ -37,7 +37,8 @@ export const ItemInfo = styled.div` line-height: 17px; ` -export const Name = styled.div` +export const Name = styled(NameBase)` + display: block; font-size: 16px; font-weight: bold; color: #ccc; @@ -46,7 +47,7 @@ export const Name = styled.div` overflow: hidden; ` -export const TeamOrCountry = styled.span` +export const TeamOrCountry = styled(NameBase)` font-size: 11px; color: #ccc; ` diff --git a/src/features/MatchCard/CardSoon/index.tsx b/src/features/MatchCard/CardSoon/index.tsx index 54c7e00a..d13bba7d 100644 --- a/src/features/MatchCard/CardSoon/index.tsx +++ b/src/features/MatchCard/CardSoon/index.tsx @@ -6,6 +6,7 @@ import { ProfileTypes } from 'config' import type { Match } from 'features/Matches' import { SportName } from 'features/Common' +import { useName } from 'features/Name' import { MatchDate, @@ -41,50 +42,53 @@ export const CardSoon = ({ team1, team2, time, - tournamentName, + tournament, }, showSportName, -}: CardSoonProps) => ( - - - {date} - - - - - - - - - - {showSportName && } - {tournamentName && ( - - {tournamentName} - - )} - - - {team1.name} - - - {team2.name} - - - - -) +}: CardSoonProps) => { + const tournamentName = useName(tournament) + return ( + + + {date} + + + + + + + + + + {showSportName && } + {tournamentName && ( + + {tournamentName} + + )} + + + + + + + + + + + ) +} diff --git a/src/features/MatchCard/MatchInfoCard/index.tsx b/src/features/MatchCard/MatchInfoCard/index.tsx index 5080fd30..1e4ed4c9 100644 --- a/src/features/MatchCard/MatchInfoCard/index.tsx +++ b/src/features/MatchCard/MatchInfoCard/index.tsx @@ -6,6 +6,7 @@ import { ProfileTypes } from 'config' import type { Match } from 'features/Matches' import { SportName } from 'features/Common' import { useScoreStore } from 'features/ToggleScore' +import { useName } from 'features/Name' import { CardWrapper, @@ -39,12 +40,13 @@ export const MatchInfoCard = ({ team1, team2, time, - tournamentName, + tournament, }, onClick, onKeyPress, showSportName, }: Props) => { + const tournamentName = useName(tournament) const { isHidden } = useScoreStore() return ( @@ -72,15 +74,15 @@ export const MatchInfoCard = ({ @@ -90,18 +92,18 @@ export const MatchInfoCard = ({ {showSportName && } - {tournamentName && ( + {tournament && ( {tournamentName} )} - {team1.name} + {!isHidden && {team1.score}} - {team2.name} + {!isHidden && {team2.score}} diff --git a/src/features/MatchCard/styled.tsx b/src/features/MatchCard/styled.tsx index dfb0f197..509295f9 100644 --- a/src/features/MatchCard/styled.tsx +++ b/src/features/MatchCard/styled.tsx @@ -3,6 +3,7 @@ import styled from 'styled-components/macro' import { devices } from 'config/devices' import { T9n } from 'features/T9n' +import { Name } from 'features/Name' import { ProfileLogo } from 'features/ProfileLogo' import { MATCH_CARD_WIDTH } from './config' @@ -124,7 +125,7 @@ export const Team = styled.div` color: #fff; ` -export const TeamName = styled.span` +export const TeamName = styled(Name)` max-width: 90%; text-overflow: ellipsis; white-space: nowrap; diff --git a/src/features/MatchPage/MatchProfileCard/index.tsx b/src/features/MatchPage/MatchProfileCard/index.tsx index c18c24d5..a68457fb 100644 --- a/src/features/MatchPage/MatchProfileCard/index.tsx +++ b/src/features/MatchPage/MatchProfileCard/index.tsx @@ -1,19 +1,17 @@ -import React, { Fragment } from 'react' - -import isNull from 'lodash/isNull' +import React from 'react' import format from 'date-fns/format' -import { getProfileUrl } from 'helpers' +import type { MatchInfo } from 'requests' import { ProfileTypes } from 'config' import { SportName } from 'features/Common/SportName' import { useScoreStore } from 'features/ToggleScore' +import { Name } from 'features/Name' import { useSportNameParam } from 'hooks/useSportNameParam' -import type { MatchProfile } from '../hooks/useMatchProfile' import { Wrapper, Teams, @@ -27,7 +25,7 @@ import { const dateFormat = 'dd.MM.yyyy' type Props = { - profile: MatchProfile, + profile: MatchInfo, } export const MatchProfileCard = ({ profile }: Props) => { @@ -44,52 +42,43 @@ export const MatchProfileCard = ({ profile }: Props) => { return ( - {!isNull(profile) - && ( - - - - {team1.name} - - { - !isHidden - ? ( - - {team1?.score} : {team2?.score} - - ) - : - } - - {team2.name} - - + + + + + { + isHidden + ? + : ( + + {team1?.score} : {team2?.score} + + ) + } + + + + - - - - {tournament?.name} - - - {format(new Date(profile.date), dateFormat)} - - )} + + + + + + + {format(new Date(profile.date), dateFormat)} ) } diff --git a/src/features/MatchPage/MatchProfileCard/styled.tsx b/src/features/MatchPage/MatchProfileCard/styled.tsx index 8d2b5cb9..026cc985 100644 --- a/src/features/MatchPage/MatchProfileCard/styled.tsx +++ b/src/features/MatchPage/MatchProfileCard/styled.tsx @@ -1,8 +1,7 @@ -import { Link } from 'react-router-dom' - import styled from 'styled-components/macro' import { devices } from 'config/devices' +import { ProfileLink } from 'features/ProfileLink' export const Wrapper = styled.div` display: flex; @@ -25,7 +24,7 @@ export const Teams = styled.div` display: flex; ` -export const StyledLink = styled(Link)` +export const StyledLink = styled(ProfileLink)` font-weight: bold; color: white; &:hover{ diff --git a/src/features/MatchPage/hooks/useMatchProfile.tsx b/src/features/MatchPage/hooks/useMatchProfile.tsx index 4c3145a4..25951ee7 100644 --- a/src/features/MatchPage/hooks/useMatchProfile.tsx +++ b/src/features/MatchPage/hooks/useMatchProfile.tsx @@ -1,45 +1,17 @@ import { useEffect, useState, - useMemo, } from 'react' import type { MatchInfo } from 'requests' import { getMatchInfo } from 'requests' -import { useLexicsStore } from 'features/LexicsStore' - import { useSportNameParam, usePageId } from 'hooks' -type Name = 'name_rus' | 'name_eng' - -const addNames = (profile: MatchInfo, suffixArg: string) => ( - profile - ? ({ - ...profile, - team1: { - ...profile.team1, - name: profile.team1[`name_${suffixArg}` as Name], - }, - team2: { - ...profile.team2, - name: profile.team2[`name_${suffixArg}` as Name], - }, - tournament: { - ...profile.tournament, - name: profile.tournament[`name_${suffixArg}` as Name], - }, - }) - : null -) - -export type MatchProfile = ReturnType - export const useMatchProfile = () => { - const [rawMatchProfile, setMatchProfile] = useState(null) + const [matchProfile, setMatchProfile] = useState(null) const { sportType } = useSportNameParam() const matchId = usePageId() - const { suffix } = useLexicsStore() useEffect(() => { getMatchInfo(sportType, matchId).then(setMatchProfile) @@ -49,10 +21,5 @@ export const useMatchProfile = () => { matchId, ]) - const matchProfile = useMemo( - () => addNames(rawMatchProfile, suffix), - [rawMatchProfile, suffix], - ) - return matchProfile } diff --git a/src/features/Matches/helpers/prepareMatches.tsx b/src/features/Matches/helpers/prepareMatches.tsx index 715c199b..f4c3fcd2 100644 --- a/src/features/Matches/helpers/prepareMatches.tsx +++ b/src/features/Matches/helpers/prepareMatches.tsx @@ -2,16 +2,9 @@ import map from 'lodash/map' import format from 'date-fns/format' -import type { Match, Team } from 'requests' +import type { Match } from 'requests' import { getSportLexic } from 'helpers' -type Name = 'name_rus' | 'name_eng' - -const prepareTeam = (team: Team, suffix: string) => ({ - ...team, - name: team[`name_${suffix}` as Name], -}) - const prepareMatch = ({ date, has_video, @@ -21,7 +14,7 @@ const prepareMatch = ({ team1, team2, tournament, -}: Match, suffix: string) => ({ +}: Match) => ({ date: format(new Date(date), 'dd.MM.yy'), hasVideo: has_video, id, @@ -29,13 +22,13 @@ const prepareMatch = ({ sportName: getSportLexic(sport), sportType: sport, streamStatus: stream_status, - team1: prepareTeam(team1, suffix), - team2: prepareTeam(team2, suffix), + team1, + team2, time: format(new Date(date), 'HH:mm'), - tournamentName: tournament?.[`name_${suffix}` as Name], + tournament, }) -export const prepareMatches = (matches: Array, suffix: string) => map( +export const prepareMatches = (matches: Array) => map( matches, - (match: Match) => prepareMatch(match, suffix), + prepareMatch, ) diff --git a/src/features/Matches/hooks.tsx b/src/features/Matches/hooks.tsx index ebb05e79..5dcc14e0 100644 --- a/src/features/Matches/hooks.tsx +++ b/src/features/Matches/hooks.tsx @@ -10,8 +10,6 @@ import type { MatchesBySection } from 'requests' import { useRequest } from 'hooks' -import { useLexicsStore } from 'features/LexicsStore' - import { prepareMatches } from './helpers/prepareMatches' export type Match = ReturnType[number] @@ -31,7 +29,6 @@ const initialState = { } export const useMatches = ({ fetch }: Props) => { - const { suffix } = useLexicsStore() const { isFetching, request: requestMatches, @@ -71,11 +68,11 @@ export const useMatches = ({ fetch }: Props) => { }, [fetchMatches]) const preparedMatches = useMemo(() => ({ - broadcast: prepareMatches(matches.broadcast, suffix), - features: prepareMatches(matches.features, suffix), - highlights: prepareMatches(matches.highlights, suffix), + broadcast: prepareMatches(matches.broadcast), + features: prepareMatches(matches.features), + highlights: prepareMatches(matches.highlights), isVideoSections: matches.isVideoSections, - }), [suffix, matches]) + }), [matches]) return { fetchMoreMatches, diff --git a/src/features/Name/index.tsx b/src/features/Name/index.tsx new file mode 100644 index 00000000..62aae2ef --- /dev/null +++ b/src/features/Name/index.tsx @@ -0,0 +1,36 @@ +import React from 'react' + +import styled from 'styled-components/macro' + +import { useLexicsStore } from 'features/LexicsStore' + +export type ObjectWithName = { + [key: string]: any, + name_eng?: string, + name_rus?: string, +} + +type Props = { + className?: string, + nameObj: ObjectWithName, + prefix?: string, +} + +const NameStyled = styled.span`` + +export const useName = ( + nameObj: ObjectWithName, + prefix: string = 'name_', +): string => { + const { suffix } = useLexicsStore() + return nameObj?.[`${prefix}${suffix}`] +} + +export const Name = ({ + className, + nameObj, + prefix, +}: Props) => { + const name = useName(nameObj, prefix) + return {name} +} diff --git a/src/features/PlayerPage/hooks.tsx b/src/features/PlayerPage/hooks.tsx index f75a8b78..5a2510e6 100644 --- a/src/features/PlayerPage/hooks.tsx +++ b/src/features/PlayerPage/hooks.tsx @@ -9,29 +9,27 @@ import { useSportNameParam, usePageId } from 'hooks' import type { PlayerProfile } from 'requests/getPlayerInfo' import { getPlayerInfo, getPlayerMatches } from 'requests' +import { useName } from 'features/Name' import { useLexicsStore } from 'features/LexicsStore' import { addSportType } from 'features/Matches/helpers/addSportType' -type Firstname = 'firstname_eng' | 'firstname_rus' -type Lastname = 'lastname_eng' | 'lastname_rus' -type Name = 'name_eng' | 'name_rus' - export const usePlayerPage = () => { const [playerProfile, setPlayerProfile] = useState(null) const { sportType } = useSportNameParam() const playerId = usePageId() - const { suffix, translate } = useLexicsStore() + const { translate } = useLexicsStore() const { club_team, height, weight, - [`firstname_${suffix}` as Firstname]: firstName = '', - [`lastname_${suffix}` as Lastname]: lastName = '', } = playerProfile || {} - const fullName = `${firstName} ${lastName}` - const teamName = club_team?.[`name_${suffix}` as Name] || '' + const fullName = { + name_eng: `${playerProfile?.firstname_eng} ${playerProfile?.lastname_eng}`, + name_rus: `${playerProfile?.firstname_rus} ${playerProfile?.lastname_rus}`, + } + const teamName = useName(club_team || {}) const infoItems = [ `${height ? `${height} ${translate('cm')}` : ''}${ @@ -56,6 +54,6 @@ export const usePlayerPage = () => { return { fetchMatches, infoItems, - name: fullName, + titleObj: fullName, } } diff --git a/src/features/PlayerPage/index.tsx b/src/features/PlayerPage/index.tsx index d7b0c1f3..b4ed576a 100644 --- a/src/features/PlayerPage/index.tsx +++ b/src/features/PlayerPage/index.tsx @@ -11,14 +11,14 @@ export const PlayerPage = () => { const { fetchMatches, infoItems, - name, + titleObj, } = usePlayerPage() return ( diff --git a/src/features/ProfileCard/index.tsx b/src/features/ProfileCard/index.tsx index 59a7944d..f99cdfb2 100644 --- a/src/features/ProfileCard/index.tsx +++ b/src/features/ProfileCard/index.tsx @@ -4,6 +4,7 @@ import map from 'lodash/map' import { T9n } from 'features/T9n' import { StarIcon } from 'features/Common' +import { useName } from 'features/Name' import type { ProfileCardProps } from './types' import { @@ -22,10 +23,12 @@ import { useProfileCard } from './hooks' export const ProfileCard = (props: ProfileCardProps) => { const { infoItems, - name, profileType, + titleObj, } = props + const name = useName(titleObj || {}) + const { isFavorite, profileId, diff --git a/src/features/ProfileCard/types.tsx b/src/features/ProfileCard/types.tsx index b4912077..363a5ce8 100644 --- a/src/features/ProfileCard/types.tsx +++ b/src/features/ProfileCard/types.tsx @@ -1,7 +1,9 @@ import { ProfileTypes } from 'config' +import type { ObjectWithName } from 'features/Name' + export type ProfileCardProps = { infoItems: Array, - name: string, profileType: ProfileTypes, + titleObj: ObjectWithName | null, } diff --git a/src/features/ProfileLink/helpers/__tests__/index.tsx b/src/features/ProfileLink/helpers/__tests__/index.tsx new file mode 100644 index 00000000..45132488 --- /dev/null +++ b/src/features/ProfileLink/helpers/__tests__/index.tsx @@ -0,0 +1,22 @@ +import { ProfileTypes, SportTypes } from 'config' +import { getProfileUrl } from '..' + +it('returns correct profile urls', () => { + expect(getProfileUrl({ + id: 1, + profileType: ProfileTypes.PLAYERS, + sportType: SportTypes.FOOTBALL, + })).toBe('/football/players/1') + + expect(getProfileUrl({ + id: 2, + profileType: ProfileTypes.TEAMS, + sportType: SportTypes.BASKETBALL, + })).toBe('/basketball/teams/2') + + expect(getProfileUrl({ + id: 3, + profileType: ProfileTypes.TOURNAMENTS, + sportType: SportTypes.HOCKEY, + })).toBe('/hockey/tournaments/3') +}) diff --git a/src/helpers/getProfileUrl/index.tsx b/src/features/ProfileLink/helpers/index.tsx similarity index 100% rename from src/helpers/getProfileUrl/index.tsx rename to src/features/ProfileLink/helpers/index.tsx diff --git a/src/features/ProfileLink/index.tsx b/src/features/ProfileLink/index.tsx new file mode 100644 index 00000000..e57ec24f --- /dev/null +++ b/src/features/ProfileLink/index.tsx @@ -0,0 +1,43 @@ +import type { ReactNode, MouseEvent } from 'react' +import React from 'react' +import { Link } from 'react-router-dom' + +import { ProfileTypes, SportTypes } from 'config' + +import { getProfileUrl } from './helpers' + +type Props = { + children: ReactNode, + className?: string, + id: number, + onClick?: (e: MouseEvent) => void, + profileType: ProfileTypes, + sportType: SportTypes, + target?: string, +} + +export const ProfileLink = ({ + children, + className, + id, + onClick, + profileType, + sportType, + target, +}: Props) => { + const url = getProfileUrl({ + id, + profileType, + sportType, + }) + return ( + + {children} + + ) +} diff --git a/src/features/ProfileLogo/index.tsx b/src/features/ProfileLogo/index.tsx index b58be5de..170d3b89 100644 --- a/src/features/ProfileLogo/index.tsx +++ b/src/features/ProfileLogo/index.tsx @@ -4,12 +4,17 @@ import { ProfileTypes, SportTypes } from 'config' import { getProfileFallbackLogo, getProfileLogo } from 'helpers' import { Image } from 'features/Common' +import type { ObjectWithName } from 'features/Name' +import { useName } from 'features/Name' type ProfileImageProps = { alt?: string, + altNameObj?: ObjectWithName, className?: string, id: number, lazy?: boolean, + nameAsTitle?: boolean, + prefix?: string, profileType: ProfileTypes, size?: number, sportType: SportTypes, @@ -18,14 +23,19 @@ type ProfileImageProps = { export const ProfileLogo = ({ alt, + altNameObj, className, id, lazy = false, + nameAsTitle, + prefix, profileType, size, sportType, title, }: ProfileImageProps) => { + const altName = useName(altNameObj || {}, prefix) + const titleText = nameAsTitle ? altName : title const src = getProfileLogo({ id, profileType, @@ -39,12 +49,12 @@ export const ProfileLogo = ({ return ( {alt} ) } diff --git a/src/features/Search/hooks/index.tsx b/src/features/Search/hooks/index.tsx index 882dd7cf..b981e8cd 100644 --- a/src/features/Search/hooks/index.tsx +++ b/src/features/Search/hooks/index.tsx @@ -19,7 +19,7 @@ import { } from 'hooks' import { SEARCH_DELAY, MIN_CHARACTERS_LENGTH } from '../config' -import { useNormalizedItems } from './useNormalizedItems' +import { normalizeItems } from './useNormalizedItems' export const useSearch = () => { const [searchItems, setSearchItems] = useState({}) @@ -85,7 +85,7 @@ export const useSearch = () => { return { close, isFetching, - normalizedItems: useNormalizedItems(searchItems), + normalizedItems: normalizeItems(searchItems), onChange, onFocus, onSubmit, diff --git a/src/features/Search/hooks/useNormalizedItems.tsx b/src/features/Search/hooks/useNormalizedItems.tsx index 0881d7f1..193dd387 100644 --- a/src/features/Search/hooks/useNormalizedItems.tsx +++ b/src/features/Search/hooks/useNormalizedItems.tsx @@ -1,85 +1,24 @@ import map from 'lodash/map' import { SearchItems } from 'requests' -import { ProfileTypes } from 'config' -import { getProfileUrl } from 'helpers' -import { useLexicsStore } from 'features/LexicsStore' -type Firstname = 'firstname_eng' | 'firstname_rus' -type Lastname = 'lastname_eng' | 'lastname_rus' -type Name = 'name_eng' | 'name_rus' - -export const useNormalizedItems = (searchItems: SearchItems) => { - const { - suffix, - } = useLexicsStore() - - const players = map(searchItems.players, (player) => { - const { id, sport: sportType } = player - const profileType = ProfileTypes.PLAYERS - - const firstName = player[`firstname_${suffix}` as Firstname] - const lastName = player[`lastname_${suffix}` as Lastname] - const teamName = player.team?.[`name_${suffix}` as Name] - - return { - gender: player.gender, - id, - name: `${firstName} ${lastName}`, - profileType, - profileUrl: getProfileUrl({ - id, - profileType, - sportType, - }), - sportType, - teamOrCountry: teamName, - } - }) - - const teams = map(searchItems.teams, (team) => { - const { id, sport: sportType } = team - const profileType = ProfileTypes.TEAMS - const name = team[`name_${suffix}` as Name] - - const country = team.country?.[`name_${suffix}` as Name] - - return { - gender: team.gender, - id, - name, - profileType, - profileUrl: getProfileUrl({ - id, - profileType, - sportType, - }), - sportType, - teamOrCountry: country, - } - }) - - const tournaments = map(searchItems.tournaments, (tournament) => { - const profileType = ProfileTypes.TOURNAMENTS - const { id, sport: sportType } = tournament - const name = tournament[`name_${suffix}` as Name] - - const country = tournament.country?.[`name_${suffix}` as Name] - - return { - gender: tournament.gender, - id, - name, - profileType, - profileUrl: getProfileUrl({ - id, - profileType, - sportType, - }), - sportType, - teamOrCountry: country, - } - }) +export const normalizeItems = (searchItems: SearchItems) => { + const players = map(searchItems.players, (player) => ({ + ...player, + name_eng: `${player.firstname_eng} ${player.lastname_eng}`, + name_rus: `${player.firstname_rus} ${player.lastname_rus}`, + teamOrCountry: player.team, + })) + + const teams = map(searchItems.teams, (team) => ({ + ...team, + teamOrCountry: team.country, + })) + + const tournaments = map(searchItems.tournaments, (tournament) => ({ + ...tournament, + teamOrCountry: tournament.country, + })) return { players, diff --git a/src/features/Search/index.tsx b/src/features/Search/index.tsx index 49ea09fb..195dc10e 100644 --- a/src/features/Search/index.tsx +++ b/src/features/Search/index.tsx @@ -2,7 +2,8 @@ import React, { Fragment } from 'react' import { useRouteMatch } from 'react-router-dom' import isEmpty from 'lodash/isEmpty' -import { PAGES } from 'config' +import { PAGES, ProfileTypes } from 'config' + import { Input } from 'features/Common' import { ItemsList } from 'features/ItemsList' import { OutsideClick } from 'features/OutsideClick' @@ -54,21 +55,33 @@ export const Search = () => { {!isEmpty(tournaments) && (
- + )} {!isEmpty(teams) && (
- + )} {!isEmpty(players) && (
- + )} diff --git a/src/features/TeamPage/hooks.tsx b/src/features/TeamPage/hooks.tsx index 0b2e4c3c..3965bd24 100644 --- a/src/features/TeamPage/hooks.tsx +++ b/src/features/TeamPage/hooks.tsx @@ -7,26 +7,16 @@ import { import type { TeamInfo } from 'requests' import { getTeamInfo, getTeamMatches } from 'requests' -import { useLexicsStore } from 'features/LexicsStore' - import { useSportNameParam, usePageId } from 'hooks' -import { addSportType } from 'features/Matches/helpers/addSportType' -type Name = 'name_rus' | 'name_eng' +import { useName } from 'features/Name' +import { addSportType } from 'features/Matches/helpers/addSportType' export const useTeamPage = () => { const [teamProfile, setTeamProfile] = useState(null) const { sportType } = useSportNameParam() const teamId = usePageId() - const { suffix } = useLexicsStore() - - const { - [`name_${suffix}` as Name]: name = '', - } = teamProfile || {} - - const { - [`name_${suffix}` as Name]: country = '', - } = teamProfile?.country || {} + const country = useName(teamProfile?.country || {}) useEffect(() => { getTeamInfo(sportType, teamId) @@ -50,7 +40,7 @@ export const useTeamPage = () => { return { fetchMatches, infoItems: [country], - name, sportType, + titleObj: teamProfile, } } diff --git a/src/features/TeamPage/index.tsx b/src/features/TeamPage/index.tsx index daf3f56e..5951c300 100644 --- a/src/features/TeamPage/index.tsx +++ b/src/features/TeamPage/index.tsx @@ -12,7 +12,7 @@ export const TeamPage = () => { const { fetchMatches, infoItems, - name, + titleObj, } = useTeamPage() return ( @@ -20,7 +20,7 @@ export const TeamPage = () => { diff --git a/src/features/TournamentPage/hooks.tsx b/src/features/TournamentPage/hooks.tsx index 58af3f58..0a39b7eb 100644 --- a/src/features/TournamentPage/hooks.tsx +++ b/src/features/TournamentPage/hooks.tsx @@ -9,24 +9,14 @@ import { getTournamentInfo, getTournamentMatches } from 'requests' import { useSportNameParam, usePageId } from 'hooks' -import { useLexicsStore } from 'features/LexicsStore' +import { useName } from 'features/Name' import { addSportType } from 'features/Matches/helpers/addSportType' -type Name = 'name_rus' | 'name_eng' - export const useTournamentPage = () => { const [tournamentProfile, setTournamentProfile] = useState(null) const { sportType } = useSportNameParam() const tournamentId = usePageId() - const { suffix } = useLexicsStore() - - const { - [`name_${suffix}` as Name]: name = '', - } = tournamentProfile || {} - - const { - [`name_${suffix}` as Name]: country = '', - } = tournamentProfile?.country || {} + const country = useName(tournamentProfile?.country || {}) useEffect(() => { getTournamentInfo(sportType, tournamentId) @@ -50,6 +40,6 @@ export const useTournamentPage = () => { return { fetchMatches, infoItems: [country], - name, + titleObj: tournamentProfile, } } diff --git a/src/features/TournamentPage/index.tsx b/src/features/TournamentPage/index.tsx index 0c4df901..4458f47c 100644 --- a/src/features/TournamentPage/index.tsx +++ b/src/features/TournamentPage/index.tsx @@ -12,7 +12,7 @@ export const TournamentPage = () => { const { fetchMatches, infoItems, - name, + titleObj, } = useTournamentPage() return ( @@ -20,7 +20,7 @@ export const TournamentPage = () => { diff --git a/src/features/UserFavorites/TooltipBlock/index.tsx b/src/features/UserFavorites/TooltipBlock/index.tsx index ffcc4cde..fb7d814a 100644 --- a/src/features/UserFavorites/TooltipBlock/index.tsx +++ b/src/features/UserFavorites/TooltipBlock/index.tsx @@ -1,8 +1,8 @@ import React from 'react' -import { SportTypes } from 'config' -import { getSportColor, getSportLexic } from 'helpers' -import { T9n } from 'features/T9n' +import { UserFavorite } from 'requests' + +import { Name, useName } from 'features/Name' import { TooltipBlockWrapper, @@ -12,37 +12,32 @@ import { } from './styled' type TooltipBlockProps = { - countryName?: string, - date?: string, - playerFirstName?: string, - playerLastName?: string, - playerTeamName?: string, - sport: SportTypes, - teamName?: string, + favorite: UserFavorite, topPosition: number | null, } export const TooltipBlock = ({ - countryName, - playerFirstName, - playerLastName, - playerTeamName, - sport, - teamName, + favorite: { + info, + sport, + }, topPosition, -}: TooltipBlockProps) => ( - - - {playerFirstName && playerLastName && `${playerFirstName} ${playerLastName}`} - - - {teamName} - - - - - {' '} - {playerTeamName || countryName} - - -) +}: TooltipBlockProps) => { + const playerFirstName = useName(info, 'firstname_') + const playerLastName = useName(info, 'lastname_') + return ( + + + {playerFirstName && playerLastName && `${playerFirstName} ${playerLastName}`} + + + + + + {' '} + {info.team && } + {info.country && } + + + ) +} diff --git a/src/features/UserFavorites/TooltipBlock/styled.tsx b/src/features/UserFavorites/TooltipBlock/styled.tsx index e20778a4..64b3d28d 100644 --- a/src/features/UserFavorites/TooltipBlock/styled.tsx +++ b/src/features/UserFavorites/TooltipBlock/styled.tsx @@ -1,5 +1,7 @@ import styled, { css } from 'styled-components/macro' +import { SportName } from 'features/Common' + export const TooltipBlockWrapper = styled.div<{top: number | null}>` background-color: #fff; border-radius: 10px; @@ -45,7 +47,8 @@ export const TooltipBlockItemThin = styled(TooltipBlockItem)` font-weight: 400; ` -export const TooltipBlockItemThinUpperCase = styled(TooltipBlockItem)` +export const TooltipBlockItemThinUpperCase = styled(SportName)` + ${TooltipStyles} display: inline; text-transform: uppercase; font-weight: 400; diff --git a/src/features/UserFavorites/helpers.tsx b/src/features/UserFavorites/helpers.tsx deleted file mode 100644 index a8a5b401..00000000 --- a/src/features/UserFavorites/helpers.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import map from 'lodash/map' - -import { getProfileUrl } from 'helpers' -import type { UserFavorites } from 'requests' - -type Names = 'name_eng' | 'name_rus' -type ShortNames = 'short_name_eng' | 'short_name_rus' -type FirstNames = 'firstname_eng' | 'firstname_rus' -type LastNames = 'lastname_eng' | 'firstname_rus' -type NickNames = 'nickname_eng' | 'nickname_rus' - -export const normalizeUserFavorites = (favorites: UserFavorites, suffix: string) => { - const nameField = `name_${suffix}` as Names - const shortNameField = `short_name_${suffix}` as ShortNames - const firtsNameField = `firstname_${suffix}` as FirstNames - const lastNameField = `lastname_${suffix}` as LastNames - const nickNameField = `nickname_${suffix}` as NickNames - - return map(favorites, (item) => ({ - countryName: item.info.country?.[nameField], - firstname: item.info[firtsNameField], - id: item.id, - lastname: item.info[lastNameField], - name: item.info[nameField], - nickname: item.info[nickNameField], - profileUrl: getProfileUrl({ - id: item.id, - profileType: item.type, - sportType: item.sport, - }), - shortName: item.info[shortNameField], - sport: item.sport, - teamName: item.info.team?.[nameField], - type: item.type, - })) -} diff --git a/src/features/UserFavorites/hooks/index.tsx b/src/features/UserFavorites/hooks/index.tsx index 11921d30..4a7f74ee 100644 --- a/src/features/UserFavorites/hooks/index.tsx +++ b/src/features/UserFavorites/hooks/index.tsx @@ -1,22 +1,13 @@ -import { - useEffect, - useState, - useMemo, -} from 'react' +import { useEffect, useState } from 'react' import type { UserFavorites } from 'requests' import { modifyUserFavorites, getUserFavorites } from 'requests' -import { useLexicsStore } from 'features/LexicsStore' - import { useToggle } from 'hooks/useToggle' -import { normalizeUserFavorites } from '../helpers' - type Args = Parameters[0] export const useUserFavorites = () => { - const { suffix } = useLexicsStore() const [userFavorites, setUserFavorites] = useState([]) const { @@ -33,16 +24,11 @@ export const useUserFavorites = () => { modifyUserFavorites(args).then(setUserFavorites, open) } - const memoizedUserFavorites = useMemo( - () => normalizeUserFavorites(userFavorites, suffix), - [userFavorites, suffix], - ) - return { addRemoveFavorite, close, isOpen, open, - userFavorites: memoizedUserFavorites, + userFavorites, } } diff --git a/src/features/UserFavorites/index.tsx b/src/features/UserFavorites/index.tsx index 7af501e5..7703a78e 100644 --- a/src/features/UserFavorites/index.tsx +++ b/src/features/UserFavorites/index.tsx @@ -9,11 +9,11 @@ import { FavoritesActions } from 'requests' import { PAGES } from 'config' import { Modal } from 'features/Modal' +import { ProfileLink } from 'features/ProfileLink' import { TooltipBlock } from './TooltipBlock' import { useUserFavoritesStore } from './store' import { - StyledLink, UserSportFavItemLogoWrapper, UserSportFavXWrapper, UserSportFavImgWrapper, @@ -67,21 +67,21 @@ export const UserFavorites = () => { /> - + - + )) } diff --git a/src/features/UserFavorites/styled.tsx b/src/features/UserFavorites/styled.tsx index 03f610bf..713f5ed4 100644 --- a/src/features/UserFavorites/styled.tsx +++ b/src/features/UserFavorites/styled.tsx @@ -1,4 +1,3 @@ -import { Link } from 'react-router-dom' import { devices } from 'config/devices' @@ -11,8 +10,6 @@ import { ProfileLogo } from 'features/ProfileLogo' import { TooltipBlockWrapper } from './TooltipBlock/styled' -export const StyledLink = styled(Link)`` - export const UserSportFavWrapper = styled.aside` display: flex; flex-direction: column; diff --git a/src/helpers/index.tsx b/src/helpers/index.tsx index c24d229a..b1e98fb4 100644 --- a/src/helpers/index.tsx +++ b/src/helpers/index.tsx @@ -3,7 +3,6 @@ export * from './callApi/getResponseData' export * from './token' export * from './getProfileLogo' export * from './getProfileFallbackLogo' -export * from './getProfileUrl' export * from './getSportColor' export * from './getSportLexic' export * from './msToMinutesAndSeconds' diff --git a/src/requests/getUserSportFavs.tsx b/src/requests/getUserSportFavs.tsx index ea75d088..c7bc6c53 100644 --- a/src/requests/getUserSportFavs.tsx +++ b/src/requests/getUserSportFavs.tsx @@ -31,7 +31,7 @@ type Info = { team2?: ObjectWithName, } -type UserFavorite = { +export type UserFavorite = { id: number, info: Info, sport: SportTypes,