From 69e216e1a2899f38bb9b6275f9695440025504f3 Mon Sep 17 00:00:00 2001
From: Lachlan Kermode <lachiekermode@gmail.com>
Date: Tue, 30 Jun 2020 13:48:22 +0200
Subject: [PATCH] nicer date, remove precision magic

---
 src/components/Card.jsx | 38 ++++++++++++++++++++++++--------------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/components/Card.jsx b/src/components/Card.jsx
index ccc3893..eca86a9 100644
--- a/src/components/Card.jsx
+++ b/src/components/Card.jsx
@@ -25,7 +25,18 @@ class Card extends React.Component {
 
   makeTimelabel (datetime) {
     if (datetime === null) return null
-    return datetime.toLocaleDateString()
+    // 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}`
   }
 
   renderSummary () {
@@ -84,25 +95,24 @@ class Card extends React.Component {
   renderTime () {
     let timelabel = this.makeTimelabel(this.props.event.datetime)
 
-    let precision = this.props.event.time_display
-    if (precision === '_date_only') {
-      precision = ''
-      timelabel = timelabel.substring(0, 11)
-    } else if (precision === '_approximate_date_only') {
-      precision = ' (Approximate date)'
-      timelabel = timelabel.substring(0, 11)
-    } else if (precision === '_approximate_datetime') {
-      precision = ' (Approximate datetime)'
-    } else {
-      timelabel = timelabel.substring(0, 11)
-    }
+    // let precision = this.props.event.time_display
+    // if (precision === '_date_only') {
+    //   precision = ''
+    //   timelabel = timelabel.substring(0, 11)
+    // } else if (precision === '_approximate_date_only') {
+    //   precision = ' (Approximate date)'
+    //   timelabel = timelabel.substring(0, 11)
+    // } else if (precision === '_approximate_datetime') {
+    //   precision = ' (Approximate datetime)'
+    // } else {
+    //   timelabel = timelabel.substring(0, 11)
+    // }
 
     return (
       <CardTime
         makeTimelabel={timelabel}
         language={this.props.language}
         timelabel={timelabel}
-        precision={precision}
       />
     )
   }