From d947d598b70e073c84f6e946f27bbd08ceb0717d Mon Sep 17 00:00:00 2001
From: Dmytro <98233552+DmytroAlipov@users.noreply.github.com>
Date: Tue, 9 May 2023 17:17:40 +0200
Subject: [PATCH] fix: show date on home page (#1052)

Correct display of the number of days before the
start of the course into the Course Home.
---
 src/alerts/course-start-alert/CourseStartAlert.jsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/alerts/course-start-alert/CourseStartAlert.jsx b/src/alerts/course-start-alert/CourseStartAlert.jsx
index abe666fa..fcf7fd91 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,18 @@ 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}>