overleaf/services/web/frontend/js/features/settings/components/emails-section.tsx
ilkin-overleaf 5b0c122f5d Merge pull request #7290 from overleaf/ii-7154-list-user-emails
List of user emails

GitOrigin-RevId: 28a8e405812932ba7ebd8043a4dc9d3c573a68b2
2022-04-11 08:03:38 +00:00

49 lines
1.3 KiB
TypeScript

import { Fragment } from 'react'
import { useTranslation, Trans } from 'react-i18next'
import {
UserEmailsProvider,
useUserEmailsContext,
} from '../context/user-email-context'
import EmailsHeader from './emails/header'
import EmailsRow from './emails/row'
function EmailsSectionContent() {
const { t } = useTranslation()
const {
state: { data: userEmailsData },
} = useUserEmailsContext()
const userEmails = Object.values(userEmailsData.byId)
return (
<>
<h3>{t('emails_and_affiliations_title')}</h3>
<p className="small">{t('emails_and_affiliations_explanation')}</p>
<p className="small">
<Trans i18nKey="change_primary_email_address_instructions">
<strong />
{/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
<a href="/learn/how-to/Keeping_your_account_secure" />
</Trans>
</p>
<EmailsHeader />
{userEmails?.map((userEmail, i) => (
<Fragment key={userEmail.email}>
<EmailsRow userEmailData={userEmail} />
{i + 1 !== userEmails.length && (
<div className="horizontal-divider" />
)}
</Fragment>
))}
</>
)
}
function EmailsSection() {
return (
<UserEmailsProvider>
<EmailsSectionContent />
</UserEmailsProvider>
)
}
export default EmailsSection