Show session event times in local timezone#89
Conversation
📝 WalkthroughWalkthroughThis PR introduces timezone-aware session time rendering across the Portal frontend. A new ChangesSession event timezone localization
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
src/app/(frontend)/_components/PortalShell.tsxOops! Something went wrong! :( ESLint: 9.39.3 TypeError: Converting circular structure to JSON ... [truncated 445 characters] ... c/dist/eslintrc.cjs:3261:25) src/app/(frontend)/_components/SessionDateTime.tsxOops! Something went wrong! :( ESLint: 9.39.3 TypeError: Converting circular structure to JSON ... [truncated 445 characters] ... c/dist/eslintrc.cjs:3261:25) src/app/(frontend)/events/[id]/page.tsxOops! Something went wrong! :( ESLint: 9.39.3 TypeError: Converting circular structure to JSON ... [truncated 445 characters] ... c/dist/eslintrc.cjs:3261:25)
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.
🧹 Nitpick comments (1)
src/app/(frontend)/_components/SessionDateTime.tsx (1)
110-113: 💤 Low valueConsider adding spaces around the dash in time ranges for readability.
The current format produces strings like "2:30 PM-3:30 PM" and "January 15, 2024, 2:30 PM-January 16, 2024, 3:30 PM". Adding spaces around the dash would improve readability: "2:30 PM - 3:30 PM".
♻️ Proposed spacing improvement
const range = startDate === endDate - ? `${startDate}, ${startTime}-${endTime}` - : `${startDate}, ${startTime}-${endDate}, ${endTime}` + ? `${startDate}, ${startTime} - ${endTime}` + : `${startDate}, ${startTime} - ${endDate}, ${endTime}` - return `${range} ${timeZoneLabel}` + return `${range} ${timeZoneLabel}`🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/app/`(frontend)/_components/SessionDateTime.tsx around lines 110 - 113, The time-range string construction for the range constant in the SessionDateTime component lacks spaces around the dash; update the template literals that build range (the ternary using startDate, startTime, endDate, endTime) to use " - " instead of "-" so the outputs become "2:30 PM - 3:30 PM" and "January 15, 2024, 2:30 PM - January 16, 2024, 3:30 PM".
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@src/app/`(frontend)/_components/SessionDateTime.tsx:
- Around line 110-113: The time-range string construction for the range constant
in the SessionDateTime component lacks spaces around the dash; update the
template literals that build range (the ternary using startDate, startTime,
endDate, endTime) to use " - " instead of "-" so the outputs become "2:30 PM -
3:30 PM" and "January 15, 2024, 2:30 PM - January 16, 2024, 3:30 PM".
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 75d96c0d-ebae-476e-9afc-ad34f66a01eb
📒 Files selected for processing (6)
src/app/(frontend)/_components/PortalShell.tsxsrc/app/(frontend)/_components/SessionDateTime.tsxsrc/app/(frontend)/events/[id]/page.tsxsrc/app/(frontend)/events/page.tsxsrc/app/(frontend)/projects/[slug]/page.tsxsrc/app/(frontend)/threads/[slug]/page.tsx
There was a problem hiding this comment.
Pull request overview
This PR standardizes how session/event times are displayed across the frontend by introducing a shared date/time rendering component that formats in the viewer’s browser-local timezone (with an explicit timezone label) and supports start–end ranges when endsAt is present. It also updates the /events listing to sort upcoming sessions nearest-first.
Changes:
- Added a shared
SessionDateTime(andSessionDateBadge) component to render local-timezone session/event times with timezone labels and optional time ranges. - Replaced per-page
Intl.DateTimeFormattime rendering with the shared component across events list/detail, portal home/dashboard cards, project cards, and thread cards. - Updated
/eventsupcoming sorting to chronological ascending (nearest-first).
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/app/(frontend)/threads/[slug]/page.tsx | Uses the shared session time component in thread event cards. |
| src/app/(frontend)/projects/[slug]/page.tsx | Uses the shared session time component for project event listings. |
| src/app/(frontend)/events/page.tsx | Uses shared badge/time components and changes upcoming sort order to nearest-first. |
| src/app/(frontend)/events/[id]/page.tsx | Uses the shared session time component on session detail. |
| src/app/(frontend)/_components/SessionDateTime.tsx | Introduces the client-side local-timezone formatting implementation. |
| src/app/(frontend)/_components/PortalShell.tsx | Uses the shared session time component on public home/dashboard session cards. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @@ -0,0 +1,168 @@ | |||
| 'use client' | |||
|
|
|||
| import { useEffect, useState } from 'react' | |||
| const [timeZone, setTimeZone] = useState(fallbackTimeZone) | ||
| const label = formatSessionDateTime({ dateStyle, endsAt, startsAt, timeZone }) | ||
|
|
||
| useEffect(() => { | ||
| const localTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone | ||
|
|
||
| if (localTimeZone) setTimeZone(localTimeZone) | ||
| }, []) |
| const [timeZone, setTimeZone] = useState(fallbackTimeZone) | ||
| const badge = formatSessionDateBadge(startsAt, timeZone) | ||
|
|
||
| useEffect(() => { | ||
| const localTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone | ||
|
|
||
| if (localTimeZone) setTimeZone(localTimeZone) | ||
| }, []) |
Summary
endsAtis available/eventsnearest-firstVerification
corepack pnpm --ignore-workspace installcorepack pnpm deps:nativecorepack pnpm exec tsc --noEmit --incremental falsecorepack pnpm exec prettier --check ...corepack pnpm test:e2eattempted, blocked because Docker is not installed in the runtime:spawnSync docker ENOENTCloses #88.
Summary by CodeRabbit