From 430440569aeeed839408b454b2289bfa808fcc99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20Camilo=20Gonz=C3=A1lez?= <info@juancgonzalez.com>
Date: Sun, 29 Nov 2020 18:25:51 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=90=20Use=20locale=20throughout=20layo?=
 =?UTF-8?q?uts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/card.js                    | 10 +++++++---
 src/components/Timeline.jsx           |  1 +
 src/components/TimelineCategories.jsx |  4 ++--
 src/store/initial.js                  |  4 +++-
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/common/card.js b/src/common/card.js
index d1743f9..89ca256 100644
--- a/src/common/card.js
+++ b/src/common/card.js
@@ -1,16 +1,20 @@
+import copy from './data/copy.json';
+const {date_title, location_title, summary_title} = copy[process.env.store.app.language].cardstack;
+
 // Sensible defaults for generating a basic card layout
 // based on the example Timemap datasheet.
+
 const basic = ({ event }) => {
   return [
     [
       {
         kind: 'date',
-        title: 'Incident Date',
+        title: date_title || 'Incident Dates',
         value: event.datetime || event.date || ``
       },
       {
         kind: 'text',
-        title: 'Location',
+        title: location_title || 'Location',
         value: event.location || `—`
       }
     ],
@@ -18,7 +22,7 @@ const basic = ({ event }) => {
     [
       {
         kind: 'text',
-        title: 'Summary',
+        title: summary_title || 'Summary',
         value: event.description || ``,
         scaleFont: 1.1
       }
diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx
index 2b7753d..4574a53 100644
--- a/src/components/Timeline.jsx
+++ b/src/components/Timeline.jsx
@@ -341,6 +341,7 @@ class Timeline extends React.Component {
                 onDragEnd={() => { this.onDragEnd() }}
                 categories={categories.map(c => c.id)}
                 features={this.props.features}
+                fallbackLabel={copy[this.props.app.language].timeline.default_categories_label}
               />
               <Handles
                 dims={dims}
diff --git a/src/components/TimelineCategories.jsx b/src/components/TimelineCategories.jsx
index 4fc08cf..def28a4 100644
--- a/src/components/TimelineCategories.jsx
+++ b/src/components/TimelineCategories.jsx
@@ -51,11 +51,11 @@ class TimelineCategories extends React.Component {
   }
 
   render () {
-    const { dims, categories } = this.props
+    const { dims, categories, fallbackLabel } = this.props
     const categoriesExist = categories && categories.length > 0
     const renderedCategories = categoriesExist
       ? this.props.categories.map((cat, idx) => this.renderCategory(cat, idx))
-      : this.renderCategory('Events', 0)
+      : this.renderCategory(fallbackLabel, 0)
 
     return (
       <g class='yAxis'>
diff --git a/src/store/initial.js b/src/store/initial.js
index a1e6f40..7a4d562 100644
--- a/src/store/initial.js
+++ b/src/store/initial.js
@@ -1,7 +1,9 @@
 import { mergeDeepLeft } from 'ramda'
 import global, { colors } from '../common/global'
 import generateCardLayout from '../common/card'
+import copy from '../common/data/copy.json';
 
+const language = process.env.store.app.language;
 const isSmallLaptop = window.innerHeight < 800
 const initial = {
   /*
@@ -77,7 +79,7 @@ const initial = {
       },
       range: [new Date(2001, 2, 23, 12), new Date(2021, 2, 23, 12)],
       rangeLimits: [new Date(1, 1, 1, 1), new Date()],
-      zoomLevels: [
+      zoomLevels: copy[language].timeline.zoomLevels || [
         { label: '20 years', duration: 10512000 },
         { label: '2 years', duration: 1051200 },
         { label: '3 months', duration: 129600 },