diff --git a/src/app/components/EventCard.tsx b/src/app/components/EventCard.tsx index a0ba8b5..7f5ca0b 100644 --- a/src/app/components/EventCard.tsx +++ b/src/app/components/EventCard.tsx @@ -219,15 +219,20 @@ const getTimeDifference = (timeDiff: number): string => { const msInHour = 1000 * 60 * 60; const msInDay = msInHour * 24; + const rtf = new Intl.RelativeTimeFormat("en-US", { + numeric: "always", // "auto" will show "tomorrow" if day = 1 + style: "long", + }); + if (timeDiff < msInHour) { const minutesLeft = Math.floor(timeDiff / (1000 * 60)); - return `in ${minutesLeft} minutes`; + return rtf.format(minutesLeft, "minute") } else if (timeDiff < msInDay) { const hoursLeft = Math.floor(timeDiff / msInHour); - return `in ${hoursLeft} hours`; + return rtf.format(hoursLeft, "hour") } else { const daysLeft = Math.floor(timeDiff / msInDay); - return `in ${daysLeft} days`; + return rtf.format(daysLeft, "day") } }; diff --git a/src/app/components/TimeCard.tsx b/src/app/components/TimeCard.tsx index d555a8d..2362175 100644 --- a/src/app/components/TimeCard.tsx +++ b/src/app/components/TimeCard.tsx @@ -22,39 +22,33 @@ function TimeCard() { }; const formatDate = (date: Date) => { - const day = date.getDate().toString(); - const ending = findDateEnding(date); + const day = convertToDayWithEnding(date); const monthText = date.toLocaleString("default", { month: "long" }); const year = date.getFullYear(); - return `${day}${ending} ${monthText} ${year}`; + // This is technically the british way of writing things but of well + // If we're going to argue about the order we might as well drop the st, nd, rd, th suffixes. + return `${day} of ${monthText} ${year}`; }; const day = (date: Date) => { - const days = [ - "Sunday", - "Monday", - "Tuesday", - "Wednesday", - "Thursday", - "Friday", - "Saturday", - ]; - return days[date.getDay()]; + return date.toLocaleDateString("en-US", { weekday: "long" }); }; - const findDateEnding = (date: Date) => { + const convertToDayWithEnding = (date: Date) => { const day = date.getDate(); - if (day === 1 || day === 21 || day === 31) { - return "st"; - } else if (day === 2 || day === 22) { - return "nd"; - } else if (day === 3 || day === 23) { - return "rd"; - } else { - return "th"; - } + const enOrdinalRules = new Intl.PluralRules("en-US", { type: "ordinal" }); + const suffixes = new Map([ + ["one", "st"], + ["two", "nd"], + ["few", "rd"], + ["other", "th"], + ]); + + const rule = enOrdinalRules.select(day); + const suffix = suffixes.get(rule); + return `${day}${suffix}`; }; return (