Policy.tsx

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;