Use settings from observable in chart

components/chart/chart.js

@@ -2,13 +2,12 @@ import React, { Component } from 'react'
 import { View, FlatList } from 'react-native'
 import range from 'date-range'
 import { LocalDate } from 'js-joda'
-import { yAxis, normalizeToScale, horizontalGrid } from './y-axis'
+import { makeYAxisLabels, normalizeToScale, makeHorizontalGrid } from './y-axis'
 import setUpFertilityStatusFunc from './nfp-lines'
 import DayColumn from './day-column'
 import { getCycleDay, cycleDaysSortedByDate, getAmountOfCycleDays } from '../../db'
 import styles from './styles'
 
-const yAxisView = <View {...styles.yAxis}>{yAxis.labels}</View>
 
 export default class CycleChart extends Component {
   constructor(props) {
@@ -25,6 +24,7 @@ export default class CycleChart extends Component {
         />
       )
     }
+    this.yAxisView = <View {...styles.yAxis}>{makeYAxisLabels()}</View>
 
     this.reCalculateChartInfo = (function(Chart) {
       return function() {
@@ -42,8 +42,8 @@ export default class CycleChart extends Component {
   render() {
     return (
       <View style={{ flexDirection: 'row', marginTop: 50 }}>
-        {yAxisView}
-        {horizontalGrid}
+        {this.yAxisView}
+        {makeHorizontalGrid()}
         {<FlatList
           horizontal={true}
           inverted={true}

components/chart/y-axis.js

@@ -2,40 +2,30 @@ import React from 'react'
 import { Text, View } from 'react-native'
 import config from '../../config'
 import styles from './styles'
+import { tempScaleObservable } from '../../local-storage'
 
-function makeYAxis() {
-  const scale = config.temperatureScale
-  const scaleMin = scale.low
-  const scaleMax = scale.high
-  const numberOfTicks = (scaleMax - scaleMin) * (1 / scale.units)
-  const tickDistance = config.chartHeight / numberOfTicks
+export function makeYAxisLabels() {
+  const units = config.temperatureScale.units
+  const scaleMax = tempScaleObservable.value.max
 
-  const tickPositions = []
-  const labels = []
-  // for style reasons, we don't want the first and last tick
-  for (let i = 1; i < numberOfTicks - 1; i++) {
-    const y = tickDistance * i
+  return getTickPositions().map((y, i) => {
     const style = styles.yAxisLabel
     // this eyeballing is sadly necessary because RN does not
     // support percentage values for transforms, which we'd need
     // to reliably place the label vertically centered to the grid
     style.top = y - 8
-    labels.push(
+    return (
       <Text
         style={{ ...style }}
         key={i}>
-        {scaleMax - i * scale.units}
+        {scaleMax - i * units}
       </Text>
     )
-    tickPositions.push(y)
+  })
 }
 
-  return {labels, tickPositions}
-}
-
-export const yAxis = makeYAxis()
-
-export const horizontalGrid = yAxis.tickPositions.map(tick => {
+export function makeHorizontalGrid() {
+  return getTickPositions().map(tick => {
     return (
       <View
         top={tick}
@@ -44,6 +34,22 @@ export const horizontalGrid = yAxis.tickPositions.map(tick => {
       />
     )
   })
+}
+
+function getTickPositions() {
+  const units = config.temperatureScale.units
+  const scaleMin = tempScaleObservable.value.min
+  const scaleMax = tempScaleObservable.value.max
+  const numberOfTicks = (scaleMax - scaleMin) * (1 / units)
+  const tickDistance = config.chartHeight / numberOfTicks
+
+  const tickPositions = []
+  // for style reasons, we don't want the first and last tick
+  for (let i = 1; i < numberOfTicks - 1; i++) {
+    tickPositions.push(tickDistance * i)
+  }
+  return tickPositions
+}
 
 export function normalizeToScale(temp) {
   const scale = config.temperatureScale

components/settings.js

@@ -15,7 +15,7 @@ import config from '../config'
 import { settings as labels } from './labels'
 import getDataAsCsvDataUri from '../lib/import-export/export-to-csv'
 import importCsv from '../lib/import-export/import-from-csv'
-import { getTempScale, saveTempScale } from '../local-storage'
+import { tempScaleObservable, saveTempScale } from '../local-storage'
 
 export default class Settings extends Component {
   render() {
@@ -62,23 +62,7 @@ export default class Settings extends Component {
 class TempSlider extends Component {
   constructor(props) {
     super(props)
-    this.state = {
-      min: config.temperatureScale.defaultLow,
-      max: config.temperatureScale.defaultHigh
-    }
-    this.getStoredScale()
-  }
-
-  async getStoredScale() {
-    let storedScale
-    try {
-      storedScale = await getTempScale()
-    } catch(err) {
-      alertError(labels.tempScale.loadError)
-      return
-    }
-    if (!storedScale) return
-    this.setState(storedScale)
+    this.state = Object.assign({}, tempScaleObservable.value)
   }
 
   onValuesChange = (values) => {

local-storage/index.js

@@ -1,13 +1,22 @@
 import { AsyncStorage } from 'react-native'
 import Observable from 'obv'
+import config from '../config'
 
 export const tempScaleObservable = Observable()
-getTempScale()
+setTempScaleInitially()
 
-async function getTempScale() {
+async function setTempScaleInitially() {
   const result = await AsyncStorage.getItem('tempScale')
-  if (!result) return result
-  tempScaleObservable.set(JSON.parse(result))
+  let value
+  if (result) {
+    value = JSON.parse(result)
+  } else {
+    value = {
+      min: config.temperatureScale.defaultLow,
+      max: config.temperatureScale.defaultHigh
+    }
+  }
+  tempScaleObservable.set(value)
 }
 
 export async function saveTempScale(scale) {