Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added datetime helper function #337

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Added datetime helper function #337

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
905153d
Added datetime helper function
Monicaaawa Feb 19, 2023
1ed3d83
Merged datetime and timezone functions
Monicaaawa Feb 20, 2023
abd4f09
Create getDateTime function and add comments
Monicaaawa Apr 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions src/components/AnnouncementsPage/Announcement.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -21,18 +22,15 @@ 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');
const datetime = getDateTime(timestamp);

return (
<Container>
<Typography variant='h5' component='h2' className={classes.subject}>
{subject}
</Typography>
<Typography variant='subtitle1' className={classes.timestamp}>
Posted on {date} at {time} PST
Posted on {datetime.date} at {datetime.time} PST
</Typography>
<Typography variant='body2' className={classes.body}>
{body.trim()}
Expand Down
10 changes: 6 additions & 4 deletions src/components/HomePage/Banner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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'];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Move this logic into datetime_utils by creating a function called "getDayOfWeek"


const useStyles = makeStyles(theme => ({
background: {
Expand Down Expand Up @@ -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 (
<>
Expand Down Expand Up @@ -224,10 +227,9 @@ function Banner() {
style={{ marginBottom: 10, fontWeight: 500 }}
component='h3'
>
<time dateTime={hothStart.toISOString()} hidden>
{month} {startDay}{endDayString}, 2022
<b>Date: </b><time dateTime={hothStart.toISOString()} >
{eventDayOfWeek}, {month} {startDay}{endDayString}, {eventYear}
</time>
<b>Date:</b> Sunday, March 5, 2023
</Typography>
</Tooltip>
</Box>
Expand Down
7 changes: 3 additions & 4 deletions src/components/HomePage/HomeAnnouncementBanner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -61,9 +62,7 @@ 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' });
const datetime = getDateTime(timestamp);

return (
<Grid container direction='column' justify='space-between'>
Expand All @@ -76,7 +75,7 @@ function HomeAnnouncement({ subject, timestamp, body }) {
</Grid>
<Grid item>
<Typography variant='subtitle2' className={classes.date}>
{date}, {time}
{datetime.date}, {datetime.time}
</Typography>
</Grid>
</Grid>
Expand Down
2 changes: 1 addition & 1 deletion src/components/SchedulePage/StickyTimeSlot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
25 changes: 25 additions & 0 deletions src/utils/datetime_utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
function getDateTime(timestamp) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

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 '';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Return null instead, the default of an empty object

}
}

// 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 };

12 changes: 0 additions & 12 deletions src/utils/timezone_names.js
View file
Open in desktop

This file was deleted.