bluewave-labs / bluewave-labs/Checkmate

i18n: Add localization to the duration helpers

Closed
#3,891 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
10.8k
Forks
1.2k
Avg merge
1d 4h
Merged PRs (30d)
68

Description

# Add localization to the duration helpers

## The issue

Currently the `formatDuration` function has an argument that expands single-letter durations (i.e. `5s`) into full-word durations (i.e. `5 seconds`). The underlying library used explicitly doesn't support localization ( https://github.com/sindresorhus/pretty-ms/pull/35 ) and has the values for these strings hardcoded, for the benefit of being a really tiny library that just does what it says on the box.

That argument is really only used on the MonitorStatus detail page, where both the label as well as the duration are hardcoded to english:
```tsx
{!isSmall && (
<>


Checking every {formatDuration(monitor?.interval, true)}


)}
```

Having durations be internationalized wherever they are formatted in the longer format would also be beneficial to the UI in other places, where these were manually translated for now, but also my PR for a dynamic interval UI here: https://github.com/bluewave-labs/Checkmate/pull/3881

## Possible fix

I'd be happy to implement a fix, but want to align on the solution first.

Imho the best option is just moving from pretty-ms to a more complete datetime library like dayjs for example (still really tiny at 2kb minified) that has support for loading additional locales out of the box. Changes would be limited to the packages + `client/src/Utils/TimeUtils.ts`

see the following for reference:
https://day.js.org/
https://day.js.org/docs/en/durations/humanize
https://day.js.org/docs/en/i18n/instance-locale

Contributor guide

Open the contributing guide

Research direction

Start with client/src/Utils/TimeUtils.ts and the MonitorStatus detail page, then review the package changes proposed in the issue. Compare the current pretty-ms usage with the referenced dayjs duration and locale documentation. Done means longer-form durations and the associated label are localized consistently wherever they are formatted.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
internationalization, localization
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.