ConnectedInstitutionsURLs.tsx

import React, { useContext} from 'react';
import { Table } from "react-bootstrap";

import {ConnectedInstitutionURLs} from "../Schema";
import { createConnectedInstitutionsURLsDataLookup } from '../helpers/dataconversion';
import DataPage from '../components/DataPage';
import Filter from "../components/graphing/Filter";
import { Sections } from '../helpers/constants';
import { FilterSelectionContext } from '../helpers/FilterSelectionProvider';
import {useData} from "../helpers/useData";

function getJSXFromMap(data: Map<string, Map<number, ConnectedInstitutionURLs>>) {
    return Array.from(data.entries()).map(([nren, nrenMap]) => {
        return Array.from(nrenMap.entries()).map(([year, institution], yearIndex) => (
            <tr key={nren + year}>
                <td className='pt-3 nren-column'>{yearIndex === 0 && nren}</td>
                <td className='pt-3 year-column'>{year}</td>
                <td className='pt-3 blue-column'>
                    <ul>
                        {/* Display URLs */}
                        {institution.urls.map((url, index) => (
                            <li key={index}>
                                <a href={url} target="_blank" rel="noopener noreferrer">{url}</a>
                            </li>
                        ))}
                    </ul>
                </td>
            </tr>
        ));
    });
}

function ConnectedInstitutionsURLsPage() {
    const {filterSelection, setFilterSelection } = useContext(FilterSelectionContext);
    const {data: institutionData, years, nrens} = useData<ConnectedInstitutionURLs>('/api/institutions-urls/', setFilterSelection);


    const selectedData = institutionData.filter(institution =>
        filterSelection.selectedYears.includes(institution.year) &&
        filterSelection.selectedNrens.includes(institution.nren)
    );
    const institutionDataByYear = createConnectedInstitutionsURLsDataLookup(selectedData);

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

    return (
        <DataPage title="Connected Institutions URLs"
        description='The table shows URLs of the institutions connected to NRENs. You can filter the data by years and by NRENs.'
        category={Sections.ConnectedUsers} 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'>URLs</th>
                    </tr>
                </thead>
                <tbody>
                    {getJSXFromMap(institutionDataByYear)}
                </tbody>
            </Table>
        </DataPage>
    );
}

export default ConnectedInstitutionsURLsPage;