feat: add related events section on event page #286
Conversation
|
@antoinekm is attempting to deploy a commit to the Team Bearstudio Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Hello @antoinekm thank you for opening this PR 🙌 |
antoinekm
force-pushed
the
feat/events-from-same-city
branch
from
f7d7983 to
31451df
Compare
WalkthroughAdds a new RelatedEvents Astro component and integrates it into the event detail page; getStaticPaths now computes up to three related events from the same city (future/near-future, sorted) and passes them to the page, which renders RelatedEvents when data is present. Changes
Sequence DiagramsequenceDiagram
participant Build as Build Time
participant GetStatic as getStaticPaths()
participant Filter as RelatedEvent Filter
participant Page as Event Page
participant Component as RelatedEvents
Build->>GetStatic: Generate static paths for events
GetStatic->>Filter: For each event, find other events in same city
Filter->>Filter: Exclude current event, filter by date window, sort by date, take up to 3
Filter->>GetStatic: Return relatedEvents
GetStatic->>Page: Provide event + relatedEvents props
Page->>Component: Render RelatedEvents with props
Component->>Component: Map relatedEvents -> TiltedCard + EventCard
Component->>Page: Display related events grid
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Poem
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/pages/events/[id]/index.astro (1)
50-59: Consider reversing the sort order to prioritize upcoming events.The current sorting is ascending (earliest date first), which means past events within the 30-day window will appear before future events. For better user experience, consider showing upcoming events first.
Apply this diff to sort future events first:
.sort((a, b) => dayjs(a.data.date).diff(dayjs(b.data.date))) + .sort((a, b) => { + const aDate = dayjs(a.data.date); + const bDate = dayjs(b.data.date); + const now = dayjs(); + // Future events first, sorted ascending; then past events, sorted descending + const aIsFuture = aDate.isAfter(now); + const bIsFuture = bDate.isAfter(now); + if (aIsFuture && !bIsFuture) return -1; + if (!aIsFuture && bIsFuture) return 1; + return aIsFuture ? aDate.diff(bDate) : bDate.diff(aDate); + })Alternatively, for a simpler approach (all events sorted by proximity to today):
- .sort((a, b) => dayjs(a.data.date).diff(dayjs(b.data.date))) + .sort((a, b) => Math.abs(dayjs(a.data.date).diff(dayjs())) - Math.abs(dayjs(b.data.date).diff(dayjs())))
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/RelatedEvents/index.astro(1 hunks)src/pages/events/[id]/index.astro(2 hunks)
🔇 Additional comments (2)
src/pages/events/[id]/index.astro (1)
43-43: LGTM! Clean integration of the RelatedEvents component.The import, props destructuring, and component rendering are properly implemented. The placement at the end of the page before the "Join the Community" section is appropriate.
Also applies to: 72-72, 663-664
src/components/RelatedEvents/index.astro (1)
1-12: LGTM! Component setup is clean and well-typed.The imports and Props interface are properly defined, with appropriate TypeScript types for both currentEvent and relatedEvents.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/components/RelatedEvents/index.astro (1)
14-29: Consider defensive optional chaining on line 18.While line 15 guards against undefined city names, line 18 accesses
currentEvent.data._computed.city.data.namewithout optional chaining. For defensive coding and future maintainability, consider using optional chaining here as well.Apply this diff for added safety:
<h2 class="scroll-mt-32 font-heading text-2xl font-medium uppercase tracking-widest"> - More Events in {currentEvent.data._computed.city.data.name} + More Events in {currentEvent.data._computed.city?.data.name} </h2>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/RelatedEvents/index.astro(1 hunks)src/pages/events/[id]/index.astro(2 hunks)
🔇 Additional comments (3)
src/components/RelatedEvents/index.astro (1)
1-12: LGTM! Clean component setup.The imports, type definitions, and props destructuring follow Astro best practices. The Props interface is properly typed with EventComputed for type safety.
src/pages/events/[id]/index.astro (2)
664-665: LGTM! Clean integration of RelatedEvents component.The RelatedEvents component is properly integrated with the correct props. The placement at the end of the event page, before the "Join the Community" section, provides good user experience by suggesting related events after users have reviewed the current event details.
50-60: The review comment is incorrect—date field is guaranteed to be defined.The events collection explicitly excludes sub-pages via its pattern
["**/*.mdx", "!**/pages/*.mdx"]fromsrc/content.config.ts. All main event files insrc/content/events/*/index.mdxhave the requireddatefield (defined asz.date()in the schema, not optional). The sub-pages found earlier without dates are in a separateeventsSubPagescollection and are never included inallEvents.The code at lines 50–57 correctly filters related events without needing additional null checks for the date field.
Likely an incorrect or invalid review comment.
|
Hey ! It should be good now @houssembaltii ! |
|
Hi, sorry to ask you this again, but can you rebase it a last time, I will then merge it just after. Thanks a lot 🫶🏻 |
|
Done in #495 |
3 participants
Changes
RelatedEventscomponent that displays events in the same cityClose: #207
Demo:
/events/2025-tunisia-tunis-2Summary by CodeRabbit