diff --git a/src/features/MatchPage/MatchProfileCard/hooks.tsx b/src/features/MatchPage/MatchProfileCard/hooks.tsx index 2cdbb102..7f0aa0c5 100644 --- a/src/features/MatchPage/MatchProfileCard/hooks.tsx +++ b/src/features/MatchPage/MatchProfileCard/hooks.tsx @@ -15,23 +15,32 @@ export const useMatchProfileCard = () => { const pageId = usePageId() const { suffix } = useLexicsStore() - const matchProfileNames = { - team1Name: matchProfile?.team1[`name_${suffix}` as Name], - team2Name: matchProfile?.team2[`name_${suffix}` as Name], - tournament: matchProfile?.tournament[`name_${suffix}` as Name], - } + 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 + ) useEffect(() => { getMatchInfo(sportType, pageId) .then(setMatchProfile) - }, - [ - sportType, - pageId, - ]) + }, [sportType, pageId]) return { - matchProfile, - matchProfileNames, + matchProfile: addNames(matchProfile, suffix), } } diff --git a/src/features/MatchPage/MatchProfileCard/index.tsx b/src/features/MatchPage/MatchProfileCard/index.tsx index 943e43f1..7a13c933 100644 --- a/src/features/MatchPage/MatchProfileCard/index.tsx +++ b/src/features/MatchPage/MatchProfileCard/index.tsx @@ -1,9 +1,12 @@ import React, { Fragment } from 'react' -import isEmpty from 'lodash/isEmpty' +import isNull from 'lodash/isNull' +import { getProfileUrl } from 'helpers' import { getSportColor } from 'helpers/getSportColor' +import { ProfileTypes } from 'config' + import { SportName } from 'features/Common/SportName' import { useScoreStore } from 'features/ToggleScore' @@ -16,32 +19,52 @@ import { Score, Tournament, Dash, + StyledLink, } from './styled' export const MatchProfileCard = () => { const { matchProfile, - matchProfileNames: { - team1Name, - team2Name, - tournament, - }, } = useMatchProfileCard() const { sportName, sportType } = useSportNameParam() const { isHidden } = useScoreStore() - const { team1, team2 } = matchProfile || {} - const color = getSportColor(sportType) + const { + team1, + team2, + tournament, + } = matchProfile || {} return ( - {!isEmpty(matchProfile) + {!isNull(matchProfile) && ( - {team1Name} {team2Name} + {team1 && ( + + {team1.name} + + )} + + {team2 && ( + + {team2.name} + + )} {!isHidden && ( @@ -52,7 +75,17 @@ export const MatchProfileCard = () => { {tournament} + /> + {tournament && ( + + {tournament?.name} + + )} )} diff --git a/src/features/MatchPage/MatchProfileCard/styled.tsx b/src/features/MatchPage/MatchProfileCard/styled.tsx index 6866c499..1644ea1d 100644 --- a/src/features/MatchPage/MatchProfileCard/styled.tsx +++ b/src/features/MatchPage/MatchProfileCard/styled.tsx @@ -1,3 +1,5 @@ +import { Link } from 'react-router-dom' + import styled from 'styled-components/macro' import { devices } from 'config/devices' @@ -23,6 +25,14 @@ export const Teams = styled.div` ` +export const StyledLink = styled(Link)` + font-weight: bold; + color: white; + &:hover{ + text-decoration: underline; + } +` + export const Dash = styled.span` position: relative; width: 40px;