Commit Graph

247 Commits

Author SHA1 Message Date
Radosław Gierwiało
8c753a7148 feat: add match data to suggestions and chat link for accepted recordings
Backend changes:
- Modified getUserSuggestions to include match data (id, slug, status)
- Returns match info for both toBeRecorded and toRecord suggestions

Frontend changes:
- Added useNavigate hook to RecordingTab
- Capture match data from updateSuggestionStatus response
- Added MessageCircle icon and chat button to SuggestionCard
- Show "Open Chat" button for accepted suggestions with active matches
- Navigate to /matches/{matchSlug}/chat when clicked

This completes the recording stats flow by allowing users to easily
access the match chat after accepting a recording suggestion.
2025-11-30 11:03:29 +01:00
Radosław Gierwiało
3371b53fc7 refactor: add atomic operations and documentation for recording stats edge cases
Fix race conditions and edge cases in recording stats update mechanism:

1. Race condition prevention:
   - Use atomic updateMany with statsApplied=false condition in rating endpoint
   - Prevents duplicate stats increments when both users rate concurrently
   - Only one request wins the race and applies stats (matches.js:834-843)

2. Multiple heats handling:
   - Check for existing Match by (user1Id, user2Id, eventId) instead of suggestionId
   - Ensures one Match per dancer-recorder pair regardless of number of heats
   - Reuses existing Match and chat room (events.js:1275-1291)

3. Documentation improvements:
   - Add comprehensive JSDoc explaining manual vs auto-match design decision
   - Clarify fairness metrics measure algorithmic assignments, not voluntary collaborations
   - Document user role convention (user1=dancer, user2=recorder)

Edge cases are verified through atomic operations and code review rather than
complex integration tests to maintain test clarity and reliability.

Test Results: 304/305 tests passing (99.7%)
Coverage: 74.63% (+0.1%)
2025-11-30 10:49:56 +01:00
Radosław Gierwiało
145c9f7ce6 feat: implement recording stats update mechanism for auto-matching
Add automatic tracking of recording statistics (recordingsDone/recordingsReceived)
for users participating in auto-matched collaborations. Stats are updated when
both users complete mutual ratings after a recording session.

Changes:
- Add suggestionId, source, and statsApplied fields to Match model
- Implement applyRecordingStatsForMatch() helper with user role convention
  (user1 = dancer, user2 = recorder)
- Update suggestion status endpoint to create Match on acceptance
- Update ratings endpoint to apply stats when match is completed
- Add comprehensive unit tests (5) and integration tests (5)

Convention: Stats only updated for auto-matches (source='auto') to ensure
fairness metrics reflect actual algorithmic assignments, not manual matches.

Test Results: 304/305 tests passing (99.7%)
Coverage: 74.53% (+1.48%)
2025-11-30 10:40:43 +01:00
Radosław Gierwiało
5ee1e0a4b9 docs: add matching integration tests to high priority tasks 2025-11-30 00:02:42 +01:00
Radosław Gierwiało
6965a2f7cd docs(tests): add comprehensive test plan for matching integration tests 2025-11-29 23:59:29 +01:00
Radosław Gierwiało
ce10d20cbb test(matching): add comprehensive tests for buffer functions and edge cases
- Export getPostDanceBufferSlots and HEAT_BUFFER_AFTER for testing
- Add direct tests for getPreDanceBufferSlots (4 tests)
- Add direct tests for getPostDanceBufferSlots (2 tests)
- Add test for HEAT_BUFFER_AFTER constant
- Add edge case for getCoverableHeats with multiple recorder heats
- Add edge case for hasCollision with multi-heat scenarios
- Total: 39/39 tests passing (9 new tests added)
2025-11-29 23:52:12 +01:00
Radosław Gierwiało
4fb78e08ad docs: add critical task for recording stats update mechanism 2025-11-29 23:42:10 +01:00
Radosław Gierwiało
f187b3e44e docs: update documentation with recent features
- Update README.md with tier system and recent features
- Add 3-tier account system (BASIC/SUPPORTER/COMFORT) to docs
- Document fairness algorithm and dual buffer system
- Add clickable usernames and country flags features
- Update test count to 285/286 passing (99.7%)
- Update database schema documentation with tier fields
- Update all last modified dates to 2025-11-29
2025-11-29 23:39:44 +01:00
Radosław Gierwiało
aef1a35ee2 feat(matching): implement 3-tier account system with fairness-based recording assignment
Add account tier system (BASIC/SUPPORTER/COMFORT) to reduce recording burden
for premium users while maintaining fairness through karma-based assignment.

