Skip to content
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

formatter.relativeTime outputs wrong relative time #757

Closed
alex289 opened this issue Jan 4, 2024 · 2 comments · Fixed by #765
Closed

formatter.relativeTime outputs wrong relative time #757

alex289 opened this issue Jan 4, 2024 · 2 comments · Fixed by #765
Labels
bug Something isn't working unconfirmed Needs triage.

Comments

@alex289
Copy link

alex289 commented Jan 4, 2024

Description

I just noticed on my blog the relative time is wrong.

In my case I have this date on my post: "2022-07-11"
The relativeTime output is: "Last year"

This is my i18n.ts:

import { type AbstractIntlMessages } from 'next-intl';
import { getRequestConfig } from 'next-intl/server';

export default getRequestConfig(async ({ locale }) => ({
  messages: (
    (await import(`./messages/${locale}.json`)) as {
      default: AbstractIntlMessages;
    }
  ).default,
  timeZone: 'Europe/Berlin',
  now: new Date(),
}));

My component looks like this

export default async function Blog({
  params,
}: {
  params: { slug: string; locale: string };
}) {
  unstable_setRequestLocale(params.locale);

  const now = await getNow({ locale: params.locale });
  const formatter = await getFormatter({ locale: params.locale });

return (
...
<p className="ml-2 text-sm text-gray-700 dark:text-[#c2c2c2]">
            {formatter.dateTime(new Date(post.publishedAt), {
              year: 'numeric',
              month: 'short',
              day: 'numeric',
            })}{' '}
            ({formatter.relativeTime(new Date(post.publishedAt), now)})
          </p>
...)}

You can preview the page (here)[https://alexanderkonietzko.vercel.app/en/blog/vercel-deployment]

Did I make a mistake here?

Mandatory reproduction URL (CodeSandbox or GitHub repository)

https://github.com/alex289/Portfolio

Reproduction description

Steps to reproduce:

  1. Open reproduction
  2. Go to the post page
  3. See the wrong relative time

Expected behaviour

Since "2022-07-11" is more than one year ago I expected something like "2 years ago"

@alex289 alex289 added bug Something isn't working unconfirmed Needs triage. labels Jan 4, 2024
@alex289
Copy link
Author

alex289 commented Jan 4, 2024

On posts which are older than "2022-07-11" the correct relative time is shown

@amannn
Copy link
Owner

amannn commented Jan 9, 2024

Thanks for the hint! This happened due to rounding because the current date and 2022-07-11 are just a bit less than 1.5 years apart (rounds to 1 year). However, the output "last year" is not correct, since it's the year before.

I've addressed this in #765 and the output will now be "1 year ago" (until the 1.5 years threshold is reached, then it will flip to "2 years ago").

amannn added a commit that referenced this issue Jan 9, 2024
…tiveTime` (#765)

Fixes #757

Previously, [`numeric:
'auto'`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat#using_the_auto_option)
was used for formatting relative times. This occasionally produces
incorrect output when values are rounded based on the unit, therefore
it's changed to `always` now. The only exception are cases <1s which
render as "now" via `numeric: 'auto'` (instead of "0 seconds ago").

**Previous behavior:**

```tsx
// Output: "Last year"
format.relativeTime(
  new Date("2022-07-11T00:00:00.000Z"),
  new Date("2024-01-17T00:00:00.000Z")
);
```

**New behavior:**

```tsx
// Output: "1 year ago"
format.relativeTime(
  new Date("2022-07-11T00:00:00.000Z"),
  new Date("2024-01-17T00:00:00.000Z")
);
```

Note that this is considered as "1 year" due to rounding. Once a
difference of 1.5 years is reached, then "2 years ago" will be
displayed.
This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working unconfirmed Needs triage.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants