From 516e3dce809f17f060ae28e43c154e13321e33e2 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Thu, 16 Aug 2018 12:59:26 +0200
Subject: [PATCH] Fix rerender bugs
---
components/chart/chart.js | 25 ++++++++++++++++++-------
components/chart/day-column.js | 26 ++++++++++++++------------
components/chart/dot-and-line.js | 2 +-
components/chart/nfp-lines.js | 5 ++++-
4 files changed, 37 insertions(+), 21 deletions(-)
diff --git a/components/chart/chart.js b/components/chart/chart.js
index f60b63cb..05634100 100644
--- a/components/chart/chart.js
+++ b/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) {
diff --git a/components/chart/day-column.js b/components/chart/day-column.js
index c9fb5fe0..0b5f3af4 100644
--- a/components/chart/day-column.js
+++ b/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}
- rightTemperatureExclude={this.props.rightTemperatureExclude}
- leftY={this.props.leftY}
- leftTemperatureExclude={this.props.leftTemperatureExclude}
+ rightY={rightY}
+ rightTemperatureExclude={rightTemperatureExclude}
+ leftY={leftY}
+ leftTemperatureExclude={leftTemperatureExclude}
key='dotandline'
/>
)
diff --git a/components/chart/dot-and-line.js b/components/chart/dot-and-line.js
index d626c948..626cf02c 100644
--- a/components/chart/dot-and-line.js
+++ b/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
diff --git a/components/chart/nfp-lines.js b/components/chart/nfp-lines.js
index e5265acd..d9f4507f 100644
--- a/components/chart/nfp-lines.js
+++ b/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
--
GitLab