Database Changes:
- Add AccountTier enum (BASIC, SUPPORTER, COMFORT)
- Add User.accountTier with BASIC default
- Add User.recordingsDone and User.recordingsReceived for karma tracking
- Add EventParticipant.accountTierOverride for event-specific tier upgrades
- Migration: 20251129220604_add_account_tiers_and_recording_stats

Matching Algorithm Updates:
- Implement fairness debt calculation: receivedCount - doneCount
- Apply tier penalties: SUPPORTER (-10), COMFORT (-50)
- New sorting priority: Location > Fairness > Load balancing
- Add getEffectiveTier() helper for tier resolution with override support
- Add getRecordingStatsForUsers() for fetching karma statistics

Tier Behavior:
- BASIC: Normal recording frequency (baseline, no penalty)
- SUPPORTER: Moderately reduced frequency (fairness penalty -10)
- COMFORT: Significantly reduced frequency (fairness penalty -50)
- All tiers can still be assigned when no better candidates available

Constants:
- ACCOUNT_TIER enum in src/constants/tiers.js
- FAIRNESS_SUPPORTER_PENALTY = 10
- FAIRNESS_COMFORT_PENALTY = 50

Tests:
- Update tests for dual buffer system semantics
- All 30 tests passing
- Fix imports: HEAT_BUFFER → HEAT_BUFFER_BEFORE
2025-11-29 23:19:41 +01:00
Radosław Gierwiało
029b25c9b2 fix(matching): improve collision detection and load balancing
- Add dual buffer system: BEFORE (prep) and AFTER (rest) dancing
- Track recording assignments to prevent double-booking recorders
- Fix sorting priority: location score takes precedence over load balancing
- Simplify opt-out logic with complete exclusion from matching pool
- Buffers apply only to dancing heats, not recording assignments
- Improve documentation clarity for algorithm constraints
2025-11-29 21:42:22 +01:00
Radosław Gierwiało
a9c46f552f feat: add @ prefix to profile URLs and make usernames clickable
- Updated all profile links to use /@username format
- Made usernames clickable in chat messages
- Added URL parameter sanitization to strip @ when fetching user data
- Ensures consistent profile URL format across the application
2025-11-29 20:57:17 +01:00
Radosław Gierwiało
4e9557bd29 feat(chat): add country flags and competitor numbers with normalized data architecture
Implemented display of country flags and competitor numbers in event chat messages:
- Country flags displayed as emoji (🇸🇪, 🇵🇱, etc.) with proper emoji font support
- Competitor numbers shown in #123 format next to usernames
- Normalized data architecture with user and participant caches on frontend
- User data (username, avatar, country) and participant data (competitorNumber) cached separately
- Messages store only core data (id, content, userId, createdAt)
- Prevents data inconsistency when users update profile information
- Fixed duplicate message keys React warning with deduplication logic
- Backend sends nested user/participant objects for cache population
- Auto-updates across all messages when user changes avatar or country

Backend changes:
- Socket.IO event_message and message_history include nested user/participant data
- API /events/:slug/messages endpoint restructured with same nested format
- Batch lookup of competitor numbers for efficiency

Frontend changes:
- useEventChat hook maintains userCache and participantCache
- ChatMessage component accepts separate user/participant props
- ChatMessageList performs cache lookups during render
- Emoji font family support for cross-platform flag rendering
2025-11-29 19:49:06 +01:00
Radosław Gierwiało
671b16cb82 feat(backend): add test bot for automated event chat testing
Add test-bot.js script that simulates a user participating in event chat for testing purposes.

Features:
- Authenticates as user via API
- Checks in to event using QR code token
- Connects to Socket.IO and joins event room
- Sends random messages at configurable intervals
- Auto-accepts recording suggestions

