u-fit/frontend/src/training/components/Registrations.tsx

import { User } from '../../gql'
import { useState } from 'react'

const Registration = ({ registration }: { registration: User }) => {
  return (
    <li key={registration.id}>
      <button type='button' onClick={() => alert('not implemented.')}>
        delete
      </button>
      Registration: {registration.name}
    </li>
  )
}

const Registrations = ({
  registrations,
  className,
}: {
  registrations?: User[]
  className: string
}) => {
  const [show, setShow] = useState(false)
  return (
    <div className={className}>
      <h2>
        Registrations <span onClick={() => setShow(!show)}>({registrations?.length ?? 0})</span>
      </h2>
      {show &&
        (registrations?.length ? (
          <ul>
            {registrations.map((registration) => (
              <Registration registration={registration} />
            ))}
          </ul>
        ) : (
          <p>No registrations found.</p>
        ))}
    </div>
  )
}

export default Registrations