Events RSVP Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use compose:subagent (recommended) or compose:execute to implement this plan task-by-task.

Goal: Add RSVP functionality to events — join/cancel, attendee list, event detail page, recurring event support.

Architecture: Events listed via GET /community_events. RSVP via POST/DELETE on /events/{id}/event_attendees. Attendee list via GET. Recurring events have batch RSVP.

Tech Stack: React 19, TanStack Router, TanStack React Query, shadcn/ui

---

File Structure

src/
├── lib/api/
│   └── events.ts                        # Event API hooks
├── components/events/
│   ├── EventCard.tsx                    # Event card with RSVP button
│   ├── EventDetail.tsx                  # Full event detail view
│   ├── AttendeeList.tsx                 # List of attendees
│   └── RecurringEventCard.tsx           # Recurring event with batch RSVP
├── routes/
│   ├── events.tsx                       # Enhanced events listing
│   └── events/
│       └── $eventId.tsx                 # Event detail page

---

Task 1: Event API Hooks

Files:

• Create: src/lib/api/events.ts

• [ ] Step 1: Create event API layer

Hooks:

• useEventAttendees(eventId) — GET /api/headless/v1/events/{eventId}/event_attendees

• useRsvpEvent(eventId) — POST /api/headless/v1/events/{eventId}/event_attendees

• useCancelRsvp(eventId) — DELETE /api/headless/v1/events/{eventId}/event_attendees

• useRecurringEvents(spaceId, eventId) — GET /api/headless/v1/spaces/{spaceId}/events/{eventId}/recurring_events

• useRsvpRecurring(spaceId, eventId) — PUT /api/headless/v1/spaces/{spaceId}/events/{eventId}/recurring_events/rsvp

• [ ] Step 2: Commit

---

Task 2: EventCard Component

Files:

• Create: src/components/events/EventCard.tsx

• [ ] Step 1: Create event card

Props: event object, current user's RSVP status

Display:

• Event title, description preview

• Date/time, location (online/presence)

• RSVP count / limit

• RSVP button: "Confirmar presença" (primary) or "Cancelar" (outline) based on rsvped_event

• Attendee avatars (first 5, +N more)

• Link to event detail

• [ ] Step 2: Commit

---

Task 3: AttendeeList Component

Files:

• Create: src/components/events/AttendeeList.tsx

• [ ] Step 1: Create attendee list

Props: eventId

Display:

• List of attendees with avatar, name

• Pagination (load more)

• Empty state

• Loading skeleton

• [ ] Step 2: Commit

---

Task 4: EventDetail Component

Files:

• Create: src/components/events/EventDetail.tsx

• [ ] Step 1: Create event detail view

Full event detail with:

• Event title, description (body_plain_text)

• Date/time range, duration

• Location (virtual URL or in-person)

• RSVP section: button + count + limit

• Attendee list

• Space info

• Back link

• [ ] Step 2: Commit

---

Task 5: Enhanced Events Page

Files:

• Modify: src/routes/events.tsx

• [ ] Step 1: Update events page

Replace the basic event links with EventCard components. Add RSVP functionality inline.

• [ ] Step 2: Commit

---

Task 6: Event Detail Page Route

Files:

• Create: src/routes/events/$eventId.tsx

• [ ] Step 1: Create event detail page

Standard shell layout with EventDetail component.

• [ ] Step 2: Commit

---

Task 7: Verify Build

• [ ] Step 1: Run typecheck
• [ ] Step 2: Run build
• [ ] Step 3: Fix any issues