frontend
/
spa_instat_tv
1
0
Fork 0
Code Pull Requests 1 Releases Wiki Activity

refactor(#302): show team logos for matches with no video (#173)

Browse Source
keep-around/af30b88d367751c9e05a735e4a0467a96238ef47
Mirlan 5 years ago committed by GitHub
parent 6ed7cd7399
commit 4457b977ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 185 additions and 172 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 75
      src/features/MatchCard/CardFinished/index.tsx
  2. 11
      src/features/MatchCard/CardFinishedHover/index.tsx
  3. 75
      src/features/MatchCard/CardLive/index.tsx
  4. 10
      src/features/MatchCard/CardLiveHover/index.tsx
  5. 28
      src/features/MatchCard/CardSoon/index.tsx
  6. 111
      src/features/MatchCard/MatchInfoCard/index.tsx
  7. 17
      src/features/MatchCard/hooks.tsx
  8. 28
      src/features/MatchCard/styled.tsx
  9. 2
      src/features/Matches/helpers/prepareMatches.tsx

75
src/features/MatchCard/CardFinished/index.tsx
Unescape View File

@ -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 (
<CardFinishedHover
id={id}
sportName={sportName}
match={match}
onClose={close}
/>
)
}
return (
<CardWrapper
onClick={open}
<MatchInfoCard
match={match}
showSportName={showSportName}
onClick={flipCard}
onKeyPress={onKeyPress}
>
<MatchDate>
{date}
<Time>
{time}
</Time>
</MatchDate>
<PreviewWrapper>
<Preview
alt={tournamentName}
title={tournamentName}
src={preview}
/>
</PreviewWrapper>
<Info>
{showSportName && <SportName sport={sportType} />}
{tournamentName && (
<TournamentName title={tournamentName}>
{tournamentName}
</TournamentName>
)}
<Teams>
<Team>
<TeamName title={team1.name}>{team1.name}</TeamName>
{showScore && <Score>{team1.score}</Score>}
</Team>
<Team>
<TeamName title={team2.name}>{team2.name}</TeamName>
{showScore && <Score>{team2.score}</Score>}
</Team>
</Teams>
</Info>
</CardWrapper>
/>
)
}

11
src/features/MatchCard/CardFinishedHover/index.tsx
Unescape View File

@ -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<HTMLDivElement>) => {
@ -25,9 +25,12 @@ const stopProp = (e: MouseEvent<HTMLDivElement>) => {
}
export const CardFinishedHover = ({
id,
match: {
hasVideo,
id,
sportName,
},
onClose,
sportName,
}: CardFinishedHoverProps) => (
<OutsideClick onClick={onClose}>
<CardHoverWrapper onClick={onClose}>

75
src/features/MatchCard/CardLive/index.tsx
Unescape View File

@ -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 (
<CardLiveHover
id={id}
sportName={sportName}
match={match}
onClose={close}
/>
)
}
return (
<CardWrapper
onClick={open}
<MatchInfoCard
match={match}
showSportName={showSportName}
onClick={flipCard}
onKeyPress={onKeyPress}
>
<MatchDate>
{date}
<Time>
{time}
</Time>
</MatchDate>
<PreviewWrapper>
<Preview
alt={tournamentName}
title={tournamentName}
src={preview}
/>
</PreviewWrapper>
<Info>
{showSportName && <SportName sport={sportType} />}
{tournamentName && (
<TournamentName title={tournamentName}>
{tournamentName}
</TournamentName>
)}
<Teams>
<Team>
<TeamName title={team1.name}>{team1.name}</TeamName>
{showScore && <Score>{team1.score}</Score>}
</Team>
<Team>
<TeamName title={team2.name}>{team2.name}</TeamName>
{showScore && <Score>{team2.score}</Score>}
</Team>
</Teams>
</Info>
</CardWrapper>
/>
)
}

10
src/features/MatchCard/CardLiveHover/index.tsx
Unescape View File

@ -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<HTMLDivElement>) => {
@ -26,9 +26,11 @@ const stopProp = (e: MouseEvent<HTMLDivElement>) => {
}
export const CardLiveHover = ({
id,
match: {
id,
sportName,
},
onClose,
sportName,
}: CardLiveHoverProps) => (
<OutsideClick onClick={onClose}>
<CardHoverWrapper onClick={onClose}>

28
src/features/MatchCard/CardSoon/index.tsx
Unescape View File

@ -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;
`

111
src/features/MatchCard/MatchInfoCard/index.tsx
Unescape View File

@ -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<HTMLLIElement>) => void,
showSportName?: boolean,
}
export const MatchInfoCard = ({
match: {
date,
hasVideo,
preview,
sportType,
team1,
team2,
time,
tournamentName,
},
onClick,
onKeyPress,
showSportName,
}: Props) => {
const { isHidden } = useScoreStore()
return (
<CardWrapper
onClick={onClick}
onKeyPress={onKeyPress}
>
<MatchDate>
{date}
<Time>
{time}
</Time>
</MatchDate>
<PreviewWrapper>
{
hasVideo
? (
<Preview
alt={tournamentName}
title={tournamentName}
src={preview}
/>
)
: (
<TeamLogos>
<TeamLogo
id={team1.id}
alt={team1.name}
title={team1.name}
sportType={sportType}
profileType={ProfileTypes.TEAMS}
/>
<TeamLogo
id={team2.id}
alt={team2.name}
title={team2.name}
sportType={sportType}
profileType={ProfileTypes.TEAMS}
/>
</TeamLogos>
)
}
</PreviewWrapper>
<Info>
{showSportName && <SportName sport={sportType} />}
{tournamentName && (
<TournamentName title={tournamentName}>
{tournamentName}
</TournamentName>
)}
<Teams>
<Team>
<TeamName title={team1.name}>{team1.name}</TeamName>
{!isHidden && <Score>{team1.score}</Score>}
</Team>
<Team>
<TeamName title={team2.name}>{team2.name}</TeamName>
{!isHidden && <Score>{team2.score}</Score>}
</Team>
</Teams>
</Info>
</CardWrapper>
)
}

17
src/features/MatchCard/hooks.tsx
Unescape View File

@ -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<HTMLLIElement>) => {
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,
}
}

28
src/features/MatchCard/styled.tsx
Unescape View File

@ -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;
}
`

2
src/features/Matches/helpers/prepareMatches.tsx
Unescape View File

@ -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),

Write Preview
Loading…
Cancel
Save