feat: implement user profile page with statistics, contribution map, and activity timeline
- Add userService for profile and activity API calls - Create UserProfilePage with tabbed interface (overview, reports, events, activity) - Display user statistics (reports count, events count, impact score) - Implement personal contribution map showing all user report locations - Add activity timeline with different activity types - Enable profile editing for own profile (first name, last name, username) - Update UserProfile component to link to profile page - Add /profile/:userId route to App - Install react-leaflet for map integration - Requirements: 6.3, 6.4, 6.5
This commit is contained in:
146
src/pages/USER_PROFILE_IMPLEMENTATION.md
Normal file
146
src/pages/USER_PROFILE_IMPLEMENTATION.md
Normal file
@@ -0,0 +1,146 @@
|
||||
# User Profile Page Implementation
|
||||
|
||||
## Overview
|
||||
|
||||
The User Profile Page displays comprehensive user statistics, contributions, and activity history. It provides both public profile viewing and personal profile editing capabilities.
|
||||
|
||||
## Features Implemented
|
||||
|
||||
### 1. User Statistics Display
|
||||
- **Reports Submitted**: Total count of litter reports submitted by the user
|
||||
- **Events Attended**: Total count of cleanup events the user has participated in
|
||||
- **Impact Score**: Calculated score based on user contributions (reports × 10 + events × 20)
|
||||
|
||||
### 2. Profile Information
|
||||
- User avatar, name, username, and email
|
||||
- Editable profile fields (first name, last name, username) for own profile
|
||||
- Edit/Save/Cancel functionality for profile updates
|
||||
|
||||
### 3. Personal Contribution Map
|
||||
- Interactive Leaflet map showing all report locations submitted by the user
|
||||
- Markers for each report with popup details (litter type, date)
|
||||
- Automatically centers on user's first report location
|
||||
|
||||
### 4. Activity Timeline
|
||||
- Chronological list of all user activities
|
||||
- Activity types:
|
||||
- Report submissions
|
||||
- Event creation
|
||||
- Event attendance
|
||||
- Event completion
|
||||
- Each activity shows title, description, location, and timestamp
|
||||
- Visual icons for different activity types
|
||||
|
||||
### 5. Tabbed Interface
|
||||
Four tabs for organizing profile content:
|
||||
- **Overview**: Statistics, contribution map, and recent activity
|
||||
- **Reports**: Grid view of all submitted reports with photos
|
||||
- **Events**: List of all events (created and attended) with details
|
||||
- **Activity**: Full activity timeline
|
||||
|
||||
## Routes
|
||||
|
||||
- `/profile/:userId` - View user profile (protected route)
|
||||
|
||||
## Components
|
||||
|
||||
### UserProfilePage (`src/pages/UserProfilePage.tsx`)
|
||||
Main profile page component with:
|
||||
- Profile header with avatar and statistics
|
||||
- Tabbed navigation
|
||||
- Contribution map
|
||||
- Reports grid
|
||||
- Events list
|
||||
- Activity timeline
|
||||
- Profile editing functionality
|
||||
|
||||
### UserProfile (`src/components/auth/UserProfile.tsx`)
|
||||
Updated header component that now links to the user's profile page when clicked.
|
||||
|
||||
## Services
|
||||
|
||||
### userService (`src/services/userService.ts`)
|
||||
API service for user-related operations:
|
||||
- `getProfile(userId)` - Fetch user profile with statistics
|
||||
- `updateProfile(userId, data)` - Update user profile information
|
||||
- `getUserReports(userId)` - Get all reports by user
|
||||
- `getUserEvents(userId)` - Get all events (created and attended)
|
||||
- `getUserActivity(userId)` - Get activity timeline
|
||||
|
||||
## Types
|
||||
|
||||
### UserProfile
|
||||
```typescript
|
||||
interface UserProfile extends User {
|
||||
reportCount: number;
|
||||
eventCount: number;
|
||||
}
|
||||
```
|
||||
|
||||
### UserActivity
|
||||
```typescript
|
||||
interface UserActivity {
|
||||
id: string;
|
||||
type: 'report' | 'event_created' | 'event_attended' | 'event_completed';
|
||||
timestamp: Date;
|
||||
title: string;
|
||||
description?: string;
|
||||
location?: {
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
locationName?: string;
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
### UpdateProfileDTO
|
||||
```typescript
|
||||
interface UpdateProfileDTO {
|
||||
firstName?: string;
|
||||
lastName?: string;
|
||||
username?: string;
|
||||
notificationEmail?: boolean;
|
||||
notificationInApp?: boolean;
|
||||
}
|
||||
```
|
||||
|
||||
## Backend Requirements
|
||||
|
||||
The following API endpoints need to be implemented on the backend:
|
||||
|
||||
1. `GET /api/users/:id` - Get user profile with statistics
|
||||
2. `PATCH /api/users/:id` - Update user profile
|
||||
3. `GET /api/users/:id/reports` - Get user's reports
|
||||
4. `GET /api/users/:id/events` - Get user's events
|
||||
5. `GET /api/users/:id/activity` - Get user's activity timeline
|
||||
|
||||
## Impact Score Calculation
|
||||
|
||||
The impact score is calculated as:
|
||||
```
|
||||
Impact Score = (Number of Reports × 10) + (Number of Events × 20)
|
||||
```
|
||||
|
||||
This gives more weight to event participation, encouraging community engagement.
|
||||
|
||||
## Permissions
|
||||
|
||||
- Any authenticated user can view any profile
|
||||
- Only the profile owner can edit their own profile
|
||||
- Edit button only appears when viewing own profile
|
||||
|
||||
## Mobile Responsiveness
|
||||
|
||||
- Responsive grid layouts for statistics and reports
|
||||
- Collapsible navigation for mobile devices
|
||||
- Touch-friendly map controls
|
||||
- Optimized for screens from 320px to desktop
|
||||
|
||||
## Future Enhancements
|
||||
|
||||
- Achievement badges based on milestones
|
||||
- Leaderboard integration
|
||||
- Social features (follow users, share profiles)
|
||||
- Export personal data
|
||||
- Profile privacy settings
|
||||
- Custom profile themes
|
||||
Reference in New Issue
Block a user