76 lines
1.7 KiB
TypeScript
76 lines
1.7 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'
|
|
|
|
type Company = {
|
|
denomination: string
|
|
prenom_usuel: string
|
|
nom: string
|
|
date_creation: string
|
|
etablissement_siege: {
|
|
libelle_commune: string
|
|
code_postal: string
|
|
}
|
|
}
|
|
|
|
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<Company>()
|
|
useEffect(() => {
|
|
fetchCompanyDetails(siren).then(setCompany)
|
|
}, [siren])
|
|
|
|
return (
|
|
<>
|
|
<h3>
|
|
{denomination || company ? (
|
|
<>
|
|
{denomination ||
|
|
(company &&
|
|
(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>
|
|
,
|
|
{company ? (
|
|
company.etablissement_siege ? (
|
|
<>
|
|
<Trans>domiciliée à</Trans>{' '}
|
|
<strong>{company.etablissement_siege.libelle_commune}</strong> (
|
|
{company.etablissement_siege.code_postal})
|
|
</>
|
|
) : (
|
|
<Trans>domiciliation inconnue</Trans>
|
|
)
|
|
) : (
|
|
<Skeleton width={100} />
|
|
)}
|
|
</p>
|
|
</>
|
|
)
|
|
}
|