Admin/ocean-cleanup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resolve React key duplicates and NaN in profile page

Browse Source 
- 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
This commit is contained in:
Paul Bailey
2025-11-16 21:46:40 +00:00
parent 701735a7e4
commit ad06833842
2 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
server/src/services/userService.ts
View File

@@ -98,6 +98,8 @@ export class UserService {
return { return {
...user, ...user,
reportCount: user._count.reports,
eventCount: user._count.eventRegistrations,
stats: { stats: {
reportsSubmitted: user._count.reports, reportsSubmitted: user._count.reports,
eventsAttended: user._count.eventRegistrations, eventsAttended: user._count.eventRegistrations,

8
src/pages/UserProfilePage.tsx
View File

@@ -111,7 +111,9 @@ export function UserProfilePage() {
const calculateImpactScore = () => { const calculateImpactScore = () => {
if (!profile) return 0; if (!profile) return 0;
// Impact score calculation: reports * 10 + events attended * 20 // 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) => { const formatDate = (date: Date) => {
@@ -422,8 +424,8 @@ export function UserProfilePage() {
<h2 className="text-xl font-semibold mb-4">Activity Timeline</h2> <h2 className="text-xl font-semibold mb-4">Activity Timeline</h2>
{activity.length > 0 ? ( {activity.length > 0 ? (
<div className="space-y-4"> <div className="space-y-4">
{activity.map((item) => ( {activity.map((item, index) => (
<div key={item.id} className="flex items-start space-x-4"> <div key={`${item.type}-${item.id}-${index}`} className="flex items-start space-x-4">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<div className="h-12 w-12 bg-blue-100 rounded-full flex items-center justify-center"> <div className="h-12 w-12 bg-blue-100 rounded-full flex items-center justify-center">
{item.type === 'report' && <span className="text-xl">📍</span>} {item.type === 'report' && <span className="text-xl">📍</span>}