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
This commit is contained in:
2025-11-16 21:46:40 +00:00
parent 701735a7e4
commit ad06833842
2 changed files with 7 additions and 3 deletions

View File

@@ -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>}