From 9947cb247ffcf15b34209d56c1a1ae3f0d874381 Mon Sep 17 00:00:00 2001 From: boyvanov Date: Tue, 4 Oct 2022 17:03:35 +0300 Subject: [PATCH] feat(ott-2838): add tooltips --- .../MatchCard/CardFrontside/index.tsx | 7 ++- .../components/MatchDescription/index.tsx | 4 ++ .../Matches/helpers/prepareMatches.tsx | 5 ++ .../components/CollapseTournament/index.tsx | 38 +++++++++++--- .../components/CollapseTournament/styled.tsx | 3 +- src/features/TournamentSubtitle/index.tsx | 36 ++++++++++--- src/features/TournamentSubtitle/styled.tsx | 50 ++++++++++++++++--- src/requests/getMatchInfo.tsx | 4 ++ src/requests/getMatches/types.tsx | 7 +++ 9 files changed, 130 insertions(+), 24 deletions(-) diff --git a/src/features/MatchCard/CardFrontside/index.tsx b/src/features/MatchCard/CardFrontside/index.tsx index 548ed473..43ffd4ce 100644 --- a/src/features/MatchCard/CardFrontside/index.tsx +++ b/src/features/MatchCard/CardFrontside/index.tsx @@ -59,17 +59,20 @@ export const CardFrontside = ({ const { access, countryId, + countryInfo, date, group, live, preview, previewURL, + sportInfo, sportType, team1, team2, time, tournament, } = match + const isHomePage = useRouteMatch(PAGES.home)?.isExact const isMatchPage = location.pathname.includes(PAGES.match) const tournamentName = useName(tournament) @@ -172,8 +175,10 @@ export const CardFrontside = ({ {!isMatchPage && ( )} diff --git a/src/features/MatchPage/components/MatchDescription/index.tsx b/src/features/MatchPage/components/MatchDescription/index.tsx index 7b4559fc..91ef4164 100644 --- a/src/features/MatchPage/components/MatchDescription/index.tsx +++ b/src/features/MatchPage/components/MatchDescription/index.tsx @@ -48,8 +48,10 @@ export const MatchDescription = () => { if (!profile) return const { + country, country_id, date, + sport, team1, team2, tournament, @@ -87,7 +89,9 @@ export const MatchDescription = () => { { const { calc, + country, country_id, date: matchDate, group, @@ -21,16 +22,19 @@ const prepareMatch = (match: Match) => { preview, previewURL, sport, + sport_info, storage, team1, team2, tournament, } = match + const date = parseDate(matchDate) return { access: getMatchAccess(match), calc, countryId: country_id, + countryInfo: country, date, formattedDate: format(date, 'dd.MM.yy'), group, @@ -40,6 +44,7 @@ const prepareMatch = (match: Match) => { live, preview, previewURL, + sportInfo: sport_info, sportType: sport, storage, team1, diff --git a/src/features/TournamentList/components/CollapseTournament/index.tsx b/src/features/TournamentList/components/CollapseTournament/index.tsx index bb3481ee..abdd52b1 100644 --- a/src/features/TournamentList/components/CollapseTournament/index.tsx +++ b/src/features/TournamentList/components/CollapseTournament/index.tsx @@ -2,7 +2,13 @@ import { ProfileTypes } from 'config' import { T9n } from 'features/T9n' import { Icon } from 'features/Icon' +import { Name } from 'features/Name' import { useHeaderFiltersStore } from 'features/HeaderFilters' +import { + CountryWrapper, + SportWrapper, + Tooltip, +} from 'features/TournamentSubtitle/styled' import { SportIcon } from 'components/SportIcon/SportIcon' @@ -47,6 +53,8 @@ export const CollapseTournament = ({ setSelectTournament(tournament) } + const { countryInfo, sportInfo } = tournamentMatches[0] + return ( handleClick()}> @@ -70,14 +78,28 @@ export const CollapseTournament = ({ - - + + + {sportInfo && ( + + + + )} + + + + {countryInfo && ( + + + + )} + {isFavorite && ( diff --git a/src/features/TournamentList/components/CollapseTournament/styled.tsx b/src/features/TournamentList/components/CollapseTournament/styled.tsx index 6cf9748d..a7558e4f 100644 --- a/src/features/TournamentList/components/CollapseTournament/styled.tsx +++ b/src/features/TournamentList/components/CollapseTournament/styled.tsx @@ -162,14 +162,13 @@ export const SecondaryInfo = styled.div` export const CountryFlag = styled.img` width: 0.71rem; height: 0.75rem; - margin-left: 0.567rem; object-fit: contain; object-position: bottom; + ${isMobileDevice ? css` width: 12px; height: 8px; - margin-left: 3.5px; ` : ''}; ` diff --git a/src/features/TournamentSubtitle/index.tsx b/src/features/TournamentSubtitle/index.tsx index 30a7dd6b..53b67a70 100644 --- a/src/features/TournamentSubtitle/index.tsx +++ b/src/features/TournamentSubtitle/index.tsx @@ -3,6 +3,7 @@ import { Fragment } from 'react' import { SportIcon } from 'components/SportIcon/SportIcon' import { Name } from 'features/Name' +import { T9n } from 'features/T9n' import { useUserFavoritesStore } from 'features/UserFavorites/store' import { ProfileTypes, SportTypes } from 'config' @@ -11,16 +12,19 @@ import { isMobileDevice } from 'config/userAgent' import { usePageParams } from 'hooks/usePageParams' -import { TournamentType } from 'requests' +import { TournamentType, SportInfo } from 'requests' import { isMatchPage } from 'helpers/isMatchPage' import { CountryFlag, + CountryWrapper, FavoriteSign, - Wrapper, + SportWrapper, StyledLink, SubtitleMain, + Tooltip, + Wrapper, } from './styled' import { Time, @@ -30,7 +34,9 @@ import { type Props = { countryId: number, + countryInfo?: TournamentType, date?: string | null, + sportInfo?: SportInfo, sportType?: SportTypes, time?: string | null, tournament: TournamentType, @@ -38,7 +44,9 @@ type Props = { export const TournamentSubtitle = ({ countryId, + countryInfo, date, + sportInfo, sportType, time, tournament, @@ -52,11 +60,25 @@ export const TournamentSubtitle = ({ {!isLffClient && ( - - + + + {sportInfo && ( + + + + )} + + + + {countryInfo && ( + + + + )} + )} ` ${isMobileDevice ? css` - font-size: 10px; - ` + font-size: 10px; + ` : ''}; - ` : null)} + ` : '')} ` type FavoriteSignProps = { diff --git a/src/requests/getMatchInfo.tsx b/src/requests/getMatchInfo.tsx index 1cb9a087..78d67b5b 100644 --- a/src/requests/getMatchInfo.tsx +++ b/src/requests/getMatchInfo.tsx @@ -5,6 +5,8 @@ import { import { callApi } from 'helpers' +import { TournamentType, SportInfo } from './getMatches/types' + const proc = PROCEDURES.get_match_info export type Team = { @@ -27,11 +29,13 @@ type VideoBounds = Array export type MatchInfo = { access?: boolean, calc: boolean, + country: TournamentType, country_id: number, date: string, has_video: boolean, live: boolean, playbackUrl?: string, + sport: SportInfo, storage: boolean, sub: boolean, team1: Team, diff --git a/src/requests/getMatches/types.tsx b/src/requests/getMatches/types.tsx index 492a5dfc..a54cc826 100644 --- a/src/requests/getMatches/types.tsx +++ b/src/requests/getMatches/types.tsx @@ -14,11 +14,17 @@ type Team = { score?: number, } +export type SportInfo = { + id: number, + lexic: number, +} + export type Match = { access: boolean, /** тип трансляции */ c_type_broadcast: number, calc: boolean, + country: TournamentType, country_id: number, date: string, /** Информация о турнире, если турнир входит в супер турнир */ @@ -33,6 +39,7 @@ export type Match = { preview?: string, previewURL?: string, sport: SportTypes, + sport_info: SportInfo, /** наличие завершенного hls стрима */ storage: boolean, sub: boolean,