Merge pull request #219 from duyet/fix/timezone

fix: local fromNow format timezone-aware

Author: duyet

app/api/timezone/route.ts

@@ -0,0 +1,16 @@
+import { NextResponse } from 'next/server'
+
+import { fetchData } from '@/lib/clickhouse'
+
+export async function GET() {
+  try {
+    const resp = await fetchData<{ tz: string }[]>({
+      query: 'SELECT timezone() as tz',
+    })
+    return NextResponse.json({
+      tz: resp[0].tz,
+    })
+  } catch {
+    return NextResponse.json({}, { status: 500 })
+  }
+}

app/api/version/route.ts

@@ -5,7 +5,6 @@ import {
   ColumnFormat,
   ColumnFormatOptions,
 } from '@/components/data-table/column-defs'
-import dayjs from '@/lib/dayjs'
 import { formatReadableQuantity } from '@/lib/format-readable'
 
 import { ActionFormat } from './cells/action-format'
@@ -15,7 +14,9 @@ import { BadgeFormat } from './cells/badge-format'
 import { BooleanFormat } from './cells/boolean-format'
 import { CodeToggleFormat } from './cells/code-toggle-format'
 import { ColoredBadgeFormat } from './cells/colored-badge-format'
+import { DurationFormat } from './cells/duration-format'
 import { LinkFormat } from './cells/link-format'
+import { RelatedTimeFormat } from './cells/related-time-format'
 
 export const formatCell = <TData extends RowData, TValue>(
   table: Table<TData>,
@@ -52,14 +53,10 @@ export const formatCell = <TData extends RowData, TValue>(
       return <CodeToggleFormat row={row} value={value} />
 
     case ColumnFormat.RelatedTime:
-      let fromNow = dayjs(value as string).fromNow()
-      return <span title={value as string}>{fromNow}</span>
+      return <RelatedTimeFormat value={value} />
 
     case ColumnFormat.Duration:
-      let humanized = dayjs
-        .duration({ seconds: parseFloat(value as string) })
-        .humanize()
-      return <span title={value as string}>{humanized}</span>
+      return <DurationFormat value={value} />
 
     case ColumnFormat.Boolean:
       return <BooleanFormat value={value} />

components/data-table/cell.tsx

@@ -0,0 +1,13 @@
+import dayjs from '@/lib/dayjs'
+
+interface DurationFormatProps {
+  value: any
+}
+
+export async function DurationFormat({ value }: DurationFormatProps) {
+  let humanized = dayjs
+    .duration({ seconds: parseFloat(value as string) })
+    .humanize()
+
+  return <span title={value as string}>{humanized}</span>
+}

components/data-table/cells/duration-format.tsx

@@ -0,0 +1,28 @@
+import dayjs from '@/lib/dayjs'
+
+interface RelatedTimeFormatProps {
+  value: any
+}
+
+let tz: string = ""
+
+export async function RelatedTimeFormat({ value }: RelatedTimeFormatProps) {
+  let fromNow
+  try {
+    if (!tz) {
+      // Getting timezone from server
+      tz = await fetch('/api/timezone')
+        .then((res) => res.json())
+        .then((data) => data.tz)
+      console.log('Server timezone:', tz)
+    }
+
+    let parsed = dayjs.tz(value as string, tz)
+    fromNow = parsed.fromNow()
+  } catch (e) {
+    console.error('Error parsing time:', e)
+    fromNow = dayjs(value as string).fromNow()
+  }
+
+  return <span title={value as string}>{fromNow}</span>
+}

components/data-table/cells/related-time-format.tsx

@@ -1,10 +1,14 @@
 import dayjs from 'dayjs'
 import duration from 'dayjs/plugin/duration'
 import relativeTime from 'dayjs/plugin/relativeTime'
+import timezone from 'dayjs/plugin/timezone'
+import utc from 'dayjs/plugin/utc'
 
 import 'dayjs/locale/en'
 
 dayjs.extend(duration)
+dayjs.extend(utc)
+dayjs.extend(timezone)
 dayjs.extend(relativeTime)
 
 export default dayjs