fix(site): fix locale dates in timeline component (#9223)

BrunoQuaresma · web-flow · commit 92445cf52e95 · 2023-08-21T14:24:54.000-03:00
diff --git a/site/src/components/Timeline/TimelineDateRow.tsx b/site/src/components/Timeline/TimelineDateRow.tsx
@@ -1,18 +1,13 @@
 import { makeStyles } from "@mui/styles"
 import TableCell from "@mui/material/TableCell"
 import TableRow from "@mui/material/TableRow"
-import formatRelative from "date-fns/formatRelative"
 import { FC } from "react"
+import { createDisplayDate } from "./utils"
 
 export interface TimelineDateRow {
   date: Date
 }
 
-// We only want the message related to the date since the time is displayed
-// inside of the build row
-export const createDisplayDate = (date: Date, base = new Date()): string =>
-  formatRelative(date, base).split(" at ")[0]
-
 export const TimelineDateRow: FC<TimelineDateRow> = ({ date }) => {
   const styles = useStyles()
 
diff --git a/site/src/components/Timeline/utils.test.ts b/site/src/components/Timeline/utils.test.ts
@@ -1,4 +1,4 @@
-import { createDisplayDate } from "./TimelineDateRow"
+import { createDisplayDate } from "./utils"
 
 describe("createDisplayDate", () => {
   it("returns correctly for Saturdays", () => {
diff --git a/site/src/components/Timeline/utils.ts b/site/src/components/Timeline/utils.ts
@@ -0,0 +1,15 @@
+/* eslint-disable eslint-comments/disable-enable-pair -- Solve below */
+/* eslint-disable import/no-duplicates -- https://github.com/date-fns/date-fns/issues/1677 */
+import formatRelative from "date-fns/formatRelative"
+import subDays from "date-fns/subDays"
+
+export const createDisplayDate = (
+  date: Date,
+  base: Date = new Date(),
+): string => {
+  const lastWeek = subDays(base, 7)
+  if (date >= lastWeek) {
+    return formatRelative(date, base).split(" at ")[0]
+  }
+  return date.toLocaleDateString()
+}

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { createDisplayDate } from "./TimelineDateRow"`
	`1`	`+import { createDisplayDate } from "./utils"`
`2`	`2`
`3`	`3`	`describe("createDisplayDate", () => {`
`4`	`4`	`it("returns correctly for Saturdays", () => {`