Refactor/date fns

[scheidtdav]

Type of Change

• Dependency upgrade
• Bug fix (non-breaking change)
• Breaking change
  • e.g. a fixed bug or new feature that may break something else
• New feature
• Code quality improvements
  • e.g. refactoring, documentation, tests, tooling, ...

Implementation

Checklist

• I gave this pull request a meaningful title
• My pull request is targeting the dev branch
• I have added documentation to my code
• I have deleted code that I have commented out

Additional Information

• This PR closes Replace date-fns dependency with browser-native implementation #1061 date format mismatch on my devices page #1062

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 017470c5-5155-4075-b734-afa6968cd6d1

📥 Commits

Reviewing files that changed from the base of the PR and between 5cf6600 and b786a30.

📒 Files selected for processing (4)

• app/components/map/layers/mobile/mobile-overview-layer.tsx
• app/components/mydevices/dt/columns.tsx
• app/lib/date.ts
• app/routes/profile.$username.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

📝 Walkthrough

Summary by CodeRabbit

• Improvements
  • Dates and times across device, user, profile, log, transfer, map, and range-picker views now follow the active language setting.
  • Sensor timestamps display localized relative time, including accurate handling of future dates.
  • Map popups and date pickers provide consistent localized date and time formatting.
  • Date displays now load consistently without briefly showing mismatched locale formatting.
  • Elapsed times between one month and one year are now expressed in months for clearer relative-time descriptions.

Walkthrough

The PR replaces selected date-fns formatting with Intl.DateTimeFormat, Intl.RelativeTimeFormat, and the active i18n language across shared components and routes. Route timestamps now render only after hydration.

Changes

Date localization

Layer / File(s)	Summary
Relative-time formatter app/lib/date.ts	The shared formatter uses localized seconds, minutes, hours, days, weeks, months, and years.
Component date formatting app/components/device-detail/device-detail-box.tsx, app/components/map/layers/mobile/mobile-overview-layer.tsx, app/components/ui/range-picker.tsx	Components use the active i18n language for sensor ages, map popup times, and date-range display.
Route date formatting app/components/mydevices/dt/columns.tsx, app/routes/admin.devices._index.tsx, app/routes/admin.users._index.tsx, app/routes/device.$deviceId.edit.logs.tsx, app/routes/device.$deviceId.edit.transfer.tsx, app/routes/profile.$username.tsx	Routes defer timestamp rendering until hydration and format dates with the active i18n language.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Merge Risk: 🟡 Moderate · up to b786a

The date-formatting refactor can show incorrect relative month/year labels, produce server/client date mismatches in some time zones, and render an invalid date when a profile has no date value. These are user-visible correctness issues, so the PR should not merge until they are corrected or explicitly accepted.

🚥 Pre-merge checks | ✅ 2 | ❌ 3

❌ Failed checks (3 warnings)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	The PR replaces date-fns usage in several files, but the provided changes do not show removal of the date-fns dependency or replacement of all date-fns functionality. The relative-time implementation …	Remove date-fns from the dependency manifest and replace all remaining date-fns usage, including relative-time behavior, with browser-native APIs. Add or update coverage for the replaced behavior if required by the repository standards.
Out of Scope Changes check	⚠️ Warning	Most changes support locale-aware browser-native date formatting, but changing the range picker default end date to February 9 of the current year is not covered by issue #1061 and appears unrelated.	Remove the default end-date change, or link it to a relevant requirement and explain why it is necessary for this pull request.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 4 functions across 5 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title identifies the date-fns refactor, which is the primary change.
Description check	✅ Passed	The description is sparse, but it references the relevant linked issues, including issue #1061, so it is related to the changeset.

Full details: Linked Issues check

Explanation

The PR replaces date-fns usage in several files, but the provided changes do not show removal of the date-fns dependency or replacement of all date-fns functionality. The relative-time implementation also does not establish use of a browser-native API. Issue #1061 is not fully satisfied.

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch refactor/date-fns

---

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	65.99%	2242 / 3397
🔵	Statements	64.53%	2316 / 3589
🔵	Functions	63.21%	433 / 685
🔵	Branches	50.84%	1081 / 2126

File Coverage

No changed files found.

Generated in workflow #2917 for commit b786a30 by the Vitest Coverage Report Action

[coderabbitai]

Actionable comments posted: 3

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: b4d4e3bc-162f-46da-8926-4951b398f3c8

📥 Commits

Reviewing files that changed from the base of the PR and between 3f79a72 and 2e026c8.

📒 Files selected for processing (11)

• app/components/device-detail/device-detail-box.tsx
• app/components/device-detail/graph.tsx
• app/components/map/layers/mobile/mobile-overview-layer.tsx
• app/components/mydevices/dt/columns.tsx
• app/components/ui/range-picker.tsx
• app/lib/date.ts
• app/routes/admin.devices._index.tsx
• app/routes/admin.users._index.tsx
• app/routes/device.$deviceId.edit.logs.tsx
• app/routes/device.$deviceId.edit.transfer.tsx
• app/routes/profile.$username.tsx

💤 Files with no reviewable changes (1)

• app/components/device-detail/graph.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

[scheidtdav]

Gotta do the code rabbit reviews still..

[coderabbitai]

Actionable comments posted: 1

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: ab467778-630c-4a13-a85c-18f46e3da057

📥 Commits

Reviewing files that changed from the base of the PR and between 2e026c8 and 53d1ae1.

📒 Files selected for processing (8)

• app/components/mydevices/dt/columns.tsx
• app/components/ui/range-picker.tsx
• app/lib/date.ts
• app/routes/admin.devices._index.tsx
• app/routes/admin.users._index.tsx
• app/routes/device.$deviceId.edit.logs.tsx
• app/routes/device.$deviceId.edit.transfer.tsx
• app/routes/profile.$username.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

app/routes/profile.$username.tsx (1)

163-166: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Guard the creation date before formatting it.

When the loader returns profile: null, this expression constructs new Date('') after hydration. The formatter then receives an invalid date instead of omitting the creation date. Check profile?.user?.createdAt before calling toLocaleDateString.

Proposed fix

-								{hydrated &&
-									new Date(profile?.user?.createdAt || '').toLocaleDateString(
-										i18n.language,
-									)}
+								{hydrated && profile?.user?.createdAt
+									? new Date(profile.user.createdAt).toLocaleDateString(
+											i18n.language,
+										)
+									: null}

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 6cda2e5c-6c89-412c-a343-7a5efeae6ff1

📥 Commits

Reviewing files that changed from the base of the PR and between 53d1ae1 and 5cf6600.

📒 Files selected for processing (1)

• app/routes/profile.$username.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 8 remain after this review.