63 lines
1.4 KiB
JavaScript
63 lines
1.4 KiB
JavaScript
import { React, T } from 'Components'
|
|
import { useEffect, useMemo, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import Skeleton from 'react-loading-skeleton'
|
|
// $FlowFixMe
|
|
import 'react-select/dist/react-select.css'
|
|
import { fetchCompanyDetails } from '../api/sirene'
|
|
|
|
export default function CompanyDetails({ siren, denomination }) {
|
|
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">
|
|
<T>Crée le</T>{' '}
|
|
<strong>
|
|
{company ? (
|
|
DateFormatter.format(new Date(company.date_creation))
|
|
) : (
|
|
<Skeleton width={80} />
|
|
)}
|
|
</strong>
|
|
, <T>domiciliée à</T>{' '}
|
|
{company ? (
|
|
<>
|
|
<strong>{company.etablissement_siege.libelle_commune}</strong> (
|
|
{company.etablissement_siege.code_postal})
|
|
</>
|
|
) : (
|
|
<Skeleton width={100} />
|
|
)}
|
|
</p>
|
|
|
|
</>
|
|
)
|
|
}
|