From a66979fb341caf98644763af9d1a9f97cd6552e4 Mon Sep 17 00:00:00 2001
From: Decobus <deco@deco.sh>
Date: Sat, 19 Jul 2025 05:52:25 -0400
Subject: [PATCH] Fix frontend compatibility with new API response format
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Frontend Updates:
- Handle both old and new API response formats for backward compatibility
- Updated Teams, Streams, and Edit Stream pages to parse new response structure
- Added graceful handling of { success: true, data: [...] } format
- Maintained support for legacy direct array responses

Bug Fix:
- Resolved TypeError: teamsData.map is not a function
- Ensures smooth transition as we update API endpoints
- Prevents breaking changes during API modernization

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/edit/[id]/page.tsx | 5 ++++-
 app/streams/page.tsx   | 8 ++++++--
 app/teams/page.tsx     | 4 +++-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/app/edit/[id]/page.tsx b/app/edit/[id]/page.tsx
index f967fa4..6fe9463 100644
--- a/app/edit/[id]/page.tsx
+++ b/app/edit/[id]/page.tsx
@@ -65,9 +65,12 @@ export default function EditStream() {
           team_id: streamData.team_id,
         });
         
+        // Handle both old and new API response formats
+        const teams = teamsData.success ? teamsData.data : teamsData;
+        
         // Map teams for dropdown
         setTeams(
-          teamsData.map((team: Team) => ({
+          teams.map((team: Team) => ({
             id: team.team_id,
             name: team.team_name,
           }))
diff --git a/app/streams/page.tsx b/app/streams/page.tsx
index 24ec835..e92feeb 100644
--- a/app/streams/page.tsx
+++ b/app/streams/page.tsx
@@ -44,15 +44,19 @@ export default function AddStream() {
       const teamsData = await teamsResponse.json();
       const streamsData = await streamsResponse.json();
 
+      // Handle both old and new API response formats
+      const teams = teamsData.success ? teamsData.data : teamsData;
+      const streams = streamsData.success ? streamsData.data : streamsData;
+
       // Map the API data to the format required by the Dropdown
       setTeams(
-        teamsData.map((team: Team) => ({
+        teams.map((team: Team) => ({
           id: team.team_id,
           name: team.team_name,
         }))
       );
       
-      setStreams(streamsData);
+      setStreams(streams);
     } catch (error) {
       console.error('Failed to fetch data:', error);
       showError('Failed to Load Data', 'Could not fetch teams and streams. Please refresh the page.');
diff --git a/app/teams/page.tsx b/app/teams/page.tsx
index 19b7a3b..223e73a 100644
--- a/app/teams/page.tsx
+++ b/app/teams/page.tsx
@@ -26,7 +26,9 @@ export default function Teams() {
     try {
       const res = await fetch('/api/teams');
       const data = await res.json();
-      setTeams(data);
+      // Handle both old and new API response formats
+      const teams = data.success ? data.data : data;
+      setTeams(teams);
     } catch (error) {
       console.error('Error fetching teams:', error);
     } finally {