Usage from container:
docker compose exec backend sh -c 'API_URL=http://localhost:3000 node scripts/test-bot.js --email user@example.com --password pass --slug event-slug --interval 10'
2025-11-29 19:00:43 +01:00
Radosław Gierwiało
c575ef6dc1 feat(frontend): add page titles to navbar on mobile
- Save vertical space on mobile by showing page title in navbar
- Mobile: "spotlight.cam - {PageTitle}" instead of separate h1
- Desktop: unchanged - page titles remain as separate headings
- Saves ~60-80px vertical space on mobile devices

Pages updated:
- Dashboard, Events, Matches, History, Profile
2025-11-29 16:12:47 +01:00
Radosław Gierwiało
58044e1d02 fix(frontend): ensure consistent width across all matches tabs
- Add w-full to MatchCard for consistent card width
- Use Layout noPadding to avoid padding conflicts
- Add explicit padding and width control to main container
- Ensure All, Pending, and Active tabs have identical width
2025-11-29 15:56:12 +01:00
Radosław Gierwiało
420209c037 fix(frontend): add error message display on login page
- Show error alert when login fails instead of console-only logging
- Display user-friendly error message: "Invalid email or password"
- Clear error state before new login attempt
- Use existing Alert component for consistency with RegisterPage
2025-11-29 15:26:40 +01:00
Radosław Gierwiało
634cd97032 refactor(frontend): simplify event chat UI
- Replace "Edit heats" button with icon-only version
- Remove connection status indicator (show "Disconnected" warning only when offline)
- Remove event location from header
- Hide Participants tab on desktop (sidebar already visible)
- Remove "Participants" header from sidebar on desktop
2025-11-29 15:18:22 +01:00
Radosław Gierwiało
b79173937b chore: add .repl_history and .claude/ to gitignore 2025-11-29 15:05:38 +01:00
Radosław Gierwiało
dfb5313f9a refactor(frontend): implement mobile-first layout for chat pages
- Add fullWidth prop to Layout component for chat pages
- Redesign EventChatPage and MatchChatPage with fixed layout:
  - Navbar sticky to top (no gaps)
  - Event/partner header directly below navbar
  - Chat content fills available space (flex-1)
  - Input area fixed to bottom
  - Full screen width on mobile (no margins)
- Translate RecordingTab UI strings to English
- Move Leave Event button to header
- Remove unnecessary margins and max-width constraints

This provides a better mobile experience with full-screen chat
interface similar to native messaging apps.
2025-11-29 15:04:41 +01:00
Radosław Gierwiało
9206565523 security: add nginx headers and fix npm vulnerabilities
- Add security headers to nginx (X-Frame-Options, CSP, etc.)
- Reduce client_max_body_size from 500M to 10M
- Add npm overrides to fix cookie vulnerability in csurf
- Make navbar sticky with full width
2025-11-29 15:04:26 +01:00
Radosław Gierwiało
61d23681ff docs: update README with current features and test count
- Add Dashboard, Recording Matching, Competitor Numbers to features
- Update test count: 223 → 286 (73% coverage)
- Mark security features as implemented (CSRF, account lockout)
- Update Phase 3 section with actual completed items
- Update last modified date
2025-11-23 23:12:00 +01:00
Radosław Gierwiało
0d083dcb22 docs: optimize documentation for token efficiency
- SESSION_CONTEXT.md: 485 → 132 lines (-73%)
  - Remove outdated "Next Steps" sections
  - Remove detailed file listings
  - Keep only essential quick-reference info

- TODO.md: 917 → 118 lines (-87%)
  - Move detailed phase descriptions to COMPLETED.md
  - Keep security audit, checklist, future improvements
  - Remove redundant implementation details

