Re-render when bleeding value changes

components/chart.js

@@ -33,7 +33,8 @@ export default class CycleChart extends Component {
     this.xAxisTicks = makeXAxisTicks(cycleDaysToShow)
 
     this.state = {
-      curveCoordinates: this.makeCurveCoordinates()
+      curveCoordinates: this.makeCurveCoordinates(),
+      bleedIconCoordinates: this.makeBleedIconCoordinates()
     }
 
     this.setStateWithNewCurveCoordinates = (function (chartComponent) {
@@ -44,11 +45,21 @@ export default class CycleChart extends Component {
       }
     })(this)
 
+    this.setStateWithNewBleedIconCoordinates = (function (chartComponent) {
+      return function () {
+        chartComponent.setState({
+          bleedIconCoordinates: chartComponent.makeBleedIconCoordinates()
+        })
+      }
+    })(this)
+
     temperatureDaysSortedByDate.addListener(this.setStateWithNewCurveCoordinates)
+    bleedingDaysSortedByDate.addListener(this.setStateWithNewBleedIconCoordinates)
   }
 
   componentWillUnmount() {
     temperatureDaysSortedByDate.removeListener(this.setStateWithNewCurveCoordinates)
+    temperatureDaysSortedByDate.removeListener(this.setStateWithNewBleedIconCoordinates)
   }
 
   passDateToDayView(dateString) {
@@ -84,14 +95,8 @@ export default class CycleChart extends Component {
   }
 
   placeBleedingSymbolsOnColumns() {
-    return bleedingDaysSortedByDate
+    return this.state.bleedIconCoordinates.map(x => {
-      .filter(cycleDayIsNotInTheFuture())
+      return (<Circle key={x} cx={x} cy="50" r="7" fill="red" />)
-      .map(day => {
-        const match = this.xAxisTicks.find(tick => {
-          return tick.label === day.date
-        })
-        const x = match.rightOffset + columnWidth / 2
-        return (<Circle key={day.date} cx={x} cy="50" r="7" fill="red" />)
     })
   }
 
@@ -102,6 +107,17 @@ export default class CycleChart extends Component {
       .map(makeCurveCoordinatesForChunk.bind(this))
   }
 
+  makeBleedIconCoordinates() {
+    return bleedingDaysSortedByDate
+      .filter(cycleDayIsNotInTheFuture())
+      .map(day => {
+        const match = this.xAxisTicks.find(tick => {
+          return tick.label === day.date
+        })
+        return match.rightOffset + columnWidth / 2
+      })
+  }
+
   makeTemperatureCurves() {
     return this.state.curveCoordinates.map(makeCurveFromPoints)
   }