Show end time and start time for active and upcoming contests

package.json

@@ -26,6 +26,7 @@
     "crypto-browserify": "^3.12.0",
     "csvtojson": "^2.0.10",
     "date-fns": "^2.28.0",
+    "date-fns-tz": "^1.3.7",
     "dedent": "^0.7.0",
     "dotenv": "^9.0.2",
     "eslint": "^7.5.0",

src/components/ContestTile.js

@@ -6,6 +6,7 @@ import { getDates } from "../utils/time";
 import ClientOnly from "./ClientOnly";
 import Countdown from "./Countdown";
 import SponsorLink from "./SponsorLink";
+import { format } from "date-fns";
 
 const ContestTile = ({ contest, updateContestStatus, user }) => {
   const {
@@ -58,7 +59,13 @@ const ContestTile = ({ contest, updateContestStatus, user }) => {
               </li>
               {t.contestStatus === "soon" || t.contestStatus === "active" ? (
                 <li className="contest-tile__countdown">
-                  {t.contestStatus === "soon" ? "Starts:" : "Ends:"}
+                  {/* @todo: style these dates */}
+                  {t.contestStatus === "active" && (
+                    <span>Ends {t.endTime}</span>
+                  )}
+                  {t.contestStatus === "soon" && (
+                    <span>Starts {t.startTime}</span>
+                  )}
                   <Countdown
                     state={t.contestStatus}
                     start={start_time}

src/utils/time.js

@@ -1,5 +1,8 @@
-import format from "date-fns/format";
+import format from "date-fns-tz/format";
+import utcToZonedTime from "date-fns-tz/utcToZonedTime";
 import isValid from "date-fns/isValid";
+import parseISO from "date-fns/parseISO";
+
 import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
 
 const left = (total) => {
@@ -66,13 +69,33 @@ const getDates = (start, end) => {
   }
 
   const daysDuration = differenceInCalendarDays(endDate, startDate);
+  const parsedEndTime = parseISO(end);
+  const parsedStartTime = parseISO(start);
+  const endUtc = format(
+    utcToZonedTime(parsedEndTime, "UTC"),
+    "d MMMM - h:mm a zzz",
+    {
+      timeZone: "UTC",
+    }
+  );
+  const startUtc = format(
+    utcToZonedTime(parsedStartTime, "UTC"),
+    "d MMMM - h:mm a zzz",
+    {
+      timeZone: "UTC",
+    }
+  );
+  const endLocal = format(endDate, "(d MMMM - h:mm a zzz)");
+  const startLocal = format(startDate, "(d MMMM - h:mm a zzz)");
 
   const t = {
     contestStatus,
     start: startTime,
     end: endTime,
     startDay: isValid(startDate) ? format(startDate, "d MMMM yyyy") : "",
     endDay: isValid(endDate) ? format(endDate, "d MMMM yyyy") : "",
+    startTime: isValid(startDate) ? startUtc + " " + startLocal : "",
+    endTime: isValid(endDate) ? endUtc + " " + endLocal : "",
     daysDuration,
   };
 

yarn.lock

@@ -6834,6 +6834,11 @@ dataloader@^1.4.0:
   resolved "https://registry.yarnpkg.com/dataloader/-/dataloader-1.4.0.tgz#bca11d867f5d3f1b9ed9f737bd15970c65dff5c8"
   integrity sha512-68s5jYdlvasItOJnCuI2Q9s4q98g0pCyL3HrcKJu8KNugUl8ahgmZYg38ysLTgQjjXX3H8CJLkAvWrclWfcalw==
 
+date-fns-tz@^1.3.7:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/date-fns-tz/-/date-fns-tz-1.3.7.tgz#e8e9d2aaceba5f1cc0e677631563081fdcb0e69a"
+  integrity sha512-1t1b8zyJo+UI8aR+g3iqr5fkUHWpd58VBx8J/ZSQ+w7YrGlw80Ag4sA86qkfCXRBLmMc4I2US+aPMd4uKvwj5g==
+
 date-fns@^1.27.2:
   version "1.30.1"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"