From 3a35bb43b336c9671d44e2af2662192b37508b59 Mon Sep 17 00:00:00 2001
From: ktmouk <ktmouk@gmail.com>
Date: Wed, 19 Jun 2024 21:27:51 +0900
Subject: [PATCH] fix: show relative time correctly (#3)

---
 .../_components/TimeEntryTreeItem.tsx         | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/app/[locale]/_components/TimeEntryTreeItem.tsx b/apps/web/src/app/[locale]/_components/TimeEntryTreeItem.tsx
index 855da73..e0ac444 100644
--- a/apps/web/src/app/[locale]/_components/TimeEntryTreeItem.tsx
+++ b/apps/web/src/app/[locale]/_components/TimeEntryTreeItem.tsx
@@ -1,5 +1,5 @@
-import { differenceInDays, formatISO, isSameYear } from "date-fns";
-import { useFormatter } from "next-intl";
+import { differenceInDays, formatISO, isSameYear, startOfDay } from "date-fns";
+import { useFormatter, useLocale } from "next-intl";
 import { useMemo } from "react";
 import { PiTimer } from "react-icons/pi";
 import { Duration } from "../_components/Duration";
@@ -13,6 +13,10 @@ type Props = {
   now: Date;
 };
 
+const capitalize = (text: string) => {
+  return `${text.charAt(0).toUpperCase()}${text.slice(1)}`;
+};
+
 export const TimeEntryTreeItem = ({
   depth,
   color,
@@ -21,15 +25,23 @@ export const TimeEntryTreeItem = ({
   now,
 }: Props) => {
   const formatDate = useFormatter();
+  const locale = useLocale();
 
   const readableDate = useMemo(() => {
     return differenceInDays(now, startedAt) < 4
-      ? formatDate.relativeTime(startedAt, { now, unit: "day" })
+      ? capitalize(
+          new Intl.RelativeTimeFormat(locale, {
+            numeric: "auto",
+          }).format(
+            differenceInDays(startOfDay(now), startOfDay(startedAt)),
+            "day",
+          ),
+        )
       : formatDate.dateTime(
           startedAt,
           isSameYear(startedAt, now) ? "short" : "long",
         );
-  }, [formatDate, startedAt, now]);
+  }, [formatDate, startedAt, locale, now]);
 
   const handleClick = () => {
     /** TODO */