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> </> ) }