jiti-meet/react/features/notifications/components/web/ParticipantNotificationList.js

83 lines
2.6 KiB
JavaScript
Raw Normal View History

// @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>);
}