From 4dc0c10c9d3108070c16b89b0832e1143c5ddbd7 Mon Sep 17 00:00:00 2001
From: Tudor <tudor.sitaru@gmail.com>
Date: Mon, 2 Feb 2026 22:00:07 +0000
Subject: [PATCH] Fix metrics API response structure

Backend returns metrics as an array, not an object.
- Update MetricsResponse type to use MetricDefinition[] instead of Record
- Remove Object.values() conversion in compare and rankings pages
- Fix useMetrics hook to handle array instead of object
- Fix getMetric to use array.find() instead of object indexing

Fixes empty metric dropdown on compare page.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 nextjs-app/app/compare/page.tsx  | 4 ++--
 nextjs-app/app/rankings/page.tsx | 4 ++--
 nextjs-app/hooks/useMetrics.ts   | 6 +++---
 nextjs-app/lib/types.ts          | 3 ++-
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/nextjs-app/app/compare/page.tsx b/nextjs-app/app/compare/page.tsx
index 095fe88..4cdf2ff 100644
--- a/nextjs-app/app/compare/page.tsx
+++ b/nextjs-app/app/compare/page.tsx
@@ -44,8 +44,8 @@ export default async function ComparePage({ searchParams }: ComparePageProps) {
     // Fetch available metrics
     const metricsResponse = await fetchMetrics();
 
-    // Convert metrics object to array
-    const metricsArray = Object.values(metricsResponse?.metrics || {});
+    // Metrics is already an array
+    const metricsArray = metricsResponse?.metrics || [];
 
     return (
       <ComparisonView
diff --git a/nextjs-app/app/rankings/page.tsx b/nextjs-app/app/rankings/page.tsx
index 2426f11..57a547f 100644
--- a/nextjs-app/app/rankings/page.tsx
+++ b/nextjs-app/app/rankings/page.tsx
@@ -43,8 +43,8 @@ export default async function RankingsPage({ searchParams }: RankingsPageProps)
       fetchMetrics(),
     ]);
 
-    // Convert metrics object to array
-    const metricsArray = Object.values(metricsResponse?.metrics || {});
+    // Metrics is already an array
+    const metricsArray = metricsResponse?.metrics || [];
 
     return (
       <RankingsView
diff --git a/nextjs-app/hooks/useMetrics.ts b/nextjs-app/hooks/useMetrics.ts
index 08ea7a9..cb4f5bc 100644
--- a/nextjs-app/hooks/useMetrics.ts
+++ b/nextjs-app/hooks/useMetrics.ts
@@ -19,9 +19,9 @@ export function useMetrics() {
   );
 
   return {
-    metrics: data?.metrics || {},
-    metricsList: data?.metrics ? Object.values(data.metrics) : [],
-    getMetric: (key: string) => data?.metrics?.[key],
+    metrics: data?.metrics || [],
+    metricsList: data?.metrics || [],
+    getMetric: (key: string) => data?.metrics?.find(m => m.key === key),
     isLoading,
     error,
   };
diff --git a/nextjs-app/lib/types.ts b/nextjs-app/lib/types.ts
index 7a0ded8..7b3d2b6 100644
--- a/nextjs-app/lib/types.ts
+++ b/nextjs-app/lib/types.ts
@@ -194,8 +194,9 @@ export interface MetricDefinition {
   hasNationalAverage?: boolean;
 }
 
+// Backend returns metrics as an array, not an object
 export interface MetricsResponse {
-  metrics: Record<string, MetricDefinition>;
+  metrics: MetricDefinition[];
 }
 
 export interface DataInfoResponse {