36 lines
890 B
JavaScript
36 lines
890 B
JavaScript
|
// @flow
|
||
|
|
|
||
|
|
import React from 'react';
|
||
|
|
import { useTranslation } from 'react-i18next';
|
||
|
|
import { useSelector } from 'react-redux';
|
||
|
|
|
||
|
|
import { getLobbyState } from '../../lobby/functions';
|
||
|
|
|
||
|
|
import { LobbyParticipantItem } from './LobbyParticipantItem';
|
||
|
|
import { Heading } from './styled';
|
||
|
|
|
||
|
|
export const LobbyParticipantList = () => {
|
||
|
|
const {
|
||
|
|
lobbyEnabled,
|
||
|
|
knockingParticipants: participants
|
||
|
|
} = useSelector(getLobbyState);
|
||
|
|
const { t } = useTranslation();
|
||
|
|
|
||
|
|
if (!lobbyEnabled || !participants.length) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Heading>{t('participantsPane.headings.lobby', { count: participants.length })}</Heading>
|
||
|
|
<div>
|
||
|
|
{participants.map(p => (
|
||
|
|
<LobbyParticipantItem
|
||
|
|
key = { p.id }
|
||
|
|
participant = { p } />)
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|