diff --git a/src/common/utilities.js b/src/common/utilities.js index 84ab5c7..2dd4339 100644 --- a/src/common/utilities.js +++ b/src/common/utilities.js @@ -211,3 +211,19 @@ export function findDescriptionInFilterTree (key, node) { if (descs.length !== 1) return false return descs[0] } + +export function makeNiceDate (datetime) { + if (datetime === null) return null + // see https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date + const dateTimeFormat = new Intl.DateTimeFormat( + 'en', + { year: 'numeric', month: 'long', day: '2-digit' } + ) + const [ + { value: month },, + { value: day },, + { value: year } + ] = dateTimeFormat.formatToParts(datetime) + + return `${day} ${month}, ${year}` +} diff --git a/src/components/Card.jsx b/src/components/Card.jsx index ef7f984..fe24c72 100644 --- a/src/components/Card.jsx +++ b/src/components/Card.jsx @@ -9,6 +9,7 @@ import CardFilters from './presentational/Card/Filters' import CardSummary from './presentational/Card/Summary' import CardSource from './presentational/Card/Source' import CardNarrative from './presentational/Card/Narrative' +import { makeNiceDate } from '../common/utilities' class Card extends React.Component { constructor (props) { @@ -25,19 +26,7 @@ class Card extends React.Component { } makeTimelabel (datetime) { - if (datetime === null) return null - // see https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date - const dateTimeFormat = new Intl.DateTimeFormat( - 'en', - { year: 'numeric', month: 'long', day: '2-digit' } - ) - const [ - { value: month },, - { value: day },, - { value: year } - ] = dateTimeFormat.formatToParts(datetime) - - return `${day} ${month}, ${year}` + return makeNiceDate(datetime) } renderSummary () { diff --git a/src/components/StateOptions.jsx b/src/components/StateOptions.jsx index 826192e..0b4989e 100644 --- a/src/components/StateOptions.jsx +++ b/src/components/StateOptions.jsx @@ -12,8 +12,8 @@ export default ({ showing, onClickHandler, timelineDims }) => { return