SubOrganisation.tsx

import React, { useEffect, useMemo, useState } from 'react';
import { Table } from "react-bootstrap";

import { Organisation, FilterSelection } from "../Schema";
import { createOrganisationDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion";
import DataPage from '../components/DataPage';
import Filter from "../components/graphing/Filter"
import { Sections } from '../helpers/constants';


function getJSXFromMap(data: Map<string, Map<number, Organisation[]>>) {
    return Array.from(data.entries()).map(([nren, nrenMap]) => {
        return Array.from(nrenMap.entries()).map(([year, organizations], 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>
                        {organizations.map(organization => (
                            <li key={organization.name}>{organization.name} ({organization.role})</li>
                        ))}
                    </ul>
                </td>
            </tr>
        ))
    })
}

interface inputProps {
    filterSelection: FilterSelection
    setFilterSelection: React.Dispatch<React.SetStateAction<FilterSelection>>
}

function SubOrganisation({ filterSelection, setFilterSelection }: inputProps) {
    const [organisationData, setOrganisationData] = useState<Organisation[]>([]);

    const { years, nrens } = useMemo(
        () => getYearsAndNrens(organisationData),
        [organisationData]
    );

    const selectedData = (organisationData).filter(data =>
        filterSelection.selectedYears.includes(data.year) && filterSelection.selectedNrens.includes(data.nren)
    );
    const organisationDataset = createOrganisationDataLookup(selectedData);

    useEffect(() => {
        loadDataWithFilterSelectionFallback('/api/organization/sub', setOrganisationData, setFilterSelection);
    }, [setFilterSelection]);

    const filterNode = <Filter
        filterOptions={{ availableYears: [...years], availableNrens: [...nrens.values()] }}
        filterSelection={filterSelection}
        setFilterSelection={setFilterSelection}
    />

    return (
        <DataPage title="NREN Suborganisations" 
        description='The table shows the NRENs suborganisations. You can select multiple years and NRENs to get a 
        tabular view of NRENs suborganisations over the years.'
        category={Sections.Organisation} 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'>Suborganisation and Role</th>
                    </tr>
                </thead>
                <tbody>
                    {getJSXFromMap(organisationDataset)}
                </tbody>
            </Table>
        </DataPage>
    );
}
export default SubOrganisation;