learn-build-apps-copilot-agent/octofit-tracker/frontend/src/components/Teams.jsx

import { useEffect, useState } from 'react'

function Teams() {
  const [teams, setTeams] = useState([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)
  const endpoint = import.meta.env.VITE_CODESPACE_NAME
    ? `https://${import.meta.env.VITE_CODESPACE_NAME}-8000.app.github.dev/api/teams/`
    : '/api/teams/'

  useEffect(() => {
    fetch(endpoint)
      .then((res) => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`)
        return res.json()
      })
      .then((data) => {
        setTeams(Array.isArray(data) ? data : (data.items ?? data.results ?? []))
        setLoading(false)
      })
      .catch((err) => {
        setError(err.message)
        setLoading(false)
      })
  }, [endpoint])

  if (loading) return <p>Loading teams…</p>
  if (error) return <p className="text-danger">Error: {error}</p>

  return (
    <div>
      <h2>Teams</h2>
      <table className="table table-striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Captain</th>
            <th>Members</th>
          </tr>
        </thead>
        <tbody>
          {teams.map((team) => (
            <tr key={team._id ?? team.id}>
              <td>{team.name}</td>
              <td>{team.captain?.username ?? team.captain}</td>
              <td>
                {Array.isArray(team.members)
                  ? team.members.map((member) => member?.username ?? member).join(', ')
                  : team.members}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      {teams.length === 0 && <p>No teams found.</p>}
    </div>
  )
}

export default Teams