From 109210714f15db53e230949a4ff5892b491ccb5d Mon Sep 17 00:00:00 2001
From: Lachlan Kermode <lachiekermode@gmail.com>
Date: Wed, 1 Jul 2020 11:10:18 +0200
Subject: [PATCH] nicer dates in timeline header

---
 src/common/utilities.js                          | 16 ++++++++++++++++
 src/components/Card.jsx                          | 15 ++-------------
 src/components/StateOptions.jsx                  |  4 ++--
 src/components/presentational/Timeline/Header.js |  5 +++--
 4 files changed, 23 insertions(+), 17 deletions(-)

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 <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>
 }
diff --git a/src/components/presentational/Timeline/Header.js b/src/components/presentational/Timeline/Header.js
index b9f0f25..271b206 100644
--- a/src/components/presentational/Timeline/Header.js
+++ b/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()}>