okapidemo/dvzaservice/app/src/Connections.js

import React from "react";
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import "./Index.css";

const subscriptionsCount = (s) => {
    const l = s.Subscriptions.length
    return l == 1 ? "1 patiënt aangemeld" : `${l} patiënten aangemeld`
}

const App = () => {
    const [connections, setConnections] = useState([])
    useEffect(() => {
        fetch('/api/connections').then(x => x.json()).then(x => setConnections(x) )
    }, [])
    return (
        <div>
            <h1 className="t-page-header">Informatiesystemen</h1>
            <table className="c-table">
                <thead>
                    <tr>
                        <th>AGB</th>
                        <th>Naam</th>
                        <th>Geactiveerde diensten</th>
                    </tr>
                </thead>
                <tbody>
                {connections.map(x => {
                    return (<tr key={x.ID}>
                        <td>{x.OrganisationIdentifier}</td>
                        <td>{x.OrganisationDisplayName}</td>
                        <td>{x.Services.length ? x.Services.map((s) => {
                            return <span key={s.Service.ID} style={{marginRight: 10}}><Link to={`/connecties/${x.ID}/${s.ID}`} >{s.Service.Name} ({subscriptionsCount(s)})</Link></span>
                        }) : '-'}</td>
                    </tr>)
                })}
                </tbody>
            </table>
        </div>
    );
};

export default App;