okapidemo/whiteboxservice/app/src/Connection.js

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

const Subscriptions = ({service}) => {
    if (!service) {
        return null
    }
    return (<table className="c-table">
        <thead>
            <tr>
                <th>Naam</th>
                <th>Bsn</th>
                <th>Geboortedatum</th>
                <th>Acties</th>
            </tr>
        </thead>
        <tbody>
        {service.Subscriptions.map(x => {
            return (<tr key={x.ID}>
                <td>{x.SubjectDisplayName}</td>
                <td>{x.SubjectExternalId}</td>
                <td>{x.SubjectBirthdate}</td>
                <td><Link to={`/connecties/${service.ConnectionID}/${service.ID}/${x.ID}`}>Bekijk dossier</Link></td>
            </tr>)
        })}
        </tbody>
    </table>
    )
}

const Connection = () => {
    let params = useParams();
    const [connection, setConnection] = useState(null)
    const [service, setService] = useState(null)
    useEffect(() => {
        fetch(`/api/connections/${params.connId}`).then(x => x.json()).then(x => setConnection(x) )
    }, [])
    useEffect(() => {
        fetch(`/api/connections/${params.connId}/${params.serviceId}`).then(x => x.json()).then(x => setService(x) )
    }, [])
    return (
        <div>
            <h1 className="t-page-header">Patiënten</h1>
            {(connection && service) ? (<h2>{connection.OrganisationDisplayName} ({connection.OrganisationIdentifier}) | {service.Service.Name}</h2>) : null}
            {<Subscriptions service={service}/>}
        </div>
    );
};

export default Connection;