From ad06833842b565e3e310eab0b77f4befbd5360e2 Mon Sep 17 00:00:00 2001
From: Paul Bailey <psbailey31@gmail.com>
Date: Sun, 16 Nov 2025 21:46:40 +0000
Subject: [PATCH] fix: resolve React key duplicates and NaN in profile page

- Fix NaN error in impact score calculation by handling undefined reportCount/eventCount
- Fix duplicate React keys in activity timeline by using unique composite keys
- Add reportCount and eventCount to backend profile response to match frontend expectations
- Keep stats object for backward compatibility

Fixes:
- 'Received NaN for children attribute' warning
- 'Encountered two children with the same key' errors
---
 server/src/services/userService.ts | 2 ++
 src/pages/UserProfilePage.tsx      | 8 +++++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/server/src/services/userService.ts b/server/src/services/userService.ts
index 934a995..f1ecb30 100644
--- a/server/src/services/userService.ts
+++ b/server/src/services/userService.ts
@@ -98,6 +98,8 @@ export class UserService {
 
     return {
       ...user,
+      reportCount: user._count.reports,
+      eventCount: user._count.eventRegistrations,
       stats: {
         reportsSubmitted: user._count.reports,
         eventsAttended: user._count.eventRegistrations,
diff --git a/src/pages/UserProfilePage.tsx b/src/pages/UserProfilePage.tsx
index efafaab..fb6d896 100644
--- a/src/pages/UserProfilePage.tsx
+++ b/src/pages/UserProfilePage.tsx
@@ -111,7 +111,9 @@ export function UserProfilePage() {
   const calculateImpactScore = () => {
     if (!profile) return 0;
     // Impact score calculation: reports * 10 + events attended * 20
-    return profile.reportCount * 10 + profile.eventCount * 20;
+    const reportCount = profile.reportCount || 0;
+    const eventCount = profile.eventCount || 0;
+    return reportCount * 10 + eventCount * 20;
   };
 
   const formatDate = (date: Date) => {
@@ -422,8 +424,8 @@ export function UserProfilePage() {
                 <h2 className="text-xl font-semibold mb-4">Activity Timeline</h2>
                 {activity.length > 0 ? (
                   <div className="space-y-4">
-                    {activity.map((item) => (
-                      <div key={item.id} className="flex items-start space-x-4">
+                    {activity.map((item, index) => (
+                      <div key={`${item.type}-${item.id}-${index}`} className="flex items-start space-x-4">
                         <div className="flex-shrink-0">
                           <div className="h-12 w-12 bg-blue-100 rounded-full flex items-center justify-center">
                             {item.type === 'report' && <span className="text-xl">📍</span>}