Fix rerender bugs

components/chart/chart.js

@@ -3,6 +3,7 @@ import { View, FlatList } from 'react-native'
 import range from 'date-range'
 import { LocalDate } from 'js-joda'
 import { yAxis, normalizeToScale, horizontalGrid } from './y-axis'
+import setUpFertilityStatusFunc from './nfp-lines'
 import DayColumn from './day-column'
 import { getCycleDay, cycleDaysSortedByDate, getAmountOfCycleDays } from '../../db'
 import styles from './styles'
@@ -13,7 +14,7 @@ export default class CycleChart extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      columns: makeColumnInfo(),
+      columns: makeColumnInfo(setUpFertilityStatusFunc()),
     }
     this.renderColumn = ({item, index}) => {
       return (
@@ -21,14 +22,13 @@ export default class CycleChart extends Component {
           {...item}
           index={index}
           navigate={this.props.navigation.navigate}
-          {...getInfoForNeighborColumns(index, this.state.columns)}
         />
       )
     }
 
     this.reCalculateChartInfo = (function(Chart) {
       return function() {
-        Chart.setState({columns: makeColumnInfo()})
+        Chart.setState({columns: makeColumnInfo(setUpFertilityStatusFunc())})
       }
     })(this)
 
@@ -60,7 +60,7 @@ export default class CycleChart extends Component {
   }
 }
 
-function makeColumnInfo() {
+function makeColumnInfo(getFhmAndLtlInfo) {
   let amountOfCycleDays = getAmountOfCycleDays()
   // if there's not much data yet, we want to show at least 30 days on the chart
   if (amountOfCycleDays < 30) {
@@ -77,7 +77,7 @@ function makeColumnInfo() {
     ).toString()
   })
 
-  return xAxisDates.map(dateString => {
+  const columns = xAxisDates.map(dateString => {
     const cycleDay = getCycleDay(dateString)
     const symptoms = ['temperature', 'mucus', 'bleeding'].reduce((acc, symptom) => {
       acc[symptom] = cycleDay && cycleDay[symptom] && cycleDay[symptom].value
@@ -88,9 +88,15 @@ function makeColumnInfo() {
     return {
       dateString,
       y: symptoms.temperature ? normalizeToScale(symptoms.temperature) : null,
-      ...symptoms
+      ...symptoms,
+      ...getFhmAndLtlInfo(dateString, symptoms.temperature)
     }
   })
+
+  return columns.map((col, i) => {
+    const info = getInfoForNeighborColumns(i, columns)
+    return Object.assign(col, info)
+  })
 }
 
 function getTodayAndPreviousDays(n) {
@@ -105,7 +111,12 @@ function getTodayAndPreviousDays(n) {
 }
 
 function getInfoForNeighborColumns(index, cols) {
-  const ret = {}
+  const ret = {
+    rightY: null,
+    rightTemperatureExclude: null,
+    leftY: null,
+    leftTemperatureExclude: null
+  }
   const right = index > 0 ? cols[index - 1] : undefined
   const left = index < cols.length - 1 ? cols[index + 1] : undefined
   if (right && right.y) {

components/chart/day-column.js

@@ -7,12 +7,10 @@ import styles from './styles'
 import config from './config'
 import { getOrCreateCycleDay } from '../../db'
 import cycleModule from '../../lib/cycle'
-import setUpFertilityStatusFunc from './nfp-lines'
 import DotAndLine from './dot-and-line'
 
 const getCycleDayNumber = cycleModule().getCycleDayNumber
 const label = styles.column.label
-const getFhmAndLtlInfo = setUpFertilityStatusFunc()
 
 export default class DayColumn extends Component {
   passDateToDayView(dateString) {
@@ -28,12 +26,16 @@ export default class DayColumn extends Component {
     const {
       dateString,
       y,
-      temperature,
       temperatureExclude,
       bleeding,
-      mucus
+      mucus,
+      drawFhmLine,
+      drawLtlAt,
+      rightY,
+      rightTemperatureExclude,
+      leftY,
+      leftTemperatureExclude
     } = this.props
-    const nfpLineInfo = getFhmAndLtlInfo(dateString, temperature)
 
     const columnElements = []
     if (typeof bleeding === 'number') {
@@ -65,7 +67,7 @@ export default class DayColumn extends Component {
       columnElements.push(mucusIcon)
     }
 
-    if(nfpLineInfo.drawFhmLine) {
+    if(drawFhmLine) {
       const fhmLine = (<View
         position = 'absolute'
         top={100}
@@ -77,11 +79,11 @@ export default class DayColumn extends Component {
       columnElements.push(fhmLine)
     }
 
-    if(nfpLineInfo.drawLtlAt) {
+    if(drawLtlAt) {
       const ltlLine = (<View
         position = 'absolute'
         width={'100%'}
-        top={nfpLineInfo.drawLtlAt}
+        top={drawLtlAt}
         {...styles.nfpLine}
         key='ltl'
       />)
@@ -93,10 +95,10 @@ export default class DayColumn extends Component {
         <DotAndLine
           y={y}
           exclude={temperatureExclude}
-          rightY={this.props.rightY}
+          rightY={rightY}
-          rightTemperatureExclude={this.props.rightTemperatureExclude}
+          rightTemperatureExclude={rightTemperatureExclude}
-          leftY={this.props.leftY}
+          leftY={leftY}
-          leftTemperatureExclude={this.props.leftTemperatureExclude}
+          leftTemperatureExclude={leftTemperatureExclude}
           key='dotandline'
         />
       )

components/chart/dot-and-line.js

@@ -46,7 +46,7 @@ function makeLine(leftY, rightY, direction, excludeLine) {
   const lineStyle = excludeLine ? styles.curveExcluded : styles.curve
   // hypotenuse, we add 3px for good measure, because otherwise the lines
   // don't quite touch at the day border
-  const h = (colWidth / 2) / Math.cos(angle) + 3
+  const h = (colWidth / 2) / Math.cos(angle) + 10
   // the rotation by default rotates from the middle of the line,
   // but we want the transform origin to be at its beginning
   // react native doesn't have transformOrigin, so we do this manually

components/chart/nfp-lines.js

@@ -50,7 +50,10 @@ export default function () {
   }
 
   return function(dateString, temperature) {
-    const ret = {}
+    const ret = {
+      drawLtlAt: null,
+      drawFhmLine: false
+    }
     if (!cycle.status && !cycle.noMoreCycles) updateCurrentCycle(dateString)
     if (cycle.noMoreCycles) return ret