feat: refactor API base URL handling and update frontend components for improved data structure

octofit-tracker/frontend/src/components/Teams.jsx

@@ -1,9 +1,5 @@
 import { useEffect, useState } from 'react'
-
-const codespaceName = import.meta.env.VITE_CODESPACE_NAME
-const API_BASE = codespaceName
-  ? `https://${codespaceName}-8000.app.github.dev/api`
-  : 'http://localhost:8000/api'
+import { API_BASE } from '../lib/apiBase'
 
 function Teams() {
   const [teams, setTeams] = useState([])
@@ -17,7 +13,7 @@ function Teams() {
         return res.json()
       })
       .then((data) => {
-        setTeams(Array.isArray(data) ? data : (data.results ?? []))
+        setTeams(Array.isArray(data) ? data : (data.items ?? data.results ?? []))
         setLoading(false)
       })
       .catch((err) => {
@@ -36,6 +32,7 @@ function Teams() {
         <thead>
           <tr>
             <th>Name</th>
+            <th>Captain</th>
             <th>Members</th>
           </tr>
         </thead>
@@ -43,7 +40,12 @@ function Teams() {
           {teams.map((team) => (
             <tr key={team._id ?? team.id}>
               <td>{team.name}</td>
-              <td>{Array.isArray(team.members) ? team.members.join(', ') : team.members}</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>