import React from "react";
import { useEffect, useState } from "react";
import "./Index.css";

const App = () => {
    const [registrations, setRegistrations] = useState([])
    useEffect(() => {
        fetch('/api/registrations').then(x => x.json()).then(x => setRegistrations(x) )
    }, [])
    return (
        <div>
            <h1 className="t-page-header">Registratie verzoeken</h1>
            <table className="c-table">
                <tr>
                    <th>AGB</th>
                    <th>Naam</th>
                    <th>Referentie</th>
                    <th>Tijdelijk wachtwoord</th>
                </tr>
                {registrations.map(x => {
                    return (<tr key={x.ID}>
                        <td>{x.OrganisationIdentifier}</td>
                        <td>{x.OrganisationDisplayName}</td>
                        <td>{x.Reference}</td>
                        <td>{x.PSK}</td>
                    </tr>)
                })}
            </table>
        </div>
    );
};

export default App;