nicer dates in timeline header

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 () {

src/components/StateOptions.jsx

@@ -12,8 +12,8 @@ export default ({ showing, onClickHandler, timelineDims }) => {
   return <div className='stateoptions-panel' style={{ bottom: timelineDims.height }}>
     <div>
       <div className='button' onClick={onNarrativise}>Narrativise</div>
-      <label for='withlines'>Connect by lines</label>
-      <input name='withlines' onClick={handleCheck} checked={checked} type='checkbox' />
+      {/* <label for='withlines'>Connect by lines</label> */}
+      {/* <input name='withlines' onClick={handleCheck} checked={checked} type='checkbox' /> */}
     </div>
   </div>
 }

src/components/presentational/Timeline/Header.js

@@ -1,8 +1,9 @@
 import React from 'react'
+import { makeNiceDate } from '../../../common/utilities'
 
 const TimelineHeader = ({ title, from, to, onClick, hideInfo }) => {
-  const d0 = from && from.toLocaleDateString()
-  const d1 = to && to.toLocaleDateString()
+  const d0 = from && makeNiceDate(from)
+  const d1 = to && makeNiceDate(to)
   return (
     <div className='timeline-header'>
       <div className='timeline-toggle' onClick={() => onClick()}>