Clean up Timeline component

src/components/Timeline.jsx

@@ -4,6 +4,7 @@ import * as selectors from '../selectors';
 
 import copy from '../js/data/copy.json';
 import { formatterWithYear } from '../js/utilities';
+import TimelineHeader from './presentational/TimelineHeader';
 import TimelineLogic from '../js/timeline/timeline.js';
 
 class Timeline extends React.Component {
@@ -15,18 +16,12 @@ class Timeline extends React.Component {
   }
 
   componentDidMount() {
-    const ui = {
-      dom: this.props.dom
-    }
-
-    this.timeline = new TimelineLogic(this.props.app, ui, this.props.methods);
+    this.timeline = new TimelineLogic(this.props.app, this.props.ui, this.props.methods);
     this.timeline.update(this.props.domain, this.props.app);
-    this.timeline.render(this.props.domain);
   }
 
   componentWillReceiveProps(nextProps) {
     this.timeline.update(nextProps.domain, nextProps.app);
-    this.timeline.render(nextProps.domain);
   }
 
   onClickArrow() {
@@ -35,34 +30,19 @@ class Timeline extends React.Component {
     });
   }
 
-  renderLabels() {
-    const labels = copy[this.props.language].timeline.labels;
-    return this.props.categories.map((label) => {
-      const groupLen = this.props.categories.length
-      return (<div className="timeline-label">{label}</div>);
-    });
-  }
-
   render() {
-    const labels_title_lang = copy[this.props.app.language].timeline.labels_title;
-    const info_lang = copy[this.props.app.language].timeline.info;
     let classes = `timeline-wrapper ${(this.state.isFolded) ? ' folded' : ''}`;
-    const date0 = formatterWithYear(this.props.app.timerange[0]);
-    const date1 = formatterWithYear(this.props.app.timerange[1]);
 
     return (
       <div className={classes}>
-        <div className="timeline-header">
-          <div className="timeline-toggle" onClick={() => this.onClickArrow()}>
-            <p><i className="arrow-down"></i></p>
-          </div>
-          <div className="timeline-info">
-            <p>{info_lang}</p>
-            <p>{date0} - {date1}</p>
-          </div>
-        </div>
+        <TimelineHeader
+          title={copy[this.props.app.language].timeline.info}
+          date0={formatterWithYear(this.props.app.timerange[0])}
+          date1={formatterWithYear(this.props.app.timerange[1])}
+          onClick={() => { this.onClickArrow(); }}
+        />
         <div className="timeline-content">
-          <div id="timeline" className="timeline" />
+          <div id={this.props.ui.dom.timeline} className="timeline" />
         </div>
       </div>
     );
@@ -82,7 +62,9 @@ function mapStateToProps(state) {
       language: state.app.language,
       zoomLevels: state.app.zoomLevels
     },
-    dom: state.ui.dom,
+    ui: {
+      dom: state.ui.dom,
+    }
   }
 }
 

src/components/presentational/TimelineHeader.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const TimelineHeader = ({ title, date0, date1, onClick }) => (
+  <div className="timeline-header">
+    <div className="timeline-toggle" onClick={() => onClick()}>
+      <p><i className="arrow-down"></i></p>
+    </div>
+    <div className="timeline-info">
+      <p>{title}</p>
+      <p>{date0} - {date1}</p>
+    </div>
+  </div>
+);
+
+export default TimelineHeader;