From c20cadf041f90d3cef45605b70242a71246ceff3 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Fri, 22 Jun 2018 15:43:32 +0200
Subject: [PATCH] Re-render chart on temp change

---
 components/chart.js | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/components/chart.js b/components/chart.js
index dad86b6..8dfeab2 100644
--- a/components/chart.js
+++ b/components/chart.js
@@ -31,6 +31,24 @@ export default class CycleChart extends Component {
   constructor(props) {
     super(props)
     this.xAxisTicks = makeXAxisTicks(cycleDaysToShow)
+
+    this.state = {
+      curveCoordinates: this.makeCurveCoordinates()
+    }
+
+    this.setStateWithNewCurveCoordinates = (function (chartComponent) {
+      return function () {
+        chartComponent.setState({
+          curveCoordinates: chartComponent.makeCurveCoordinates()
+        })
+      }
+    })(this)
+
+    temperatureDaysSortedByDate.addListener(this.setStateWithNewCurveCoordinates)
+  }
+
+  componentWillUnmount() {
+    temperatureDaysSortedByDate.removeListener(this.setStateWithNewCurveCoordinates)
   }
 
   passDateToDayView(dateString) {
@@ -77,12 +95,15 @@ export default class CycleChart extends Component {
       })
   }
 
-  makeTemperatureCurves() {
+  makeCurveCoordinates() {
     return temperatureDaysSortedByDate
       .filter(cycleDayIsNotInTheFuture())
       .reduce(separateIntoContinousChunks, [[]])
       .map(makeCurveCoordinatesForChunk.bind(this))
-      .map(makeCurveFromPoints)
+  }
+
+  makeTemperatureCurves() {
+    return this.state.curveCoordinates.map(makeCurveFromPoints)
   }
 
   componentDidMount() {
@@ -195,9 +216,8 @@ function makeCurveFromPoints(curveChunkPoints, i) {
     .join(' ')
 
   return (
-    <G>
+    <G key={i}>
       <Polyline
-        key={i}
         points={pointsInPolyLineFormat}
         fill="none"
         stroke={curveColor}