mon-entreprise/source/components/CompanyDetails.tsx

59 lines
1.4 KiB
TypeScript

import React, { useEffect, useMemo, useState } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import Skeleton from 'react-loading-skeleton'
import { Etablissement, fetchCompanyDetails } from '../api/sirene'
export default function CompanyDetails({ siren, denomination }: Etablissement) {
const { i18n } = useTranslation()
const DateFormatter = useMemo(
() =>
new Intl.DateTimeFormat(i18n.language, {
month: 'short',
day: 'numeric',
year: 'numeric'
}),
[i18n.language]
)
const [company, setCompany] = useState()
useEffect(() => {
fetchCompanyDetails(siren).then(setCompany)
}, [siren])
return (
<>
<h3>
{denomination || company ? (
<>
{denomination ||
company.denomination ||
company.prenom_usuel + ' ' + company.nom}{' '}
<small>({siren})</small>
</>
) : (
<Skeleton width={400} />
)}
</h3>
<p className="ui__ notice">
<Trans>Crée le</Trans>{' '}
<strong>
{company ? (
DateFormatter.format(new Date(company.date_creation))
) : (
<Skeleton width={80} />
)}
</strong>
, <Trans>domiciliée à</Trans>{' '}
{company ? (
<>
<strong>{company.etablissement_siege.libelle_commune}</strong> (
{company.etablissement_siege.code_postal})
</>
) : (
<Skeleton width={100} />
)}
</p>
</>
)
}