Show yesterday instead of day of the week when the date is yesterday (#…

…1035)
kiesraad · Feb 17, 2025 · b6c76a5 · b6c76a5
1 parent 1e0f264
commit b6c76a5
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 10 deletions.
diff --git a/frontend/app/module/users/UserListPage.test.tsx b/frontend/app/module/users/UserListPage.test.tsx
@@ -19,7 +19,7 @@ describe("PollingStationListPage", () => {
     expect(table).toHaveTableContent([
       ["Gebruikersnaam", "Rol", "Volledige naam", "Laatste activiteit"],
       ["Sanne", "Beheerder", "Sanne Molenaar", "vandaag 10:20"],
-      ["Jayden", "Coördinator", "Jayden Ahmen", "vandaag 13:37"],
+      ["Jayden", "Coördinator", "Jayden Ahmen", "gisteren 10:20"],
       ["Gebruiker01", "Invoerder", "Nog niet gebruikt", "–"],
       ["Gebruiker02", "Invoerder", "Nog niet gebruikt", "–"],
       ["Gebruiker03", "Invoerder", "Nog niet gebruikt", "–"],

diff --git a/frontend/lib/api-mocks/UserMockData.ts b/frontend/lib/api-mocks/UserMockData.ts
@@ -3,8 +3,8 @@ import { User } from "@kiesraad/api";
 const today = new Date();
 today.setHours(10, 20);
 
-const laterToday = new Date();
-laterToday.setHours(13, 37);
+const yesterday = new Date(today);
+yesterday.setDate(today.getDate() - 1);
 
 const created_at = new Date().toISOString();
 const updated_at = new Date().toISOString();
@@ -24,7 +24,7 @@ export const userMockData: User[] = [
     username: "Jayden",
     role: "coordinator",
     fullname: "Jayden Ahmen",
-    last_activity_at: laterToday.toISOString(),
+    last_activity_at: yesterday.toISOString(),
     created_at,
     updated_at,
   },

diff --git a/frontend/lib/i18n/locales/nl/generic.json b/frontend/lib/i18n/locales/nl/generic.json
@@ -56,5 +56,6 @@
   "typist": "Invoerder",
   "version": "Versie",
   "vote_count": "Aantal stemmen",
+  "yesterday": "gisteren",
   "you_are_here": "je bent hier"
 }
diff --git a/frontend/lib/util/format.test.ts b/frontend/lib/util/format.test.ts
@@ -54,11 +54,14 @@ describe("Format util", () => {
   today.setHours(10, 20);
   const yesterday = new Date(today);
   yesterday.setDate(today.getDate() - 1);
+  const day_before_yesterday = new Date(today);
+  day_before_yesterday.setDate(today.getDate() - 2);
   const one_week_ago = new Date(today);
   one_week_ago.setDate(today.getDate() - 7);
   test.each([
     [today, `${t("today")} 10:20`],
-    [yesterday, `${yesterday.toLocaleString(t("date_locale"), { weekday: "long" })} 10:20`],
+    [yesterday, `${t("yesterday")} 10:20`],
+    [day_before_yesterday, `${day_before_yesterday.toLocaleString(t("date_locale"), { weekday: "long" })} 10:20`],
     [one_week_ago, `${one_week_ago.toLocaleString(t("date_locale"), { day: "numeric", month: "short" })} 10:20`],
   ])("Date format string %s as %s", (input: Date, expected: string) => {
     expect(formatDateTime(input)).toEqual(expected);

diff --git a/frontend/lib/util/format.ts b/frontend/lib/util/format.ts
@@ -30,18 +30,36 @@ export function validateNumberString(s: string | null | undefined) {
   return !!result.match(/^(\d*\.?)$|^(\d{1,3}(\.\d{3})+\.?)$/g);
 }
 
-export function formatDateTime(date: Date) {
+function isToday(date: Date): boolean {
   const today = new Date();
-  const timeString = date.toLocaleTimeString(t("date_locale"), { hour: "numeric", minute: "numeric" });
-  if (
+  return (
     date.getDate() === today.getDate() &&
     date.getMonth() === today.getMonth() &&
     date.getFullYear() === today.getFullYear()
-  ) {
+  );
+}
+
+function isYesterday(date: Date): boolean {
+  const yesterday = new Date();
+  yesterday.setDate(yesterday.getDate() - 1);
+  return (
+    date.getDate() === yesterday.getDate() &&
+    date.getMonth() === yesterday.getMonth() &&
+    date.getFullYear() === yesterday.getFullYear()
+  );
+}
+
+export function formatDateTime(date: Date) {
+  const today = new Date();
+  const timeString = date.toLocaleTimeString(t("date_locale"), { hour: "numeric", minute: "numeric" });
+  if (isToday(date)) {
     // Today
     return `${t("today")} ${timeString}`;
+  } else if (isYesterday(date)) {
+    // Yesterday
+    return `${t("yesterday")} ${timeString}`;
   } else if (Math.round(Math.abs(Number(today) - Number(date)) / (24 * 60 * 60 * 1000)) < 7) {
-    // Within the past 6 days
+    // Within the past 3-6 days
     return date.toLocaleString(t("date_locale"), {
       weekday: "long",
       hour: "numeric",