Share an event with a link #26

New issue

Open

opened 2026-10-03 19:44:35 +00:00 by jalenluorion · 0 comments

jalenluorion commented

2026-10-03 19:44:35 +00:00

Member

Goal
Students want to send an event to a friend. Add a "Copy link" button to the event popover, and a new /events/[id] page that shows that event when the link is opened.

What you'll learn
Next.js dynamic routes, fetching from our API, and the browser clipboard API.

Resources

Where to start

web/src/app/components/EventPopover.tsx and ModalEvent.tsx: add the button next to "Add". The event id is eventDetails.id.
web/src/app/events/[id]/page.tsx: new page. Read the id with useParams() from next/navigation in a client component.
api/app/api/events.py, get_specific_events: GET /api/events/<int:event_id> already exists and is @public. It returns every event column plus org (host name), user_saved, and user_is_admin. ModalEvent.tsx shows how to call it.
GET /api/events/<id>/tags returns the tags.

Done when

"Copy link" copies ${window.location.origin}/events/<id> with navigator.clipboard.writeText and shows a brief "Copied!" state
/events/<id> shows title, time, location, host, description, tags, and the Add/Remove button
An unknown id shows a friendly "Event not found" message (the API returns 404)
A signed-out visitor who signs in from a shared link lands back on that event
Works in light and dark mode

Notes
web/src/app/layout.tsx shows the sign-in page for every route when signed out, and Welcome.tsx hardcodes signInUrl("/"). Pass the current path instead. The link points at the event series, not a single occurrence.

**Goal** Students want to send an event to a friend. Add a "Copy link" button to the event popover, and a new `/events/[id]` page that shows that event when the link is opened. **What you'll learn** Next.js dynamic routes, fetching from our API, and the browser clipboard API. **Resources** - [Next.js dynamic routes](https://nextjs.org/docs/app/api-reference/file-conventions/dynamic-routes) - [Clipboard.writeText](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) **Where to start** - `web/src/app/components/EventPopover.tsx` and `ModalEvent.tsx`: add the button next to "Add". The event id is `eventDetails.id`. - `web/src/app/events/[id]/page.tsx`: new page. Read the id with `useParams()` from `next/navigation` in a client component. - `api/app/api/events.py`, `get_specific_events`: `GET /api/events/<int:event_id>` already exists and is `@public`. It returns every event column plus `org` (host name), `user_saved`, and `user_is_admin`. `ModalEvent.tsx` shows how to call it. - `GET /api/events/<id>/tags` returns the tags. **Done when** - [ ] "Copy link" copies `${window.location.origin}/events/<id>` with `navigator.clipboard.writeText` and shows a brief "Copied!" state - [ ] `/events/<id>` shows title, time, location, host, description, tags, and the Add/Remove button - [ ] An unknown id shows a friendly "Event not found" message (the API returns 404) - [ ] A signed-out visitor who signs in from a shared link lands back on that event - [ ] Works in light and dark mode **Notes** `web/src/app/layout.tsx` shows the sign-in page for every route when signed out, and `Welcome.tsx` hardcodes `signInUrl("/")`. Pass the current path instead. The link points at the event series, not a single occurrence.

jalenluorion added this to the Phase 1 milestone

2026-10-03 19:44:35 +00:00

jalenluorion added the

frontend

feature

good first issue

labels

2026-10-03 19:44:35 +00:00

jalenluorion added this to the CMUCal project

2026-10-03 19:45:09 +00:00