You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.5 KiB
88 lines
2.5 KiB
import size from 'lodash/size'
|
|
|
|
import { PlaylistTypes } from 'features/MatchPage/types'
|
|
import type { PlaylistOption, Playlists } from 'features/MatchPage/types'
|
|
import type { MatchInfo } from 'requests'
|
|
|
|
import { DropdownSection } from './components/DropdownSection'
|
|
import { MatchPlaylists } from './components/MatchPlaylists'
|
|
import { SideInterviews } from './components/SideInterviews'
|
|
import { PlayersPlaylists } from './components/PlayersPlaylists'
|
|
|
|
import {
|
|
ButtonBox,
|
|
Container,
|
|
DropdownWrapper,
|
|
List,
|
|
SettingsButton,
|
|
Wrapper,
|
|
} from './styled'
|
|
|
|
type Props = {
|
|
onSelect: (option: PlaylistOption) => void,
|
|
openPopup: () => void,
|
|
playlists: Playlists,
|
|
profile: MatchInfo,
|
|
selectedPlaylist?: PlaylistOption,
|
|
}
|
|
|
|
export const isEqual = (target: PlaylistOption, selected?: PlaylistOption) => (
|
|
target.id === selected?.id && target.type === selected.type
|
|
)
|
|
|
|
export const MatchSidePlaylists = ({
|
|
onSelect,
|
|
openPopup,
|
|
playlists,
|
|
profile,
|
|
selectedPlaylist,
|
|
}: Props) => {
|
|
const playersCount = size(playlists.players.team1) + size(playlists.players.team2)
|
|
|
|
return (
|
|
<Wrapper>
|
|
<Container>
|
|
<MatchPlaylists
|
|
playlists={playlists.match}
|
|
selectedMathPlaylist={selectedPlaylist}
|
|
onSelect={onSelect}
|
|
/>
|
|
<DropdownWrapper>
|
|
<DropdownSection
|
|
itemsCount={size(playlists.interview)}
|
|
title={playlists.lexics?.interview}
|
|
>
|
|
<SideInterviews
|
|
interviews={playlists.interview}
|
|
selectedMathPlaylist={selectedPlaylist}
|
|
onSelect={onSelect}
|
|
/>
|
|
</DropdownSection>
|
|
<ButtonBox>
|
|
<SettingsButton onClick={openPopup} />
|
|
</ButtonBox>
|
|
<DropdownSection
|
|
isOpen={selectedPlaylist?.type === PlaylistTypes.PLAYER}
|
|
itemsCount={playersCount}
|
|
title={playlists.lexics?.players}
|
|
>
|
|
<List>
|
|
<PlayersPlaylists
|
|
teamName={profile?.team1}
|
|
players={playlists.players.team1}
|
|
selectedMathPlaylist={selectedPlaylist}
|
|
onSelect={onSelect}
|
|
/>
|
|
<PlayersPlaylists
|
|
teamName={profile?.team2}
|
|
players={playlists.players.team2}
|
|
selectedMathPlaylist={selectedPlaylist}
|
|
onSelect={onSelect}
|
|
/>
|
|
</List>
|
|
</DropdownSection>
|
|
</DropdownWrapper>
|
|
</Container>
|
|
</Wrapper>
|
|
)
|
|
}
|
|
|