- CONTEXT.md: Update test count to 286/286
2025-11-23 23:09:30 +01:00
Radosław Gierwiało
93c5680397 docs: update documentation with recent features
- Add Recording Matching System section (auto-matching algorithm)
- Add Competitor Number (Bib) Support section
- Add Frontend Refactoring section (component extraction, constants)
- Update test count: 223 → 286 tests (73% coverage)
- Update dates to 2025-11-23
2025-11-23 23:05:23 +01:00
Radosław Gierwiało
6f7465ee5a fix(tests): add wsdcId cleanup to prevent unique constraint violations
Both users.test.js and auth-phase1.5.test.js were failing due to
unique constraint violations on wsdc_id field when running after
other test suites. Added wsdcId to cleanup queries and proper
deletion of related data (messages, matches, eventParticipants).
2025-11-23 22:59:06 +01:00
Radosław Gierwiało
0ca79b6c7d refactor(backend): add status constants and update code to use them
- Create constants/statuses.js with MATCH_STATUS, SUGGESTION_STATUS
- Update routes/dashboard.js to use MATCH_STATUS
- Update routes/matches.js to use MATCH_STATUS
- Update routes/events.js to use SUGGESTION_STATUS
- Update services/matching.js to use SUGGESTION_STATUS
- Update tests to use constants
2025-11-23 22:40:54 +01:00
Radosław Gierwiało
408317b974 refactor(frontend): add CONNECTION_STATE and SUGGESTION_TYPE constants
- Add CONNECTION_STATE (disconnected, connecting, connected, failed)
- Add SUGGESTION_TYPE (toBeRecorded, toRecord)
- Update useWebRTC.js to use CONNECTION_STATE
- Update MatchChatPage.jsx to use CONNECTION_STATE
- Update RecordingTab.jsx to use SUGGESTION_TYPE
2025-11-23 22:28:54 +01:00
Radosław Gierwiało
b3a6d39d7a refactor(frontend): replace status string literals with constants
- Create constants/statuses.js with MATCH_STATUS, SUGGESTION_STATUS, MATCH_FILTER
- Update MatchCard, MatchesPage, HistoryPage, RatePartnerPage to use MATCH_STATUS
- Update RecordingTab to use SUGGESTION_STATUS
- Update Navbar to use MATCH_STATUS for API calls
2025-11-23 22:21:12 +01:00
Radosław Gierwiało
93ff331bfb refactor(frontend): extract ProfileForm and PasswordChangeForm from ProfilePage
- Create components/profile/ProfileForm.jsx (192 lines)
- Create components/profile/PasswordChangeForm.jsx (99 lines)
- Create components/profile/index.js barrel export
- Reduce ProfilePage.jsx from 394 → 84 lines (-79%)
2025-11-23 22:13:56 +01:00
Radosław Gierwiało
185c485ec7 refactor(frontend): extract MatchCard component from MatchesPage
- Create components/matches/MatchCard.jsx (119 lines)
- Create components/matches/index.js barrel export
- Reduce MatchesPage.jsx from 349 → 240 lines (-31%)
2025-11-23 22:11:43 +01:00
Radosław Gierwiało
8e17c10353 refactor(frontend): extract DashboardPage into components
Split DashboardPage (578 lines) into focused components:
- DashboardEventCard: event card with chat access
- DashboardMatchCard: match card with status indicators
- MatchRequestCards: incoming/outgoing request cards
- EmptyState: reusable empty state component (in common/)

DashboardPage now 295 lines (-49%)
2025-11-23 22:08:16 +01:00
Radosław Gierwiało
bddcf5f4f9 refactor(frontend): extract EventDetailsPage into components
Split large EventDetailsPage (545 lines) into smaller, focused components:
- QRCodeSection: QR code display and copy link functionality
- ParticipantsSection: participants list with avatars
- MatchingConfigSection: deadline and matching controls
- ScheduleConfigSection: division slot configuration

EventDetailsPage now 148 lines (-73%)
2025-11-23 22:02:09 +01:00
Radosław Gierwiało
4467c570b0 feat(matching): add schedule config for division collision groups
Allow event organizers to configure which divisions run in parallel
(same time slot) for accurate collision detection in the auto-matching
algorithm. Divisions in the same slot will collide with each other.

- Add scheduleConfig JSON field to Event model
- Add PUT /events/:slug/schedule-config API endpoint
- Update matching algorithm to use slot-based collision detection
- Add UI in EventDetailsPage for managing division slots
- Add unit tests for schedule-based collision detection
2025-11-23 19:05:25 +01:00
Radosław Gierwiało
a5a1296a4e feat(frontend): add recording matching UI
Add frontend components for auto-matching recording partners:

