diff --git a/src/features/MatchCard/CardFinished/index.tsx b/src/features/MatchCard/CardFinished/index.tsx index 3a0dc32c..d6a4b0fd 100644 --- a/src/features/MatchCard/CardFinished/index.tsx +++ b/src/features/MatchCard/CardFinished/index.tsx @@ -1,23 +1,10 @@ import React from 'react' import type { Match } from 'features/Matches' -import { SportName } from 'features/Common' import { useCard } from '../hooks' +import { MatchInfoCard } from '../MatchInfoCard' import { CardFinishedHover } from '../CardFinishedHover' -import { - CardWrapper, - Info, - MatchDate, - Preview, - PreviewWrapper, - Score, - Team, - TeamName, - Teams, - Time, - TournamentName, -} from '../styled' type CardFinishedProps = { match: Match, @@ -25,73 +12,31 @@ type CardFinishedProps = { } export const CardFinished = ({ - match: { - date, - id, - preview, - sportName, - sportType, - team1, - team2, - time, - tournamentName, - }, + match, showSportName, }: CardFinishedProps) => { const { close, + flipCard, isOpen, onKeyPress, - open, - showScore, - } = useCard() + } = useCard(match.hasVideo) if (isOpen) { return ( ) } return ( - - - {date} - - - - - - - {showSportName && } - {tournamentName && ( - - {tournamentName} - - )} - - - {team1.name} - {showScore && {team1.score}} - - - {team2.name} - {showScore && {team2.score}} - - - - + /> ) } diff --git a/src/features/MatchCard/CardFinishedHover/index.tsx b/src/features/MatchCard/CardFinishedHover/index.tsx index cbcb8c1c..40a2e59d 100644 --- a/src/features/MatchCard/CardFinishedHover/index.tsx +++ b/src/features/MatchCard/CardFinishedHover/index.tsx @@ -3,6 +3,7 @@ import React from 'react' import { Link } from 'react-router-dom' +import type { Match } from 'features/Matches' import { OutsideClick } from 'features/OutsideClick' import { @@ -15,9 +16,8 @@ import { } from '../styled' type CardFinishedHoverProps = { - id: number, + match: Match, onClose: () => void, - sportName: string, } const stopProp = (e: MouseEvent) => { @@ -25,9 +25,12 @@ const stopProp = (e: MouseEvent) => { } export const CardFinishedHover = ({ - id, + match: { + hasVideo, + id, + sportName, + }, onClose, - sportName, }: CardFinishedHoverProps) => ( diff --git a/src/features/MatchCard/CardLive/index.tsx b/src/features/MatchCard/CardLive/index.tsx index c8354a0a..241f4348 100644 --- a/src/features/MatchCard/CardLive/index.tsx +++ b/src/features/MatchCard/CardLive/index.tsx @@ -1,22 +1,9 @@ import React from 'react' import type { Match } from 'features/Matches' -import { SportName } from 'features/Common' import { useCard } from '../hooks' -import { - CardWrapper, - Info, - MatchDate, - Preview, - PreviewWrapper, - Score, - Team, - TeamName, - Teams, - Time, - TournamentName, -} from '../styled' +import { MatchInfoCard } from '../MatchInfoCard' import { CardLiveHover } from '../CardLiveHover' type CardLiveProps = { @@ -25,73 +12,31 @@ type CardLiveProps = { } export const CardLive = ({ - match: { - date, - id, - preview, - sportName, - sportType, - team1, - team2, - time, - tournamentName, - }, + match, showSportName, }: CardLiveProps) => { const { close, + flipCard, isOpen, onKeyPress, - open, - showScore, - } = useCard() + } = useCard(match.hasVideo) if (isOpen) { return ( ) } return ( - - - {date} - - - - - - - {showSportName && } - {tournamentName && ( - - {tournamentName} - - )} - - - {team1.name} - {showScore && {team1.score}} - - - {team2.name} - {showScore && {team2.score}} - - - - + /> ) } diff --git a/src/features/MatchCard/CardLiveHover/index.tsx b/src/features/MatchCard/CardLiveHover/index.tsx index 62a4ad11..b5c1b3fe 100644 --- a/src/features/MatchCard/CardLiveHover/index.tsx +++ b/src/features/MatchCard/CardLiveHover/index.tsx @@ -3,6 +3,7 @@ import React from 'react' import { Link } from 'react-router-dom' +import type { Match } from 'features/Matches' import { RESUME_KEY } from 'features/MatchPage/hooks/useLastPlayPosition' import { OutsideClick } from 'features/OutsideClick' @@ -16,9 +17,8 @@ import { } from '../styled' type CardLiveHoverProps = { - id: number, + match: Match, onClose: () => void, - sportName: string, } const stopProp = (e: MouseEvent) => { @@ -26,9 +26,11 @@ const stopProp = (e: MouseEvent) => { } export const CardLiveHover = ({ - id, + match: { + id, + sportName, + }, onClose, - sportName, }: CardLiveHoverProps) => ( diff --git a/src/features/MatchCard/CardSoon/index.tsx b/src/features/MatchCard/CardSoon/index.tsx index 6dc10eb0..54c7e00a 100644 --- a/src/features/MatchCard/CardSoon/index.tsx +++ b/src/features/MatchCard/CardSoon/index.tsx @@ -2,11 +2,10 @@ import React from 'react' import styled from 'styled-components/macro' -import { ProfileTypes, devices } from 'config' +import { ProfileTypes } from 'config' import type { Match } from 'features/Matches' import { SportName } from 'features/Common' -import { ProfileLogo } from 'features/ProfileLogo' import { MatchDate, @@ -18,35 +17,14 @@ import { TeamName as CommonTeamName, Teams, TournamentName, + TeamLogos, + TeamLogo, } from '../styled' const CardWrapper = styled(CommonCardWrapper)` cursor: pointer; ` -const TeamLogos = styled.div` - display: flex; - padding-left: 24px; - - @media ${devices.mobile} { - justify-content: space-between; - padding-right: 20px; - } -` - -const TeamLogo = styled(ProfileLogo)` - width: 60px; - - :last-child { - margin-left: 8px; - } - - @media ${devices.mobile} { - width: 134px; - } - -` - const TeamName = styled(CommonTeamName)` max-width: none; ` diff --git a/src/features/MatchCard/MatchInfoCard/index.tsx b/src/features/MatchCard/MatchInfoCard/index.tsx new file mode 100644 index 00000000..5080fd30 --- /dev/null +++ b/src/features/MatchCard/MatchInfoCard/index.tsx @@ -0,0 +1,111 @@ +import type { KeyboardEvent } from 'react' +import React from 'react' + +import { ProfileTypes } from 'config' + +import type { Match } from 'features/Matches' +import { SportName } from 'features/Common' +import { useScoreStore } from 'features/ToggleScore' + +import { + CardWrapper, + Info, + MatchDate, + Preview, + PreviewWrapper, + Score, + Team, + TeamName, + Teams, + Time, + TournamentName, + TeamLogos, + TeamLogo, +} from '../styled' + +type Props = { + match: Match, + onClick: () => void, + onKeyPress: (e: KeyboardEvent) => void, + showSportName?: boolean, +} + +export const MatchInfoCard = ({ + match: { + date, + hasVideo, + preview, + sportType, + team1, + team2, + time, + tournamentName, + }, + onClick, + onKeyPress, + showSportName, +}: Props) => { + const { isHidden } = useScoreStore() + + return ( + + + {date} + + + + { + hasVideo + ? ( + + ) + : ( + + + + + ) + } + + + {showSportName && } + {tournamentName && ( + + {tournamentName} + + )} + + + {team1.name} + {!isHidden && {team1.score}} + + + {team2.name} + {!isHidden && {team2.score}} + + + + + ) +} diff --git a/src/features/MatchCard/hooks.tsx b/src/features/MatchCard/hooks.tsx index bf27e769..4a5ce790 100644 --- a/src/features/MatchCard/hooks.tsx +++ b/src/features/MatchCard/hooks.tsx @@ -2,27 +2,30 @@ import type { KeyboardEvent } from 'react' import { useCallback } from 'react' import { useToggle } from 'hooks' -import { useScoreStore } from 'features/ToggleScore' -export const useCard = () => { +export const useCard = (hasVideo: boolean) => { const { close, isOpen, open, } = useToggle() - const { isHidden } = useScoreStore() const onKeyPress = useCallback((e: KeyboardEvent) => { - if (e.key === 'Enter') { + if (e.key === 'Enter' && hasVideo) { open() } - }, [open]) + }, [hasVideo, open]) + + const flipCard = () => { + if (hasVideo) { + open() + } + } return { close, + flipCard, isOpen, onKeyPress, - open, - showScore: !isHidden, } } diff --git a/src/features/MatchCard/styled.tsx b/src/features/MatchCard/styled.tsx index 3bc34a93..dfb0f197 100644 --- a/src/features/MatchCard/styled.tsx +++ b/src/features/MatchCard/styled.tsx @@ -1,7 +1,10 @@ import styled from 'styled-components/macro' import { devices } from 'config/devices' + import { T9n } from 'features/T9n' +import { ProfileLogo } from 'features/ProfileLogo' + import { MATCH_CARD_WIDTH } from './config' export const CardWrapper = styled.li.attrs({ @@ -152,8 +155,8 @@ export const MoreVideo = styled(T9n)` text-align: center; color: rgba(255, 255, 255, 0.5); background: linear-gradient( - 180deg, - rgba(255, 255, 255, 0.1) 0%, + 180deg, + rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100% ), #5C5C5C; @@ -191,3 +194,24 @@ export const CardHoverTitle = styled(T9n)` text-transform: uppercase; color: rgba(255, 255, 255, 0.5); ` + +export const TeamLogos = styled.div` + display: flex; + padding-left: 24px; + + @media ${devices.mobile} { + justify-content: space-between; + padding-right: 20px; + } +` +export const TeamLogo = styled(ProfileLogo)` + width: 60px; + + :last-child { + margin-left: 8px; + } + + @media ${devices.mobile} { + width: 134px; + } +` diff --git a/src/features/Matches/helpers/prepareMatches.tsx b/src/features/Matches/helpers/prepareMatches.tsx index adbe183d..715c199b 100644 --- a/src/features/Matches/helpers/prepareMatches.tsx +++ b/src/features/Matches/helpers/prepareMatches.tsx @@ -14,6 +14,7 @@ const prepareTeam = (team: Team, suffix: string) => ({ const prepareMatch = ({ date, + has_video, id, sport, stream_status, @@ -22,6 +23,7 @@ const prepareMatch = ({ tournament, }: Match, suffix: string) => ({ date: format(new Date(date), 'dd.MM.yy'), + hasVideo: has_video, id, preview: '/images/preview.png', sportName: getSportLexic(sport),