-
Bjarke Madsen authoredBjarke Madsen authored
Policy.tsx 3.63 KiB
import React, { useEffect, useMemo, useState } from 'react';
import { Table } from "react-bootstrap";
import { Policy, FilterSelection } from "../Schema";
import { createPolicyDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from '../helpers/dataconversion';
import DataPage from '../components/DataPage';
import Filter from "../components/graphing/Filter"
import { Sections } from '../helpers/constants';
interface inputProps {
filterSelection: FilterSelection
setFilterSelection: React.Dispatch<React.SetStateAction<FilterSelection>>
}
function getJSXFromMap(data: Map<string, Map<number, Policy>>) {
const policies = [
['acceptable_use', 'Acceptable Use Policy'],
['connectivity', 'Connectivity Policy'],
['data_protection', 'Data Protection Policy'],
['environmental', 'Environmental Policy'],
['equal_opportunity', 'Equal Opportunity Policy'],
['privacy_notice', 'Privacy Notice'],
['strategic_plan', 'Strategic Plan']
];
return Array.from(data.entries()).map(([nren, nrenMap]) => {
return Array.from(nrenMap.entries()).map(([year, policy], yearIndex) => (
<tr key={nren + year} className='dotted-border'>
<td className='pt-3 nren-column text-nowrap'>{yearIndex == 0 && nren}</td>
<td className='pt-3 year-column'>{year}</td>
<td className='pt-3 blue-column'>
<ul>
{policies.map(([key, text]) => (
!!policy[key] && (
<li key={key}>
<a href={policy[key]} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>
{text}
</a>
</li>
)
))}
</ul>
</td>
</tr>
))
})
}
function PolicyPage({ filterSelection, setFilterSelection }: inputProps) {
const [policyData, setProjectData] = useState<Policy[]>([]);
const { years, nrens } = useMemo(
() => getYearsAndNrens(policyData),
[policyData]
);
const selectedData = (policyData).filter(project =>
filterSelection.selectedYears.includes(project.year) && filterSelection.selectedNrens.includes(project.nren)
);
const policyDataByYear = createPolicyDataLookup(selectedData);
useEffect(() => {
loadDataWithFilterSelectionFallback('/api/policy/', setProjectData, setFilterSelection);
}, [setFilterSelection]);
const filterNode = <Filter
filterOptions={{ availableYears: [...years], availableNrens: [...nrens.values()] }}
filterSelection={filterSelection}
setFilterSelection={setFilterSelection}
/>
return (
<DataPage title="NREN Policies"
description='The table shows the NRENs policies. By selecting multiple year and NRENs,
the table can be used to compare the NRENs policies over years of selected NRENs.'
category={Sections.Policy} filter={filterNode}>
<Table borderless className='compendium-table'>
<thead>
<tr>
<th className='nren-column'>NREN</th>
<th className='year-column'>Year</th>
<th className='blue-column'>Policies</th>
</tr>
</thead>
<tbody>
{getJSXFromMap(policyDataByYear)}
</tbody>
</Table>
</DataPage>
)
}
export default PolicyPage;