Skip to content

Commit f4af485

Browse files
Merge pull request #5466 from code-423n4/5465-feature-show-end-time-or-start-time-for-upcoming-and-current-contests
Show end time and start time for active and upcoming contests
2 parents 00f0c1f + 1bcb6d4 commit f4af485

File tree

4 files changed

+38
-2
lines changed

4 files changed

+38
-2
lines changed

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"crypto-browserify": "^3.12.0",
2727
"csvtojson": "^2.0.10",
2828
"date-fns": "^2.28.0",
29+
"date-fns-tz": "^1.3.7",
2930
"dedent": "^0.7.0",
3031
"dotenv": "^9.0.2",
3132
"eslint": "^7.5.0",

src/components/ContestTile.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { getDates } from "../utils/time";
66
import ClientOnly from "./ClientOnly";
77
import Countdown from "./Countdown";
88
import SponsorLink from "./SponsorLink";
9+
import { format } from "date-fns";
910

1011
const ContestTile = ({ contest, updateContestStatus, user }) => {
1112
const {
@@ -58,7 +59,13 @@ const ContestTile = ({ contest, updateContestStatus, user }) => {
5859
</li>
5960
{t.contestStatus === "soon" || t.contestStatus === "active" ? (
6061
<li className="contest-tile__countdown">
61-
{t.contestStatus === "soon" ? "Starts:" : "Ends:"}
62+
{/* @todo: style these dates */}
63+
{t.contestStatus === "active" && (
64+
<span>Ends {t.endTime}</span>
65+
)}
66+
{t.contestStatus === "soon" && (
67+
<span>Starts {t.startTime}</span>
68+
)}
6269
<Countdown
6370
state={t.contestStatus}
6471
start={start_time}

src/utils/time.js

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1-
import format from "date-fns/format";
1+
import format from "date-fns-tz/format";
2+
import utcToZonedTime from "date-fns-tz/utcToZonedTime";
23
import isValid from "date-fns/isValid";
4+
import parseISO from "date-fns/parseISO";
5+
36
import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
47

58
const left = (total) => {
@@ -66,13 +69,33 @@ const getDates = (start, end) => {
6669
}
6770

6871
const daysDuration = differenceInCalendarDays(endDate, startDate);
72+
const parsedEndTime = parseISO(end);
73+
const parsedStartTime = parseISO(start);
74+
const endUtc = format(
75+
utcToZonedTime(parsedEndTime, "UTC"),
76+
"d MMMM - h:mm a zzz",
77+
{
78+
timeZone: "UTC",
79+
}
80+
);
81+
const startUtc = format(
82+
utcToZonedTime(parsedStartTime, "UTC"),
83+
"d MMMM - h:mm a zzz",
84+
{
85+
timeZone: "UTC",
86+
}
87+
);
88+
const endLocal = format(endDate, "(d MMMM - h:mm a zzz)");
89+
const startLocal = format(startDate, "(d MMMM - h:mm a zzz)");
6990

7091
const t = {
7192
contestStatus,
7293
start: startTime,
7394
end: endTime,
7495
startDay: isValid(startDate) ? format(startDate, "d MMMM yyyy") : "",
7596
endDay: isValid(endDate) ? format(endDate, "d MMMM yyyy") : "",
97+
startTime: isValid(startDate) ? startUtc + " " + startLocal : "",
98+
endTime: isValid(endDate) ? endUtc + " " + endLocal : "",
7699
daysDuration,
77100
};
78101

yarn.lock

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6834,6 +6834,11 @@ dataloader@^1.4.0:
68346834
resolved "https://registry.yarnpkg.com/dataloader/-/dataloader-1.4.0.tgz#bca11d867f5d3f1b9ed9f737bd15970c65dff5c8"
68356835
integrity sha512-68s5jYdlvasItOJnCuI2Q9s4q98g0pCyL3HrcKJu8KNugUl8ahgmZYg38ysLTgQjjXX3H8CJLkAvWrclWfcalw==
68366836

6837+
date-fns-tz@^1.3.7:
6838+
version "1.3.7"
6839+
resolved "https://registry.yarnpkg.com/date-fns-tz/-/date-fns-tz-1.3.7.tgz#e8e9d2aaceba5f1cc0e677631563081fdcb0e69a"
6840+
integrity sha512-1t1b8zyJo+UI8aR+g3iqr5fkUHWpd58VBx8J/ZSQ+w7YrGlw80Ag4sA86qkfCXRBLmMc4I2US+aPMd4uKvwj5g==
6841+
68376842
date-fns@^1.27.2:
68386843
version "1.30.1"
68396844
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"

0 commit comments

Comments
 (0)