From 92445cf52e953a430e4a8efebcd2506dcde692f9 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Mon, 21 Aug 2023 14:24:54 -0300
Subject: [PATCH] fix(site): fix locale dates in timeline component (#9223)

---
 site/src/components/Timeline/TimelineDateRow.tsx  |  7 +------
 .../Timeline/{Timeline.test.tsx => utils.test.ts} |  2 +-
 site/src/components/Timeline/utils.ts             | 15 +++++++++++++++
 3 files changed, 17 insertions(+), 7 deletions(-)
 rename site/src/components/Timeline/{Timeline.test.tsx => utils.test.ts} (86%)
 create mode 100644 site/src/components/Timeline/utils.ts

diff --git a/site/src/components/Timeline/TimelineDateRow.tsx b/site/src/components/Timeline/TimelineDateRow.tsx
index 3a0fd040ef..45dbe09337 100644
--- 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/Timeline.test.tsx b/site/src/components/Timeline/utils.test.ts
similarity index 86%
rename from site/src/components/Timeline/Timeline.test.tsx
rename to site/src/components/Timeline/utils.test.ts
index d984f33ec1..407157ca02 100644
--- a/site/src/components/Timeline/Timeline.test.tsx
+++ 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
new file mode 100644
index 0000000000..26712caa42
--- /dev/null
+++ 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()
+}