import React, { useCallback, useState } from 'react' import { Button, Col, Form, FormControl, Row } from 'react-bootstrap' import { Trans, useTranslation } from 'react-i18next' import MaterialIcon from '../../../shared/components/material-icon' import useWaitForI18n from '../../../shared/hooks/use-wait-for-i18n' import getMeta from '../../../utils/meta' import { useGroupMembersContext } from '../context/group-members-context' import ErrorAlert from './error-alert' import MembersList from './members-table/members-list' export default function GroupMembers() { const { isReady } = useWaitForI18n() const { t } = useTranslation() const { users, selectedUsers, addMembers, removeMembers, removeMemberLoading, removeMemberError, inviteMemberLoading, inviteError, paths, } = useGroupMembersContext() const [emailString, setEmailString] = useState('') const groupId: string = getMeta('ol-groupId') const groupName: string = getMeta('ol-groupName') const groupSize: number = getMeta('ol-groupSize') const handleEmailsChange = useCallback( e => { setEmailString(e.target.value) }, [setEmailString] ) if (!isReady) { return null } const onAddMembersSubmit = (e: React.FormEvent
) => { e.preventDefault() addMembers(emailString) } return (

{' '} {groupName || t('group_subscription')}

{selectedUsers.length === 0 && ( , ]} // eslint-disable-line react/jsx-key values={{ addedUsersSize: users.length, groupSize }} shouldUnescape tOptions={{ interpolation: { escapeValue: true } }} /> )} {removeMemberLoading ? ( ) : ( <> {selectedUsers.length > 0 && ( )} )}

{t('members_management')}


{users.length < groupSize && (

{t('add_more_members')}

{inviteMemberLoading ? ( ) : ( )} {t('export_csv')} {t('add_comma_separated_emails_help')}
)} {users.length >= groupSize && users.length > 0 && ( <> {t('export_csv')} )}
) }