From 1ca4eda08aa0cc8ad7f936eb24c4841fdc49f54f Mon Sep 17 00:00:00 2001
From: Leangseu Kim <lkim@edx.org>
Date: Fri, 16 Dec 2022 10:58:51 -0500
Subject: [PATCH] chore: fix fo format relative time

---
 src/alerts/course-start-alert/CourseStartAlert.jsx  | 12 ++++++++----
 .../alerts/course-end-alert/CourseEndAlert.jsx      | 13 +++++++++----
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/alerts/course-start-alert/CourseStartAlert.jsx b/src/alerts/course-start-alert/CourseStartAlert.jsx
index abe666fa..bcd68367 100644
--- a/src/alerts/course-start-alert/CourseStartAlert.jsx
+++ b/src/alerts/course-start-alert/CourseStartAlert.jsx
@@ -11,7 +11,9 @@ import { Info } from '@edx/paragon/icons';
 
 import { useModel } from '../../generic/model-store';
 
-const DAY_MS = 24 * 60 * 60 * 1000; // in ms
+const DAY_SEC = 24 * 60 * 60; // in seconds
+const DAY_MS = DAY_SEC * 1000; // in ms
+const YEAR_SEC = 365 * DAY_SEC; // in seconds
 
 function CourseStartAlert({ payload }) {
   const {
@@ -25,15 +27,17 @@ function CourseStartAlert({ payload }) {
 
   const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
 
+  const delta = new Date(startDate) - new Date();
   const timeRemaining = (
     <FormattedRelativeTime
       key="timeRemaining"
-      value={startDate}
+      value={delta / 1000}
+      numeric="auto"
+      // 1 year interval to help auto format. It won't format without updateIntervalInSeconds.
+      updateIntervalInSeconds={YEAR_SEC}
       {...timezoneFormatArgs}
     />
   );
-
-  const delta = new Date(startDate) - new Date();
   if (delta < DAY_MS) {
     return (
       <Alert variant="info" icon={Info}>
diff --git a/src/course-home/outline-tab/alerts/course-end-alert/CourseEndAlert.jsx b/src/course-home/outline-tab/alerts/course-end-alert/CourseEndAlert.jsx
index 97b02519..52287fb1 100644
--- a/src/course-home/outline-tab/alerts/course-end-alert/CourseEndAlert.jsx
+++ b/src/course-home/outline-tab/alerts/course-end-alert/CourseEndAlert.jsx
@@ -9,7 +9,9 @@ import {
 import { Alert } from '@edx/paragon';
 import { Info } from '@edx/paragon/icons';
 
-const DAY_MS = 24 * 60 * 60 * 1000; // in ms
+const DAY_SEC = 24 * 60 * 60; // in seconds
+const DAY_MS = DAY_SEC * 1000; // in ms
+const YEAR_SEC = 365 * DAY_SEC; // in seconds
 
 function CourseEndAlert({ payload }) {
   const {
@@ -20,16 +22,19 @@ function CourseEndAlert({ payload }) {
 
   const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
 
+  let msg;
+  const delta = new Date(endDate) - new Date();
   const timeRemaining = (
     <FormattedRelativeTime
       key="timeRemaining"
-      value={endDate}
+      value={delta / 1000}
+      numeric="auto"
+      // 1 year interval to help auto format. It won't format without updateIntervalInSeconds.
+      updateIntervalInSeconds={YEAR_SEC}
       {...timezoneFormatArgs}
     />
   );
 
-  let msg;
-  const delta = new Date(endDate) - new Date();
   if (delta < DAY_MS) {
     const courseEndTime = (
       <FormattedTime