From 905153d7102333283702cdaa66fcf90ce1bd2c6c Mon Sep 17 00:00:00 2001 From: Shiyu Ye Date: Sun, 19 Feb 2023 15:36:41 -0800 Subject: [PATCH 1/3] Added datetime helper function --- src/components/AnnouncementsPage/Announcement.js | 7 ++----- src/components/HomePage/Banner.js | 6 +++--- src/components/HomePage/HomeAnnouncementBanner.js | 6 ++---- src/utils/datetime_utils.js | 10 ++++++++++ 4 files changed, 17 insertions(+), 12 deletions(-) create mode 100644 src/utils/datetime_utils.js diff --git a/src/components/AnnouncementsPage/Announcement.js b/src/components/AnnouncementsPage/Announcement.js index a3f544b3..7c9be66b 100644 --- a/src/components/AnnouncementsPage/Announcement.js +++ b/src/components/AnnouncementsPage/Announcement.js @@ -3,6 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'; import Container from '@material-ui/core/Container'; import Typography from '@material-ui/core/Typography'; import PropTypes from 'prop-types'; +import { getDateTime } from '../../utils/datetime_utils'; const useStyles = makeStyles(theme => ({ subject: { @@ -22,17 +23,13 @@ const useStyles = makeStyles(theme => ({ function Announcement({ subject, timestamp, body }) { const classes = useStyles(); - const d = new Date(timestamp); - const date = d.toLocaleDateString('en-US'); - const time = d.toLocaleTimeString('en-US'); - return ( {subject} - Posted on {date} at {time} PST + Posted on {getDateTime(timestamp)} PST {body.trim()} diff --git a/src/components/HomePage/Banner.js b/src/components/HomePage/Banner.js index e1f80fd4..e1d7881d 100644 --- a/src/components/HomePage/Banner.js +++ b/src/components/HomePage/Banner.js @@ -224,10 +224,10 @@ function Banner() { style={{ marginBottom: 10, fontWeight: 500 }} component='h3' > - diff --git a/src/components/HomePage/HomeAnnouncementBanner.js b/src/components/HomePage/HomeAnnouncementBanner.js index 471eab7f..44472298 100644 --- a/src/components/HomePage/HomeAnnouncementBanner.js +++ b/src/components/HomePage/HomeAnnouncementBanner.js @@ -8,6 +8,7 @@ import data from '../../data/announcements.json'; import PropTypes from 'prop-types'; import Collapse from '@material-ui/core/Collapse'; import { Link } from 'gatsby'; +import { getDateTime } from '../../utils/datetime_utils'; import ClearIcon from '@material-ui/icons/Clear'; import IconButton from '@material-ui/core/IconButton'; @@ -61,9 +62,6 @@ const useStyles = makeStyles(theme => ({ function HomeAnnouncement({ subject, timestamp, body }) { const classes = useStyles(); - const d = new Date(timestamp); - const date = d.toLocaleDateString('en-US'); - const time = d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }); return ( @@ -76,7 +74,7 @@ function HomeAnnouncement({ subject, timestamp, body }) { - {date}, {time} + {getDateTime(timestamp)} diff --git a/src/utils/datetime_utils.js b/src/utils/datetime_utils.js new file mode 100644 index 00000000..610c91e5 --- /dev/null +++ b/src/utils/datetime_utils.js @@ -0,0 +1,10 @@ +export function getDateTime(timestamp) { + try { + 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}`; + } catch { + return ''; + } +} From 1ed3d833c44c1d984bc57aa1dac4be7d31f92f7e Mon Sep 17 00:00:00 2001 From: Shiyu Ye Date: Mon, 20 Feb 2023 12:19:19 -0800 Subject: [PATCH 2/3] Merged datetime and timezone functions --- .../AnnouncementsPage/Announcement.js | 3 ++- src/components/HomePage/Banner.js | 8 +++++--- .../HomePage/HomeAnnouncementBanner.js | 3 ++- src/components/SchedulePage/StickyTimeSlot.js | 2 +- src/utils/datetime_utils.js | 19 +++++++++++++++++-- src/utils/timezone_names.js | 12 ------------ 6 files changed, 27 insertions(+), 20 deletions(-) delete mode 100644 src/utils/timezone_names.js diff --git a/src/components/AnnouncementsPage/Announcement.js b/src/components/AnnouncementsPage/Announcement.js index 7c9be66b..7208ea65 100644 --- a/src/components/AnnouncementsPage/Announcement.js +++ b/src/components/AnnouncementsPage/Announcement.js @@ -22,6 +22,7 @@ const useStyles = makeStyles(theme => ({ function Announcement({ subject, timestamp, body }) { const classes = useStyles(); + const datetime = getDateTime(timestamp); return ( @@ -29,7 +30,7 @@ function Announcement({ subject, timestamp, body }) { {subject} - Posted on {getDateTime(timestamp)} PST + Posted on {datetime.date} at {datetime.time} PST {body.trim()} diff --git a/src/components/HomePage/Banner.js b/src/components/HomePage/Banner.js index e1d7881d..b538151b 100644 --- a/src/components/HomePage/Banner.js +++ b/src/components/HomePage/Banner.js @@ -13,7 +13,7 @@ import Button from '@material-ui/core/Button'; import { useStaticQuery, graphql } from 'gatsby'; import Img from 'gatsby-image'; -import { getTimeZoneWithFormat } from '../../utils/timezone_names.js'; +import { getTimeZoneWithFormat } from '../../utils/datetime_utils.js'; import { hothStart, @@ -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']; const useStyles = makeStyles(theme => ({ background: { @@ -192,6 +193,8 @@ function Banner() { const endDay = hothEnd.getDate(); const eventCrossesDate = startDay !== endDay; const endDayString = eventCrossesDate ? `–${endDay}` : ''; + const eventYear = hothStart.getFullYear(); + const eventDayOfWeek = dayOfWeek[hothStart.getDay()]; return ( <> @@ -225,9 +228,8 @@ function Banner() { component='h3' > Date: - {/* Date: Sunday, March 5, 2023 */} diff --git a/src/components/HomePage/HomeAnnouncementBanner.js b/src/components/HomePage/HomeAnnouncementBanner.js index 44472298..43e2a295 100644 --- a/src/components/HomePage/HomeAnnouncementBanner.js +++ b/src/components/HomePage/HomeAnnouncementBanner.js @@ -62,6 +62,7 @@ const useStyles = makeStyles(theme => ({ function HomeAnnouncement({ subject, timestamp, body }) { const classes = useStyles(); + const datetime = getDateTime(timestamp); return ( @@ -74,7 +75,7 @@ function HomeAnnouncement({ subject, timestamp, body }) { - {getDateTime(timestamp)} + {datetime.date}, {datetime.time} diff --git a/src/components/SchedulePage/StickyTimeSlot.js b/src/components/SchedulePage/StickyTimeSlot.js index 0dd3faab..45e210ad 100644 --- a/src/components/SchedulePage/StickyTimeSlot.js +++ b/src/components/SchedulePage/StickyTimeSlot.js @@ -7,7 +7,7 @@ import ScheduleRoundedIcon from '@material-ui/icons/ScheduleRounded'; import Box from '@material-ui/core/Box'; import ListSubheader from '@material-ui/core/ListSubheader'; import ListItem from '@material-ui/core/ListItem'; -import { getTimeZoneWithFormat } from '../../utils/timezone_names.js'; +import { getTimeZoneWithFormat } from '../../utils/datetime_utils'; const useStyles = makeStyles(theme => { return { diff --git a/src/utils/datetime_utils.js b/src/utils/datetime_utils.js index 610c91e5..d0eb96ad 100644 --- a/src/utils/datetime_utils.js +++ b/src/utils/datetime_utils.js @@ -1,10 +1,25 @@ -export function getDateTime(timestamp) { +function getDateTime(timestamp) { try { 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}`; + return { date, time }; } catch { return ''; } } + +// format must be 'long' or 'short' +function getTimeZoneWithFormat(date, format) { + try { + const formatter = new Intl.DateTimeFormat('en-US', { timeZoneName: format }); + return formatter.formatToParts(date).find(part => { + return part.type === 'timeZoneName'; + }).value || ''; + } catch { + return ''; + } +} + +export { getDateTime, getTimeZoneWithFormat }; + diff --git a/src/utils/timezone_names.js b/src/utils/timezone_names.js deleted file mode 100644 index 8d490619..00000000 --- a/src/utils/timezone_names.js +++ /dev/null @@ -1,12 +0,0 @@ -// format must be 'long' or 'short' -export function getTimeZoneWithFormat(date, format) { - try { - const formatter = new Intl.DateTimeFormat('en-US', { timeZoneName: format }); - return formatter.formatToParts(date).find(part => { - return part.type === 'timeZoneName'; - }).value || ''; - } catch { - return ''; - } -} - From abd4f09d4ac32d122fb7685fe18585cfd7386ae1 Mon Sep 17 00:00:00 2001 From: Shiyu Ye <105144733+Monicaaawa@users.noreply.github.com> Date: Mon, 17 Apr 2023 11:44:25 -0700 Subject: [PATCH 3/3] Create getDateTime function and add comments --- src/components/HomePage/Banner.js | 5 ++--- src/utils/datetime_utils.js | 23 +++++++++++++++++++++-- 2 files changed, 23 insertions(+), 5 deletions(-) diff --git a/src/components/HomePage/Banner.js b/src/components/HomePage/Banner.js index b538151b..85ec2a47 100644 --- a/src/components/HomePage/Banner.js +++ b/src/components/HomePage/Banner.js @@ -13,7 +13,7 @@ import Button from '@material-ui/core/Button'; import { useStaticQuery, graphql } from 'gatsby'; import Img from 'gatsby-image'; -import { getTimeZoneWithFormat } from '../../utils/datetime_utils.js'; +import { getTimeZoneWithFormat, getDayOfWeek } from '../../utils/datetime_utils.js'; import { hothStart, @@ -24,7 +24,6 @@ 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']; const useStyles = makeStyles(theme => ({ background: { @@ -194,7 +193,7 @@ function Banner() { const eventCrossesDate = startDay !== endDay; const endDayString = eventCrossesDate ? `–${endDay}` : ''; const eventYear = hothStart.getFullYear(); - const eventDayOfWeek = dayOfWeek[hothStart.getDay()]; + const eventDayOfWeek = getDayOfWeek(hothStart.getDay()); return ( <> diff --git a/src/utils/datetime_utils.js b/src/utils/datetime_utils.js index d0eb96ad..e8f5ec8d 100644 --- a/src/utils/datetime_utils.js +++ b/src/utils/datetime_utils.js @@ -1,3 +1,8 @@ +/** + * Returns an object containing the date and time for the given timestamp. + * Takes the timestamp to convert to date and time as parameter. + * Returns an object containing the date and time as strings, or null if an error occurs. + */ function getDateTime(timestamp) { try { const d = new Date(timestamp); @@ -5,7 +10,21 @@ function getDateTime(timestamp) { const time = d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }); return { date, time }; } catch { - return ''; + return null; + } +} + +/** + * Returns the day of the week as a string for the given numeric day of the week. + * Takes the numeric day of the week (0 for Sunday, 1 for Monday, etc.) as parameter. + * Returns the name of the day of the week as a string, or null if an error occurs. + */ +function getDayOfWeek(day) { + try { + const dayOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; + return dayOfWeek[day]; + } catch { + return null; } } @@ -21,5 +40,5 @@ function getTimeZoneWithFormat(date, format) { } } -export { getDateTime, getTimeZoneWithFormat }; +export { getDateTime, getDayOfWeek, getTimeZoneWithFormat };