-
-
Notifications
You must be signed in to change notification settings - Fork 13
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: add support for relative time formatting #272
base: main
Are you sure you want to change the base?
Conversation
WalkthroughThe update adds support for relative time formatting to the Nuxt Time component using the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant NuxtTimeComponent
participant IntlRelativeTimeFormat
participant IntlDateTimeFormat
User->>NuxtTimeComponent: Load component with date and relative=true
NuxtTimeComponent->>IntlRelativeTimeFormat: Format date relative to now
IntlRelativeTimeFormat-->>NuxtTimeComponent: Return relative time string
NuxtTimeComponent-->>User: Display relative time (e.g., "5 minutes ago")
User->>NuxtTimeComponent: Load component with date and relative=false
NuxtTimeComponent->>IntlDateTimeFormat: Format date as absolute
IntlDateTimeFormat-->>NuxtTimeComponent: Return formatted date string
NuxtTimeComponent-->>User: Display absolute time (e.g., "2024-07-18 12:00")
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 2
Outside diff range, codebase verification and nitpick comments (1)
test/unit.spec.ts (1)
26-38
: LGTM! Consider adding edge cases and different locales.The test case covers the relative time formatting feature. Consider adding edge cases (e.g., seconds, hours, days) and different locales to ensure comprehensive test coverage.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (5)
- README.md (1 hunks)
- src/runtime/components/NuxtTime.vue (2 hunks)
- src/script.mjs (1 hunks)
- test/e2e.spec.ts (1 hunks)
- test/unit.spec.ts (2 hunks)
Additional context used
GitHub Check: test
test/e2e.spec.ts
[failure] 77-77: test/e2e.spec.ts > nuxt-time > displays relative time correctly
Error: Snapshotnuxt-time > displays relative time correctly 1
mismatched
- Expected
- Received
- "5 minutes ago"
- ""
❯ test/e2e.spec.ts:77:33
Additional comments not posted (4)
test/e2e.spec.ts (1)
59-77
: Test failure due to snapshot mismatch.The test case fails due to a mismatch in the snapshot. Verify the implementation and test setup to ensure the relative time formatting works as expected.
Tools
GitHub Check: test
[failure] 77-77: test/e2e.spec.ts > nuxt-time > displays relative time correctly
Error: Snapshotnuxt-time > displays relative time correctly 1
mismatched
- Expected
- Received
- "5 minutes ago"
- ""
❯ test/e2e.spec.ts:77:33
README.md (1)
51-62
: LGTM!The documentation provides a clear explanation and example for the relative time formatting feature.
src/runtime/components/NuxtTime.vue (2)
29-29
: Addition ofrelative
prop looks good.The
relative
prop is correctly added to theprops
object.
48-51
: Changes toformatter
computed property look good.The
formatter
computed property correctly usesIntl.RelativeTimeFormat
when therelative
prop is true.
const formattedDate = computed(() => { | ||
if (props.relative) { | ||
const now = new Date() | ||
const diffInSeconds = (date.value.getTime() - now.getTime()) / 1000 | ||
const diffInMinutes = diffInSeconds / 60 | ||
const diffInHours = diffInMinutes / 60 | ||
const diffInDays = diffInHours / 24 | ||
if (Math.abs(diffInSeconds) < 60) { | ||
return formatter.value.format(Math.round(diffInSeconds), 'second') | ||
} | ||
else if (Math.abs(diffInMinutes) < 60) { | ||
return formatter.value.format(Math.round(diffInMinutes), 'minute') | ||
} | ||
else if (Math.abs(diffInHours) < 24) { | ||
return formatter.value.format(Math.round(diffInHours), 'hour') | ||
} | ||
else { | ||
return formatter.value.format(Math.round(diffInDays), 'day') | ||
} | ||
} | ||
return formatter.value.format(date.value) | ||
}) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Changes to formattedDate
computed property look good.
The formattedDate
computed property correctly handles relative time formatting based on the relative
prop.
Optimization suggestion:
The calculation of the time difference can be simplified by using a single switch
statement instead of multiple if-else
blocks.
- if (props.relative) {
- const now = new Date()
- const diffInSeconds = (date.value.getTime() - now.getTime()) / 1000
- const diffInMinutes = diffInSeconds / 60
- const diffInHours = diffInMinutes / 60
- const diffInDays = diffInHours / 24
- if (Math.abs(diffInSeconds) < 60) {
- return formatter.value.format(Math.round(diffInSeconds), 'second')
- }
- else if (Math.abs(diffInMinutes) < 60) {
- return formatter.value.format(Math.round(diffInMinutes), 'minute')
- }
- else if (Math.abs(diffInHours) < 24) {
- return formatter.value.format(Math.round(diffInHours), 'hour')
- }
- else {
- return formatter.value.format(Math.round(diffInDays), 'day')
- }
- }
+ if (props.relative) {
+ const now = new Date()
+ const diffInSeconds = (date.value.getTime() - now.getTime()) / 1000
+ const absDiffInSeconds = Math.abs(diffInSeconds)
+ switch (true) {
+ case absDiffInSeconds < 60:
+ return formatter.value.format(Math.round(diffInSeconds), 'second')
+ case absDiffInSeconds < 3600:
+ return formatter.value.format(Math.round(diffInSeconds / 60), 'minute')
+ case absDiffInSeconds < 86400:
+ return formatter.value.format(Math.round(diffInSeconds / 3600), 'hour')
+ default:
+ return formatter.value.format(Math.round(diffInSeconds / 86400), 'day')
+ }
+ }
Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
const formattedDate = computed(() => { | |
if (props.relative) { | |
const now = new Date() | |
const diffInSeconds = (date.value.getTime() - now.getTime()) / 1000 | |
const diffInMinutes = diffInSeconds / 60 | |
const diffInHours = diffInMinutes / 60 | |
const diffInDays = diffInHours / 24 | |
if (Math.abs(diffInSeconds) < 60) { | |
return formatter.value.format(Math.round(diffInSeconds), 'second') | |
} | |
else if (Math.abs(diffInMinutes) < 60) { | |
return formatter.value.format(Math.round(diffInMinutes), 'minute') | |
} | |
else if (Math.abs(diffInHours) < 24) { | |
return formatter.value.format(Math.round(diffInHours), 'hour') | |
} | |
else { | |
return formatter.value.format(Math.round(diffInDays), 'day') | |
} | |
} | |
return formatter.value.format(date.value) | |
}) | |
const formattedDate = computed(() => { | |
if (props.relative) { | |
const now = new Date() | |
const diffInSeconds = (date.value.getTime() - now.getTime()) / 1000 | |
const absDiffInSeconds = Math.abs(diffInSeconds) | |
switch (true) { | |
case absDiffInSeconds < 60: | |
return formatter.value.format(Math.round(diffInSeconds), 'second') | |
case absDiffInSeconds < 3600: | |
return formatter.value.format(Math.round(diffInSeconds / 60), 'minute') | |
case absDiffInSeconds < 86400: | |
return formatter.value.format(Math.round(diffInSeconds / 3600), 'hour') | |
default: | |
return formatter.value.format(Math.round(diffInSeconds / 86400), 'day') | |
} | |
} | |
return formatter.value.format(date.value) | |
}) |
if (options.relative) { | ||
const now = new Date() | ||
const diffInSeconds = (date.getTime() - now.getTime()) / 1000 | ||
const diffInMinutes = diffInSeconds / 60 | ||
const diffInHours = diffInMinutes / 60 | ||
const diffInDays = diffInHours / 24 | ||
const formatter = new Intl.RelativeTimeFormat(options.locale, options) | ||
if (Math.abs(diffInSeconds) < 60) { | ||
el.textContent = formatter.format(Math.round(diffInSeconds), 'second') | ||
} | ||
else if (Math.abs(diffInMinutes) < 60) { | ||
el.textContent = formatter.format(Math.round(diffInMinutes), 'minute') | ||
} | ||
else if (Math.abs(diffInHours) < 24) { | ||
el.textContent = formatter.format(Math.round(diffInHours), 'hour') | ||
} | ||
else { | ||
el.textContent = formatter.format(Math.round(diffInDays), 'day') | ||
} | ||
} | ||
else { | ||
const formatter = new Intl.DateTimeFormat(options.locale, options) | ||
el.textContent = formatter.format(date) | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM! Consider handling months and years and refactoring to reduce repetition.
The code covers the relative time formatting feature. Consider handling months and years to cover more use cases. Additionally, refactor the code to reduce repetition.
- const diffInSeconds = (date.getTime() - now.getTime()) / 1000
- const diffInMinutes = diffInSeconds / 60
- const diffInHours = diffInMinutes / 60
- const diffInDays = diffInHours / 24
+ const diffInSeconds = (now.getTime() - date.getTime()) / 1000
+ const units = [
+ { unit: 'second', value: diffInSeconds },
+ { unit: 'minute', value: diffInSeconds / 60 },
+ { unit: 'hour', value: diffInSeconds / 3600 },
+ { unit: 'day', value: diffInSeconds / 86400 },
+ { unit: 'month', value: diffInSeconds / 2592000 },
+ { unit: 'year', value: diffInSeconds / 31536000 },
+ ]
+ const formatter = new Intl.RelativeTimeFormat(options.locale, options)
+ const { unit, value } = units.find(({ value }) => Math.abs(value) < 60) || units[units.length - 1]
+ el.textContent = formatter.format(Math.round(value), unit)
Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
if (options.relative) { | |
const now = new Date() | |
const diffInSeconds = (date.getTime() - now.getTime()) / 1000 | |
const diffInMinutes = diffInSeconds / 60 | |
const diffInHours = diffInMinutes / 60 | |
const diffInDays = diffInHours / 24 | |
const formatter = new Intl.RelativeTimeFormat(options.locale, options) | |
if (Math.abs(diffInSeconds) < 60) { | |
el.textContent = formatter.format(Math.round(diffInSeconds), 'second') | |
} | |
else if (Math.abs(diffInMinutes) < 60) { | |
el.textContent = formatter.format(Math.round(diffInMinutes), 'minute') | |
} | |
else if (Math.abs(diffInHours) < 24) { | |
el.textContent = formatter.format(Math.round(diffInHours), 'hour') | |
} | |
else { | |
el.textContent = formatter.format(Math.round(diffInDays), 'day') | |
} | |
} | |
else { | |
const formatter = new Intl.DateTimeFormat(options.locale, options) | |
el.textContent = formatter.format(date) | |
} | |
if (options.relative) { | |
const now = new Date() | |
const diffInSeconds = (now.getTime() - date.getTime()) / 1000 | |
const units = [ | |
{ unit: 'second', value: diffInSeconds }, | |
{ unit: 'minute', value: diffInSeconds / 60 }, | |
{ unit: 'hour', value: diffInSeconds / 3600 }, | |
{ unit: 'day', value: diffInSeconds / 86400 }, | |
{ unit: 'month', value: diffInSeconds / 2592000 }, | |
{ unit: 'year', value: diffInSeconds / 31536000 }, | |
] | |
const formatter = new Intl.RelativeTimeFormat(options.locale, options) | |
const { unit, value } = units.find(({ value }) => Math.abs(value) < 60) || units[units.length - 1] | |
el.textContent = formatter.format(Math.round(value), unit) | |
} | |
else { | |
const formatter = new Intl.DateTimeFormat(options.locale, options) | |
el.textContent = formatter.format(date) | |
} |
Implement relative time formatting using
Intl.RelativeTimeFormat
.relative
prop to enable relative time formatting.formatter
computed property to useIntl.RelativeTimeFormat
whenrelative
is true.formattedDate
computed property to useformatter.value.format
for relative time.Intl.RelativeTimeFormat
for relative time formatting.relative
attribute to determine if relative time formatting should be used.Intl.RelativeTimeFormat
.relative
prop in<NuxtTime>
component.relative
prop.relative
prop.For more details, open the Copilot Workspace session.
Summary by CodeRabbit
New Features
Intl.RelativeTimeFormat
API. Set therelative
prop totrue
to display time relative to the current time, such as "5 minutes ago."Tests