From a7990088ab2f8daa4099a9386a3936205f941c64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20Sp=C3=B6ttel?=
 <1682504+fspoettel@users.noreply.github.com>
Date: Tue, 22 Mar 2022 13:43:06 +0100
Subject: [PATCH] feat(Timeline): add event count to title

---
 src/common/data/copy.json       |  4 ++--
 src/components/time/Timeline.js | 15 ++++++++++++---
 src/selectors/index.js          |  9 +++++++++
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/common/data/copy.json b/src/common/data/copy.json
index c121446..e2ba701 100644
--- a/src/common/data/copy.json
+++ b/src/common/data/copy.json
@@ -65,7 +65,7 @@
         "Testimonio Grupo 03",
         "Otras categorias"
       ],
-      "info": "Eventos ocurridos entre",
+      "info": "%n eventos ocurridos entre",
       "default_categories_label": "Eventos"
     },
     "cardstack": {
@@ -160,7 +160,7 @@
         "Testimony Group 03",
         "Other"
       ],
-      "info": "Seeing events that occurred between",
+      "info": "Seeing %n events that occurred between",
       "default_categories_label": ""
     },
     "cardstack": {
diff --git a/src/components/time/Timeline.js b/src/components/time/Timeline.js
index 6581985..4eda796 100644
--- a/src/components/time/Timeline.js
+++ b/src/components/time/Timeline.js
@@ -28,7 +28,9 @@ class Timeline extends React.Component {
     this.onSelect = this.onSelect.bind(this);
     this.svgRef = React.createRef();
     this.state = {
-      isFolded: (searchParams.has('timeline') && searchParams.get('timeline') === 'false'),
+      isFolded:
+        searchParams.has("timeline") &&
+        searchParams.get("timeline") === "false",
       dims: props.dimensions,
       scaleX: null,
       scaleY: null,
@@ -359,7 +361,8 @@ class Timeline extends React.Component {
   }
 
   render() {
-    const { isNarrative, app } = this.props;
+    const { isNarrative, app, domain } = this.props;
+
     let classes = `timeline-wrapper ${this.state.isFolded ? " folded" : ""}`;
     classes += app.narrative !== null ? " narrative-mode" : "";
     const { dims } = this.state;
@@ -372,6 +375,11 @@ class Timeline extends React.Component {
     const contentHeight = { height: dims.contentHeight };
     const { activeCategories: categories } = this.props;
 
+    const title = copy[this.props.app.language].timeline.info.replace(
+      "%n",
+      domain.eventCountInTimeRange
+    );
+
     return (
       <div
         className={classes}
@@ -380,7 +388,7 @@ class Timeline extends React.Component {
         tabIndex="1"
       >
         <Header
-          title={copy[this.props.app.language].timeline.info}
+          title={title}
           from={this.state.timerange[0]}
           to={this.state.timerange[1]}
           onClick={() => {
@@ -489,6 +497,7 @@ function mapStateToProps(state) {
     activeCategories: selectors.getActiveCategories(state),
     domain: {
       events: selectors.selectStackedEvents(state),
+      eventCountInTimeRange: selectors.selectEventCountInTimeRange(state),
       projects: selectors.selectProjects(state),
       narratives: state.domain.narratives,
     },
diff --git a/src/selectors/index.js b/src/selectors/index.js
index a5e3fe9..63ea94a 100644
--- a/src/selectors/index.js
+++ b/src/selectors/index.js
@@ -127,6 +127,15 @@ export const selectEvents = createSelector(
   }
 );
 
+/**
+ * Of all available events, select only those that fall within the currently selected time range.
+ * Since `events` is a sparse array, we need to reduce the array in order to count.
+ */
+export const selectEventCountInTimeRange = createSelector(
+  [selectEvents],
+  (events, timeRange) => events.reduce((acc) => acc + 1, 0)
+);
+
 /**
  * Of all available events, selects those that fall within the time range,
  * and if filters are being used, select them if their filters are enabled