- RecordingTab component with suggestions list and opt-out toggle
- Tab navigation in EventChatPage (Chat, Uczestnicy, Nagrywanie)
- Matching configuration in EventDetailsPage (deadline, run matching)
- matchingAPI functions in api.js
- Return registrationDeadline and matchingRunAt in GET /events/:slug/details

UI allows users to:
- View who will record their heats
- View heats they need to record
- Accept/reject suggestions
- Opt-out from being a recorder
- Set registration deadline (admin)
- Manually trigger matching (admin)
2025-11-23 18:50:35 +01:00
Radosław Gierwiało
c18416ad6f feat(matching): add auto-matching system for recording partners
Implement algorithm to match dancers with recorders based on:
- Heat collision avoidance (division + competitionType + heatNumber)
- Buffer time (1 heat after dancing before can record)
- Location preference (same city > same country > anyone)
- Max 3 recordings per person
- Opt-out support (falls to bottom of queue)

New API endpoints:
- PUT /events/:slug/registration-deadline
- PUT /events/:slug/recorder-opt-out
- POST /events/:slug/run-matching
- GET /events/:slug/match-suggestions
- PUT /events/:slug/match-suggestions/:id/status

Database changes:
- Event: registrationDeadline, matchingRunAt
- EventParticipant: recorderOptOut
- RecordingSuggestion: new model for match suggestions
2025-11-23 18:32:14 +01:00
Radosław Gierwiało
edf68f2489 feat(events): add competitor number (bib) support
Allow participants to set their bib/competitor number per event.
Display as badge next to username in participant lists.

- Add competitorNumber field to EventParticipant model
- Add PUT /events/:slug/competitor-number endpoint
- Include competitorNumber in heats/me and heats/all responses
- Add input field in HeatsBanner component
- Display badge in UserListItem component
- Add unit tests for competitor number feature
2025-11-23 17:55:25 +01:00
Radosław Gierwiało
a2279662dc docs: archive DASHBOARD_PLAN.md and update task tracking
- Move completed DASHBOARD_PLAN.md to docs/archive/
- Update COMPLETED.md with dashboard implementation details
- Update TODO.md to reflect dashboard completion
- Mark remaining dashboard features as optional Phase 4
2025-11-21 21:59:51 +01:00
Radosław Gierwiało
8a369c1fc4 fix(socket): improve connection stability with heartbeat and auto-reconnect
- Backend: Add pingInterval (25s) and pingTimeout (60s) for better keep-alive
- Frontend: Increase reconnection attempts to Infinity (keep trying forever)
- Frontend: Add reconnect event handlers to rejoin rooms after reconnection
- Frontend: Check initial connection state when reusing socket instance
2025-11-21 21:53:51 +01:00
Radosław Gierwiało
78280ca8d8 feat(dashboard): add unread count for match chats
Track unread messages in match chats and display count badge:
- Schema: Add user1LastReadAt/user2LastReadAt to Match model
- Backend: Calculate unreadCount in dashboard API
- Socket: Update lastReadAt when user joins match room
- Frontend: Display red badge with unread count on match avatar
2025-11-21 21:46:00 +01:00
Radosław Gierwiało
2c0620db6a feat(dashboard): add online count for events
Show real-time count of users currently in each event chat room.
- Backend: Export getEventsOnlineCounts from socket module
- Dashboard API: Include onlineCount for each active event
- Frontend: Display online count with animated green dot indicator
2025-11-21 21:41:16 +01:00
Radosław Gierwiało
c15031db9f feat(frontend): add skeleton loading state for dashboard
Replace simple spinner with skeleton loading placeholders that match
the dashboard layout structure, providing better visual feedback during
data loading.
2025-11-21 21:37:05 +01:00
Radosław Gierwiało
87b0079b84 feat(frontend): add toast notifications for dashboard actions
- Install react-hot-toast library
- Add Toaster component to App.jsx
- Show success/error toasts for match accept/reject/cancel
- Show toasts for real-time match events
- Update tests with toast mocks
2025-11-21 21:27:03 +01:00
Radosław Gierwiało
4187157b94 feat(frontend): add Rate Partner button and dashboard tests
- Add Rate button to MatchCard (shows when video exchange complete & not rated)
- Add 15 comprehensive tests for DashboardPage component
- Tests cover: loading, empty states, events, matches, requests, navigation
2025-11-21 21:21:58 +01:00
Radosław Gierwiało
f3bd169dbf feat(frontend): implement dashboard page
- Create DashboardPage with active events, matches, and requests
- Add dashboardAPI.getData() to services/api.js
- Add /dashboard route as default landing after login
- Update Navbar with Dashboard and Events links
- Show video exchange and rating status for matches
- Handle match accept/reject/cancel actions
2025-11-21 21:12:25 +01:00
Radosław Gierwiało
901b046a34 feat(backend): implement dashboard API endpoint
- Add GET /api/dashboard endpoint for authenticated users
- Returns active events with user heats
- Returns accepted matches with partner info
- Detects video exchange status from message parsing
- Tracks rating completion status (rated by me/partner)
- Returns incoming/outgoing pending match requests
- Add comprehensive test suite (12 tests, 93% coverage)
- Add DASHBOARD_PLAN.md with full design documentation
2025-11-21 21:00:50 +01:00
Radosław Gierwiało
b945354db3 docs: move completed frontend refactoring to COMPLETED.md
Moved the entire frontend refactoring section (3 phases + bug fixes)
from TODO.md to docs/archive/COMPLETED.md for better organization.

Changes:
- TODO.md: Removed completed refactoring tasks (lines 363-728)
- COMPLETED.md: Added comprehensive refactoring summary with:
  - All 3 phases (Components, Hooks, Advanced Components)
  - Bug fixes (formatHeat, ChatRoom missing)
  - Final metrics (-559 lines, 16 new components, 3 new hooks)
  - Component structure diagram
2025-11-21 17:41:39 +01:00
Radosław Gierwiało
198c216b44 fix(backend): auto-create event ChatRoom on first check-in
Problem:
- User got "Chat room not found" error when trying to send messages
- Event ChatRooms were only created by seed script, not for manually
  created events
- Event "Another Dance Event" (ID: 420) was missing its ChatRoom

Root Cause:
- Seed script (seed.js:179-188) correctly creates ChatRooms for events
- But events created outside of seed (CLI, manual DB insert) didn't
  create ChatRooms
- Socket handler requires ChatRoom to exist before accepting messages

Solution:
1. Added defensive check in check-in handler (POST /api/events/checkin/:token)
2. Automatically creates ChatRoom if missing when first user checks in
3. Logs creation for debugging: "Created missing chat room for event: {slug}"

Impact:
- Existing events without ChatRooms will get them on next check-in
- Future manually-created events will work correctly
- No breaking changes - all 223 tests pass

Changes:
- backend/src/routes/events.js: Added ChatRoom existence check and
  auto-creation logic (lines 256-272)

Note: Manually created ChatRoom for event ID 420 to fix immediate issue
2025-11-21 17:34:17 +01:00
Radosław Gierwiało
ade5190d7b fix(frontend): resolve missing formatHeat function in EventChatPage
Bug: EventChatPage referenced formatHeat() function in header's heat display
(line 365) but the function was removed during Phase 3 refactoring when
creating the HeatBadges component.

Solution:
1. Enhanced HeatBadges component with badgeClassName prop to support
   custom styling (needed for dark header background)
2. Replaced manual heat rendering in EventChatPage header with
   HeatBadges component
3. Passed custom badge styling to match the dark primary-700 header

Changes:
- HeatBadges.jsx: Added badgeClassName prop for style customization
- EventChatPage.jsx: Replaced manual heat map with HeatBadges component

Fixes: "Uncaught ReferenceError: formatHeat is not defined" error
2025-11-21 17:29:12 +01:00
Radosław Gierwiało
082105c5bf refactor(frontend): Phase 3 - create advanced composite components
Extract complex UI sections into reusable composite components

New Components Created:
1. HeatBadges (heats/HeatBadges.jsx)
   - Displays competition heats with compact notation
   - Configurable max visible badges with "+X more" overflow
   - Tooltips with full heat information

