Added datetime helper function #337
Conversation
github-actions
bot
added
announcements
src/components/HomePage/Banner.js
Outdated
| </time> | ||
| <b>Date:</b> Sunday, March 5, 2023 | ||
| {/* <b>Date:</b> Sunday, March 5, 2023 */} |
There was a problem hiding this comment.
If you are not using this code anymore, then you should delete it to keep our code clean.
src/utils/datetime_utils.js
Outdated
| const d = new Date(timestamp); | ||
| const date = d.toLocaleDateString('en-US'); | ||
| const time = d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }); | ||
| return `${date}, ${time}`; |
There was a problem hiding this comment.
We shouldn't be returning a string with a specific format like ${date}, ${time} hardcoded in.
Consider the following use cases:
- What if another component wants to use this format, but another component wants to display time like
${date} - ${time}instead? - Or what if a component doesn't care about the time, and only cares about the date?
This function should be able to handle either regardless. To fix this, we should instead return an object that maps keys to values so that each component can use the data however it wants. Like so:
return {
date: date,
time: time
}And conveniently, javascript lets a simplify this code into the following that does the exact same thing:
return { date, time }Then, in your components, you can use it like so:
const datetime = getDateTime(timestamp);
...
<p> Posted on {datetime.date}, {datetime.time} PST </p>
src/components/HomePage/Banner.js
Outdated
| <time dateTime={hothStart.toISOString()} hidden> | ||
| {month} {startDay}{endDayString}, 2022 | ||
| <b>Date: </b><time dateTime={hothStart.toISOString()} > | ||
| {month} {startDay}{endDayString}, 2023 |
There was a problem hiding this comment.
We should not be hardcoding the year, but also getting the year from the hothStart date.
src/utils/datetime_utils.js
Outdated
| @@ -0,0 +1,10 @@ | |||
| export function getDateTime(timestamp) { | |||
There was a problem hiding this comment.
Also, there seems to be a timezone_names.js file that has functionality similar to this file, so you should move the function in that file into this file and make this file the centralized util file that handles anything 'time' related.
src/utils/datetime_utils.js
Outdated
| const time = d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }); | ||
| return { date, time }; | ||
| } catch { | ||
| return ''; |
There was a problem hiding this comment.
Return null instead, the default of an empty object
src/components/HomePage/Banner.js
Outdated
| @@ -24,6 +24,7 @@ import { | |||
|
|
|||
| // These dates are displayed in the user's timezone | |||
| const monthFormatter = new Intl.DateTimeFormat('en-US', { month: 'short' }); | |||
| const dayOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; | |||
There was a problem hiding this comment.
Move this logic into datetime_utils by creating a function called "getDayOfWeek"
| @@ -0,0 +1,25 @@ | |||
| function getDateTime(timestamp) { | |||
There was a problem hiding this comment.
In a util functions file, we should be documenting each function as much as possible so other people know how to use it. Add some comments here to describe the function. Make sure to mention what arguments it takes and what it returns.
fixes #213
Wrote DateTime helper function in datetime_utils.js (under utils folder) and standardized the display format for date and time in announcement page, homepage banner, and homepage announcement banner.