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
This commit is contained in:
Radosław Gierwiało
2025-11-21 21:41:16 +01:00
parent c15031db9f
commit 2c0620db6a
4 changed files with 88 additions and 1 deletions

View File

@@ -326,6 +326,12 @@ const EventCard = ({ event }) => {
<div className="flex items-center gap-2">
<Users className="w-4 h-4 flex-shrink-0" />
<span>{event.participantsCount} participants</span>
{event.onlineCount > 0 && (
<span className="text-green-600 flex items-center gap-1">
<span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
{event.onlineCount} online
</span>
)}
</div>
</div>

View File

@@ -128,6 +128,59 @@ describe('DashboardPage', () => {
});
});
it('should display online count when users are online', async () => {
dashboardAPI.getData.mockResolvedValue({
activeEvents: [
{
id: 1,
slug: 'test-event',
name: 'Test Event',
location: 'Warsaw',
startDate: '2025-12-01',
endDate: '2025-12-03',
participantsCount: 50,
onlineCount: 5,
myHeats: [],
},
],
activeMatches: [],
matchRequests: { incoming: [], outgoing: [] },
});
renderWithRouter(<DashboardPage />);
await waitFor(() => {
expect(screen.getByText('5 online')).toBeInTheDocument();
});
});
it('should not display online count when zero', async () => {
dashboardAPI.getData.mockResolvedValue({
activeEvents: [
{
id: 1,
slug: 'test-event',
name: 'Test Event',
location: 'Warsaw',
startDate: '2025-12-01',
endDate: '2025-12-03',
participantsCount: 50,
onlineCount: 0,
myHeats: [],
},
],
activeMatches: [],
matchRequests: { incoming: [], outgoing: [] },
});
renderWithRouter(<DashboardPage />);
await waitFor(() => {
expect(screen.getByText('Test Event')).toBeInTheDocument();
});
expect(screen.queryByText(/online/)).not.toBeInTheDocument();
});
it('should navigate to event chat when clicking Enter Chat', async () => {
dashboardAPI.getData.mockResolvedValue({
activeEvents: [