feat(#2341): add filters and tournaments for homepage in desktop
Andrei Dekterev
4 years ago
parent
7e2d557f04
commit
556811823d
@ -0,0 +1,99 @@ |
||||
import { ProfileTypes } from 'config' |
||||
|
||||
import { getSportLexic } from 'helpers' |
||||
|
||||
import { T9n } from 'features/T9n' |
||||
import { useUserFavoritesStore } from 'features/UserFavorites/store' |
||||
import { Icon } from 'features/Icon' |
||||
import { useHeaderFiltersStore } from 'features/HeaderFilters' |
||||
|
||||
import { SportIcon } from 'components/SportIcon/SportIcon' |
||||
|
||||
import { TournamentProps } from '../TournamentMobile/index' |
||||
|
||||
import { |
||||
CardWrapperOuter, |
||||
CardWrapper, |
||||
CountMatches, |
||||
FavoriteSign, |
||||
FirstInfo, |
||||
Info, |
||||
LiveSign, |
||||
MatchTimeInfo, |
||||
TournamentLogo, |
||||
PreviewWrapper, |
||||
TournamentName, |
||||
CountryFlag, |
||||
SecondaryInfo, |
||||
HoverFrame, |
||||
} from './styled' |
||||
|
||||
export const CollapseTournament = ({ |
||||
tournament, |
||||
tournamentMatches, |
||||
}: TournamentProps) => { |
||||
const { setSelectedSport, setIsShowTournament } = useHeaderFiltersStore() |
||||
const { isInFavorites } = useUserFavoritesStore() |
||||
const { |
||||
countryId, |
||||
live, |
||||
sportType, |
||||
} = tournament |
||||
|
||||
const tournamentInFavorites = isInFavorites( |
||||
ProfileTypes.TOURNAMENTS, |
||||
tournament.id, |
||||
) |
||||
|
||||
const handleClick = () => { |
||||
const sportName = getSportLexic(sportType) |
||||
setIsShowTournament(false) |
||||
setSelectedSport([sportName]) |
||||
} |
||||
|
||||
return ( |
||||
<CardWrapperOuter onClick={() => handleClick()}> |
||||
<CardWrapper> |
||||
<HoverFrame /> |
||||
<PreviewWrapper> |
||||
<TournamentLogo |
||||
id={tournament.id} |
||||
nameAsTitle |
||||
altNameObj={tournament} |
||||
sportType={sportType} |
||||
profileType={ProfileTypes.TOURNAMENTS} |
||||
/> |
||||
<MatchTimeInfo> |
||||
{live && ( |
||||
<LiveSign> |
||||
<T9n t='live' /> |
||||
</LiveSign> |
||||
)} |
||||
</MatchTimeInfo> |
||||
</PreviewWrapper> |
||||
<Info> |
||||
<FirstInfo> |
||||
<SportIcon fill='#ffffff' sport={sportType} /> |
||||
<CountryFlag |
||||
src={`https://instatscout.com/images/flags/48/${countryId}.png`} |
||||
/> |
||||
</FirstInfo> |
||||
|
||||
<SecondaryInfo> |
||||
<TournamentName nameObj={tournament} /> |
||||
{tournamentInFavorites && ( |
||||
<FavoriteSign marginLeft={12} color='rgba(255, 255, 255, 0.5)'> |
||||
<Icon refIcon='Star' /> |
||||
</FavoriteSign> |
||||
)} |
||||
</SecondaryInfo> |
||||
<CountMatches> |
||||
{tournamentMatches.length} |
||||
|
||||
<T9n t='games' /> |
||||
</CountMatches> |
||||
</Info> |
||||
</CardWrapper> |
||||
</CardWrapperOuter> |
||||
) |
||||
} |
||||
@ -0,0 +1,215 @@ |
||||
import styled, { css } from 'styled-components/macro' |
||||
|
||||
import { devices } from 'config/devices' |
||||
import { isMobileDevice } from 'config/userAgent' |
||||
|
||||
import { Name } from 'features/Name' |
||||
import { ProfileLogo } from 'features/ProfileLogo' |
||||
|
||||
export const CardWrapperOuter = styled.li.attrs({ |
||||
tabIndex: 0, |
||||
})` |
||||
padding-top: 100%; |
||||
position: relative; |
||||
${isMobileDevice |
||||
? css` |
||||
width: 100%; |
||||
padding-top: 0; |
||||
height: 90px; |
||||
margin-bottom: 10px; |
||||
|
||||
@media screen and (orientation: landscape){ |
||||
width: 49%; |
||||
:nth-child(odd){ |
||||
margin-right: 10px; |
||||
} |
||||
} |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const CardWrapper = styled.div` |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
bottom: 0; |
||||
right: 0; |
||||
padding-bottom: 0.75rem; |
||||
border-radius: 2px; |
||||
background: linear-gradient(236.13deg, rgba(53, 96, 225, 0.56) -4.49%, rgba(0, 0, 0, 0) 98.29%), #3F3F3F; |
||||
cursor: pointer; |
||||
${isMobileDevice |
||||
? css` |
||||
width: 100%; |
||||
height: 90px; |
||||
padding-bottom: 0; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const HoverFrame = styled.div` |
||||
position: absolute; |
||||
min-width: 100%; |
||||
min-height: 100%; |
||||
border-radius: 2px; |
||||
border: 2px solid transparent; |
||||
transition: border 0.5s ease-out; |
||||
z-index: 2; |
||||
|
||||
&:hover { |
||||
border: 2px solid #fff |
||||
} |
||||
` |
||||
|
||||
export const PreviewWrapper = styled.div` |
||||
position: relative; |
||||
display: flex; |
||||
justify-content: center; |
||||
width: 100%; |
||||
height: 60%; |
||||
${isMobileDevice |
||||
? css` |
||||
width: 50%; |
||||
height: 100%; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const MatchTimeInfo = styled.div` |
||||
width: 100%; |
||||
position: absolute; |
||||
top: 0.519rem; |
||||
padding: 0 0.519rem; |
||||
display: flex; |
||||
flex-direction: row; |
||||
` |
||||
|
||||
type MatchDateProps = { |
||||
isHomePage?: boolean, |
||||
} |
||||
|
||||
export const MatchDate = styled.div<MatchDateProps>` |
||||
width: fit-content; |
||||
height: 0.9rem; |
||||
border-radius: 2px; |
||||
padding: ${({ isHomePage }) => (!isHomePage ? '0 0.27rem' : '')}; |
||||
font-weight: bold; |
||||
font-size: 0.472rem; |
||||
line-height: 0.567rem; |
||||
letter-spacing: 0.05em; |
||||
text-transform: uppercase; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
white-space: nowrap; |
||||
color: white; |
||||
background-color: #6D6D6D; |
||||
|
||||
@media ${devices.tablet} { |
||||
padding: ${({ isHomePage }) => (!isHomePage ? '0.27rem 0.36rem' : '')}; |
||||
} |
||||
${isMobileDevice |
||||
? css` |
||||
height: 15px; |
||||
font-size: 8px; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const LiveSign = styled(MatchDate)` |
||||
background-color: #CC0000; |
||||
margin-left: auto; |
||||
` |
||||
|
||||
export const Time = styled.span` |
||||
margin: 0 0.2rem; |
||||
` |
||||
|
||||
export const Info = styled.div` |
||||
display: flex; |
||||
flex-direction: column; |
||||
padding: 0.85rem 0.472rem 0 0.519rem; |
||||
color: #fff; |
||||
text-overflow: ellipsis; |
||||
overflow: hidden; |
||||
white-space: nowrap; |
||||
${isMobileDevice |
||||
? css` |
||||
position: absolute; |
||||
top: 0; |
||||
left: 50%; |
||||
width: 50%; |
||||
height: 100%; |
||||
padding: 13px 12px 13px 10px; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const FirstInfo = styled.div` |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
margin: 5px 0; |
||||
` |
||||
|
||||
export const SecondaryInfo = styled.div` |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
` |
||||
|
||||
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; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const CountMatches = styled.span` |
||||
display: block; |
||||
text-align: center; |
||||
font-weight: 400; |
||||
font-size: 10px; |
||||
line-height: 16px; |
||||
color: #FFFFFF; |
||||
` |
||||
|
||||
export const TournamentName = styled(Name)` |
||||
font-weight: 600; |
||||
font-size: 13px; |
||||
line-height: 24px; |
||||
color: #ffffff; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
` |
||||
|
||||
export const TournamentLogo = styled(ProfileLogo)` |
||||
padding: 10px; |
||||
max-height: 100%; |
||||
` |
||||
|
||||
type FavoriteSignProps = { |
||||
color?: string, |
||||
marginLeft?: number, |
||||
} |
||||
|
||||
export const FavoriteSign = styled.span<FavoriteSignProps>` |
||||
margin-left: ${({ marginLeft = 9 }) => marginLeft}px; |
||||
color: ${({ color }) => color}; |
||||
display: flex; |
||||
transform: translateY(25%); |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 8px; |
||||
height: 8px; |
||||
margin-bottom: 7px; |
||||
` |
||||
@ -1,36 +1,68 @@ |
||||
import { useRouteMatch } from 'react-router-dom' |
||||
|
||||
import type { Match } from 'features/Matches' |
||||
import { MatchCard } from 'features/MatchCard' |
||||
|
||||
import type { TournamentType } from 'requests/getMatches/types' |
||||
|
||||
import { Tournament } from './components/Tournament' |
||||
import { PAGES } from 'config/pages' |
||||
import { isMobileDevice } from 'config/userAgent' |
||||
|
||||
import { TournamentMobile } from './components/TournamentMobile' |
||||
import { useTournaments } from './hooks' |
||||
import { CollapseTournament } from './components/CollapseTournament' |
||||
|
||||
type TournamentTypeProps = { |
||||
matches: Array<Match>, |
||||
} |
||||
|
||||
export type TournamentListProps = { |
||||
[key: number]:{tournament: TournamentType & { |
||||
countryId: number, |
||||
live: boolean, |
||||
sportType: number, |
||||
}, |
||||
tournamentMatches: Array<Match>, |
||||
}, |
||||
[key: number]: { |
||||
tournament: TournamentType & { |
||||
countryId: number, |
||||
live: boolean, |
||||
sportType: number, |
||||
} |
||||
tournamentMatches: Array<Match>, |
||||
} |
||||
} |
||||
|
||||
export const TournamentList = ({ matches }: TournamentTypeProps) => { |
||||
const { tournaments, tournamentSort } = useTournaments(matches) |
||||
const isHomePage = useRouteMatch(PAGES.home)?.isExact |
||||
|
||||
return ( |
||||
<> |
||||
{tournamentSort?.map((id) => ( |
||||
<Tournament |
||||
key={id} |
||||
tournament={tournaments[id].tournament} |
||||
tournamentMatches={tournaments[id].tournamentMatches} |
||||
/> |
||||
))} |
||||
</> |
||||
) |
||||
switch (true) { |
||||
case isMobileDevice && isHomePage: |
||||
return ( |
||||
<> |
||||
{tournamentSort?.map((id) => ( |
||||
<TournamentMobile |
||||
key={id} |
||||
tournament={tournaments[id].tournament} |
||||
tournamentMatches={tournaments[id].tournamentMatches} |
||||
/> |
||||
))} |
||||
</> |
||||
) |
||||
case isHomePage && matches.length <= 12: |
||||
return ( |
||||
<> |
||||
{tournamentSort?.map((id) => ( |
||||
<CollapseTournament |
||||
key={id} |
||||
tournament={tournaments[id].tournament} |
||||
tournamentMatches={tournaments[id].tournamentMatches} |
||||
/> |
||||
))} |
||||
</> |
||||
) |
||||
default: |
||||
return ( |
||||
<> |
||||
{matches.map((match) => ( |
||||
<MatchCard key={match.id} match={match} /> |
||||
))} |
||||
</> |
||||
) |
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue