83 lines
2.6 KiB
JavaScript
83 lines
2.6 KiB
JavaScript
// @flow
|
|
|
|
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { Avatar } from '../../../base/avatar';
|
|
import { HIDDEN_EMAILS } from '../../../lobby/constants';
|
|
|
|
import NotificationButton from './NotificationButton';
|
|
|
|
type Props = {
|
|
|
|
/**
|
|
* Callback used when clicking the ok/approve button.
|
|
*/
|
|
onApprove: Function,
|
|
|
|
/**
|
|
* Callback used when clicking the reject button.
|
|
*/
|
|
onReject: Function,
|
|
|
|
/**
|
|
* Array of participants to be displayed.
|
|
*/
|
|
participants: Array<Object>,
|
|
|
|
/**
|
|
* String prefix used for button `test-id`.
|
|
*/
|
|
testIdPrefix: string
|
|
}
|
|
|
|
/**
|
|
* Component used to display a list of notifications based on a list of participants.
|
|
* This is visible only to moderators.
|
|
*
|
|
* @returns {React$Element<'div'> | null}
|
|
*/
|
|
export default function({ onApprove, onReject, participants, testIdPrefix }: Props): React$Element<'ul'> {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<ul className = 'knocking-participants-container'>
|
|
{ participants.map(p => (
|
|
<li
|
|
className = 'knocking-participant'
|
|
key = { p.id }>
|
|
<Avatar
|
|
displayName = { p.name }
|
|
size = { 48 }
|
|
testId = { `${testIdPrefix}.avatar` }
|
|
url = { p.loadableAvatarUrl } />
|
|
|
|
<div className = 'details'>
|
|
<span data-testid = { `${testIdPrefix}.name` }>
|
|
{ p.name }
|
|
</span>
|
|
{ p.email && !HIDDEN_EMAILS.includes(p.email) && (
|
|
<span data-testid = { `${testIdPrefix}.email` }>
|
|
{ p.email }
|
|
</span>
|
|
) }
|
|
</div>
|
|
<NotificationButton
|
|
action = { onApprove }
|
|
className = 'primary'
|
|
participant = { p }
|
|
testId = { `${testIdPrefix}.allow` }>
|
|
{ t('lobby.allow') }
|
|
</NotificationButton>
|
|
<NotificationButton
|
|
action = { onReject }
|
|
className = 'borderLess'
|
|
participant = { p }
|
|
testId = { `${testIdPrefix}.reject` }>
|
|
{ t('lobby.reject') }
|
|
</NotificationButton>
|
|
</li>
|
|
)) }
|
|
</ul>);
|
|
}
|