59 lines
2.2 KiB
TypeScript
59 lines
2.2 KiB
TypeScript
import { useState } from 'react';
|
|
import DemographicEvidence, {
|
|
type DemographicAnalysis,
|
|
} from './demographic-evidence';
|
|
|
|
export default function DemographicContext({
|
|
territoryId,
|
|
}: {
|
|
territoryId?: string | null;
|
|
}) {
|
|
const [evidence, setEvidence] = useState<DemographicAnalysis | null>(null);
|
|
const [message, setMessage] = useState('');
|
|
const [busy, setBusy] = useState(false);
|
|
if (!territoryId) return null;
|
|
return (
|
|
<details className="rounded border p-4">
|
|
<summary>Demografia na análise de viabilidade</summary>
|
|
<p>
|
|
Consulte a população e a estrutura etária da localização
|
|
escolhida, com fontes, anos e limitações.
|
|
</p>
|
|
<button
|
|
type="button"
|
|
className="my-2 underline"
|
|
disabled={busy}
|
|
onClick={async () => {
|
|
setBusy(true);
|
|
setMessage('');
|
|
try {
|
|
const response = await fetch(
|
|
`/api/v1/investment/demography?territories[]=${encodeURIComponent(territoryId)}`,
|
|
{ headers: { Accept: 'application/json' } },
|
|
);
|
|
if (!response.ok)
|
|
throw new Error('Consulta indisponível.');
|
|
setEvidence(await response.json());
|
|
} catch {
|
|
setMessage(
|
|
'Não foi possível consultar a evidência demográfica.',
|
|
);
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}}
|
|
>
|
|
Consultar indicadores do ano actual
|
|
</button>
|
|
{message && <p role="alert">{message}</p>}
|
|
{evidence && <DemographicEvidence evidence={evidence} />}
|
|
<a
|
|
className="block underline"
|
|
href={`/localizacoes/demografia?territories[]=${encodeURIComponent(territoryId)}`}
|
|
>
|
|
Escolher período, sector e comparar localizações
|
|
</a>
|
|
</details>
|
|
);
|
|
}
|