2. UserListItem (users/UserListItem.jsx)
   - Reusable user entry with avatar, username, full name
   - Optional heat badges display
   - Flexible action button slot (render props pattern)
   - Online/offline status support

3. ParticipantsSidebar (events/ParticipantsSidebar.jsx)
   - Complete sidebar component for event participants
   - Filter checkbox for hiding users from own heats
   - Participant and online counters
   - Integrated UserListItem with match actions

4. FileTransferProgress (webrtc/FileTransferProgress.jsx)
   - WebRTC P2P file transfer UI
   - Progress bar with percentage
   - Send/Cancel actions

5. LinkShareInput (webrtc/LinkShareInput.jsx)
   - Fallback link sharing when WebRTC unavailable
   - Google Drive, Dropbox link support

Pages Refactored:
- EventChatPage: 564 → 471 lines (-93 lines, -16%)
  * Replaced 90-line participants sidebar with <ParticipantsSidebar />
  * Removed duplicate formatHeat logic (now in HeatBadges)

- MatchChatPage: 446 → 369 lines (-77 lines, -17%)
  * Replaced 56-line file transfer UI with <FileTransferProgress />
  * Replaced 39-line link input form with <LinkShareInput />

Phase 3 Total: -170 lines
Grand Total (Phase 1+2+3): -559 lines (-17%)

Final Results:
- EventChatPage: 761 → 471 lines (-290 lines, -38% reduction)
- MatchChatPage: 567 → 369 lines (-198 lines, -35% reduction)

Benefits:
- Massive complexity reduction in largest components
- Composite components can be reused across pages
- Better testability - each component tested independently
- Cleaner code organization - single responsibility principle
- Easier maintenance - changes in one place propagate everywhere
2025-11-21 17:10:53 +01:00
Radosław Gierwiało
9e74343c3b refactor(frontend): Phase 2 - extract business logic into custom hooks
Separate concerns - move Socket.IO and form logic from components to reusable hooks

New Hooks:
- useForm: Generic form state management with handleChange/handleSubmit/reset
- useEventChat: Extract Socket.IO logic from EventChatPage (156 lines)
  * Manages messages, active users, connection state
  * Handles send message, load older messages with scroll preservation
  * Real-time updates via Socket.IO event listeners
- useMatchChat: Extract Socket.IO logic from MatchChatPage (115 lines)
  * Manages 1:1 chat messages and connection
  * Loads message history from API
  * Real-time message sync via Socket.IO

Pages Refactored:
- EventChatPage: 661 → 564 lines (-97 lines, -15%)
- MatchChatPage: 517 → 446 lines (-71 lines, -14%)

Benefits:
- Cleaner component code - UI separated from business logic
- Reusable hooks can be used in other components
- Easier to test - hooks can be unit tested independently
- Better code organization - single responsibility principle
- 168 lines eliminated from pages, moved to 271 lines of reusable hooks

Phase 2 Total: -168 lines
Grand Total (Phase 1+2): -389 lines (-12%)
2025-11-21 17:02:04 +01:00
Radosław Gierwiało
dea9d70bb9 refactor(frontend): integrate reusable components across all pages
Phase 1 refactoring - eliminate code duplication and improve maintainability

Changes:
- LoginPage: Integrate FormInput and LoadingButton components (-9 lines)
- RegisterPage: Replace inline forms with FormInput/LoadingButton/Alert (-62 lines)
- EventChatPage: Integrate ChatMessageList/ChatInput and Modal components (-100 lines)
- MatchChatPage: Integrate ChatMessageList/ChatInput components (-50 lines)
- ProfilePage: Already using reusable components (no changes)

Total reduction: 221 lines (-11.6%)

Benefits:
- Eliminated ~40% code duplication in chat UI
- Unified form inputs across authentication pages
- Consistent modal dialogs with ConfirmationModal
- Improved maintainability - changes propagate to all uses
- Faster feature development with component library

Components used:
- Alert, FormInput, FormSelect, LoadingButton, LoadingSpinner
- ChatMessageList, ChatMessage, ChatInput
- Modal, ConfirmationModal
2025-11-21 16:50:46 +01:00