fix: consistent surge alert table

Author: samshara

src/views/AllSurgeAlerts/index.tsx

@@ -194,17 +194,16 @@ export function Component() {
                 (item) => {
                     const startDate = isDefined(item.start) ? new Date(item.start) : undefined;
                     const endDate = isDefined(item.end) ? new Date(item.end) : undefined;
-                    const nowMs = new Date().getTime();
 
                     const closed = isDefined(item.end)
-                        ? new Date(item.end).getTime() < nowMs : undefined;
+                        ? new Date(item.end).getTime() < nowTimestamp : undefined;
 
                     if (isDefined(endDate) && closed) {
                         return endDate.toLocaleString();
                     }
 
                     if (isDefined(startDate)) {
-                        const dateStarted = startDate.getTime() < nowMs
+                        const dateStarted = startDate.getTime() < nowTimestamp
                             ? strings.surgeAlertImmediately
                             : startDate.toLocaleString();
 

src/views/EmergencySurge/SurgeTable/index.tsx

@@ -124,17 +124,16 @@ export default function SurgeTable(props: Props) {
                 (item) => {
                     const startDate = isDefined(item.start) ? new Date(item.start) : undefined;
                     const endDate = isDefined(item.end) ? new Date(item.end) : undefined;
-                    const nowMs = new Date().getTime();
 
                     const closed = isDefined(item.end)
-                        ? new Date(item.end).getTime() < today : undefined;
+                        ? new Date(item.end).getTime() < nowTimestamp : undefined;
 
                     if (isDefined(endDate) && closed) {
                         return endDate.toLocaleString();
                     }
 
                     if (isDefined(startDate)) {
-                        const dateStarted = startDate.getTime() < nowMs
+                        const dateStarted = startDate.getTime() < nowTimestamp
                             ? strings.emergencySurgeImmediately
                             : startDate.toLocaleString();
 

src/views/SurgeOverview/SurgeAlertsTable/i18n.json

@@ -13,6 +13,7 @@
         "surgeAlertsTableEmergency": "Emergency",
         "surgeAlertsTableCountry": "Country",
         "surgeAlertsTableStatus": "Status",
-        "surgeAlertsViewAll": "View All Surge Alerts"
+        "surgeAlertsViewAll": "View All Surge Alerts",
+        "surgeAlertImmediately": "Immediately"
     }
 }

src/views/SurgeOverview/SurgeAlertsTable/index.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useCallback } from 'react';
-import { isNotDefined } from '@togglecorp/fujs';
+import { isDefined, isNotDefined } from '@togglecorp/fujs';
 
 import Table from '#components/Table';
 import Link from '#components/Link';
@@ -24,11 +24,6 @@ type SurgeAlertListItem = NonNullable<GetSurgeAlertResponse['results']>[number];
 
 const surgeAlertKeySelector = (item: SurgeAlertListItem) => item.id;
 
-// FIXME: use a separate utility
-const aMonthAgo = new Date();
-aMonthAgo.setMonth(aMonthAgo.getMonth() - 1);
-aMonthAgo.setHours(0, 0, 0, 0);
-
 const today = new Date();
 const todayTimestamp = today.getTime();
 
@@ -121,7 +116,27 @@ function SurgeAlertsTable() {
         createDateColumn<SurgeAlertListItem, number>(
             'start',
             strings.surgeAlertsTableStartDate,
-            (surgeAlert) => surgeAlert.start,
+            (surgeAlert) => {
+                const startDate = isDefined(surgeAlert.start)
+                    ? new Date(surgeAlert.start) : undefined;
+                const endDate = isDefined(surgeAlert.end) ? new Date(surgeAlert.end) : undefined;
+
+                const closed = isDefined(surgeAlert.end)
+                    ? new Date(surgeAlert.end).getTime() < todayTimestamp : undefined;
+
+                if (isDefined(endDate) && closed) {
+                    return endDate.toLocaleString();
+                }
+
+                if (isDefined(startDate)) {
+                    const dateStarted = startDate.getTime() < todayTimestamp
+                        ? strings.surgeAlertImmediately
+                        : startDate.toLocaleString();
+
+                    return dateStarted;
+                }
+                return undefined;
+            },
         ),
         createStringColumn<SurgeAlertListItem, number>(
             'name',
@@ -162,6 +177,7 @@ function SurgeAlertsTable() {
         ),
     ]), [
         getStatus,
+        strings.surgeAlertImmediately,
         strings.surgeAlertsTableAlertDate,
         strings.surgeAlertsTableDuration,
         strings.surgeAlertsTableStartDate,