overleaf/services/web/frontend/js/features/group-management/components/user-row.tsx
Alexandre Bourdin 665f5e37c4 Merge pull request #15348 from overleaf/ab-decoupling-refactor-members-table
[web] Modular members management table refactoring

GitOrigin-RevId: 9a3a00a32970e78e5b43b3a68621a627c490c728
2023-10-30 09:04:43 +00:00

81 lines
2 KiB
TypeScript

import moment from 'moment'
import { useCallback } from 'react'
import { Col, Row } from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
import { User } from '../../../../../types/group-management/user'
type GroupMemberRowProps = {
user: User
selectUser: (user: User) => void
unselectUser: (user: User) => void
selected: boolean
}
export default function UserRow({
user,
selectUser,
unselectUser,
selected,
}: GroupMemberRowProps) {
const { t } = useTranslation()
const handleSelectUser = useCallback(
(event, user) => {
if (event.target.checked) {
selectUser(user)
} else {
unselectUser(user)
}
},
[selectUser, unselectUser]
)
return (
<li key={`user-${user.email}`}>
<Row>
<Col xs={4}>
<label htmlFor={`select-user-${user.email}`} className="sr-only">
{t('select_user')}
</label>
<input
className="select-item"
id={`select-user-${user.email}`}
type="checkbox"
checked={selected}
onChange={e => handleSelectUser(e, user)}
/>
<span>{user.email}</span>
</Col>
<Col xs={4}>
{user.first_name} {user.last_name}
</Col>
<Col xs={2}>
{user.last_active_at
? moment(user.last_active_at).format('Do MMM YYYY')
: 'N/A'}
</Col>
<Col xs={2}>
{user.invite ? (
<>
<i
className="fa fa-times"
aria-hidden="true"
aria-label={t('invite_not_accepted')}
/>
<span className="sr-only">{t('invite_not_accepted')}</span>
</>
) : (
<>
<i
className="fa fa-check text-success"
aria-hidden="true"
aria-label={t('accepted_invite')}
/>
<span className="sr-only">{t('accepted_invite')}</span>
</>
)}
</Col>
</Row>
</li>
)
}