Merge branch '28-edit-temperature-screen' into 'master'

Resolve "edit temperature screen"

Closes #28

See merge request bloodyhealth/drip!12

app.js

@@ -1,6 +1,7 @@
 import { createStackNavigator } from 'react-navigation'
 import Home from './home'
-import TemperatureList from './list'
+
+import Temperature from './temperature'
 import Calendar from './calendar'
 import DayView from './day-view'
 import Bleeding from './bleeding'
@@ -11,8 +12,9 @@ YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated'])
 
 export default createStackNavigator({
   home: { screen: Home },
-  temperatureList: { screen: TemperatureList },
+
+  temperature: { screen: Temperature },
   calendar: { screen: Calendar },
   dayView: { screen: DayView },
   bleeding: { screen: Bleeding }
-})
+})

bleeding.js

@@ -15,22 +15,21 @@ import getCycleDay from './get-cycle-day'
 export default class Bleeding extends Component {
   constructor(props) {
     super(props)
-    const cycleDay = props.navigation.state.params.cycleDay
-    let bleedingValue = cycleDay.bleeding && cycleDay.bleeding.value
+    this.cycleDay = props.navigation.state.params.cycleDay
+    let bleedingValue = this.cycleDay.bleeding && this.cycleDay.bleeding.value
     if (! (typeof bleedingValue === 'number') ){
       bleedingValue = -1
     }
     this.state = {
-      cycleDay,
       currentValue: bleedingValue,
-      exclude: cycleDay.bleeding ? cycleDay.bleeding.exclude : false
+      exclude: this.cycleDay.bleeding ? this.cycleDay.bleeding.exclude : false
     }
   }
 
   // TODO display cycle day
   render() {
     const navigate = this.props.navigation.navigate
-    const day = this.state.cycleDay
+    const day = this.cycleDay
     const bleedingRadioProps = [
       {label: labels[0], value: 0 },
       {label: labels[1], value: 1 },
@@ -48,13 +47,13 @@ export default class Bleeding extends Component {
           formHorizontal={true}
           labelHorizontal={false}
           onPress={(itemValue) => {
-            this.setState({ currentValue: itemValue })
+            this.setState({currentValue: itemValue})
           }}
         />
         <Text>Exclude</Text>
         <Switch
           onValueChange={(val) => {
-            this.setState({ exclude: val })
+            this.setState({exclude: val})
           }}
           value={this.state.exclude} />
         <Button

day-view.js

@@ -19,24 +19,38 @@ export default class DayView extends Component {
 
   render() {
     const navigate = this.props.navigation.navigate
-    const day = this.state.cycleDay
-    const bleedingValue = day.bleeding && day.bleeding.value
+    const cycleDay = this.state.cycleDay
+    const bleedingValue = cycleDay.bleeding && cycleDay.bleeding.value
     let bleedingLabel
     if (typeof bleedingValue === 'number') {
       bleedingLabel = `Bleeding: ${labels[bleedingValue]}`
+      if (cycleDay.bleeding.exclude) bleedingLabel += " (Excluded)"
     } else {
-      bleedingLabel = ''
+      bleedingLabel = null
+    }
+    const temperatureValue = cycleDay.temperature && cycleDay.temperature.value
+    let temperatureLabel
+    if (typeof temperatureValue === 'number') {
+      temperatureLabel = `Temperature: ${temperatureValue}`
+      if (cycleDay.temperature.exclude) temperatureLabel += " (Excluded)"
+    } else {
+      temperatureLabel = null
     }
 
     return (
       <View style={styles.container}>
-        <Text style={styles.welcome}>{formatDateForViewHeader(day.date)}</Text>
+        <Text style={styles.welcome}>{formatDateForViewHeader(cycleDay.date)}</Text>
         <Text>Cycle day {getCycleDay()}</Text>
         <Text style={styles.welcome}>{bleedingLabel}</Text>
+        <Text style={styles.welcome}>{temperatureLabel}</Text>
         <Button
-          onPress={() => navigate('bleeding', { cycleDay: day })}
+          onPress={() => navigate('bleeding', { cycleDay })}
           title="Edit bleeding">
         </Button>
+        <Button
+          onPress={() => navigate('temperature', { cycleDay })}
+          title="Edit temperature">
+        </Button>
       </View >
     )
   }

db.js

@@ -1,8 +1,10 @@
 import realm from 'realm'
+import { LocalDate } from 'js-joda'
 
 let db
-let cycleDaysSortedbyTempValueView = []
+let cycleDaysSortedbyDate = []
 let bleedingDaysSortedByDate = []
+let temperatureDaysSortedByDate
 
 const TemperatureSchema = {
   name: 'Temperature',
@@ -46,19 +48,15 @@ async function openDatabase() {
     // we only want this in dev mode
     deleteRealmIfMigrationNeeded: true
   })
-  // just for testing purposes, the highest temperature will be topmost
-  // because I was too layz to make a scroll view
-  cycleDaysSortedbyTempValueView = db.objects('CycleDay').filtered('temperature != null').sorted('temperature.value', true)
+
+  cycleDaysSortedbyDate = db.objects('CycleDay').sorted('date', true)
   bleedingDaysSortedByDate = db.objects('CycleDay').filtered('bleeding != null').sorted('date', true)
+  temperatureDaysSortedByDate = db.objects('CycleDay').filtered('temperature != null').sorted('date', true)
 }
 
-function saveTemperature(date, temperature) {
+function saveTemperature(cycleDay, temperature) {
   db.write(() => {
-    const doc = {
-      date,
-      temperature
-    }
-    db.create('CycleDay', doc)
+    cycleDay.temperature = temperature
   })
 }
 
@@ -80,11 +78,22 @@ function getOrCreateCycleDay(localDate) {
   return result
 }
 
+function getPreviousTemperature(cycleDay) {
+  cycleDay.wrappedDate = LocalDate.parse(cycleDay.date)
+  const winner = temperatureDaysSortedByDate.find(day => {
+    const wrappedDate = LocalDate.parse(day.date)
+    return wrappedDate.isBefore(cycleDay.wrappedDate)
+  })
+  if (!winner) return null
+  return winner.temperature.value
+}
+
 export {
-  cycleDaysSortedbyTempValueView,
+  cycleDaysSortedbyDate,
   openDatabase,
   saveTemperature,
   saveBleeding,
   getOrCreateCycleDay,
-  bleedingDaysSortedByDate
-}
+  bleedingDaysSortedByDate,
+  getPreviousTemperature
+}

home.js

@@ -37,4 +37,4 @@ export default class Home extends Component {
       </View>
     )
   }
-}
+}

list.js

@@ -1,60 +0,0 @@
-import React, { Component } from 'react'
-import {
-  View,
-  Text,
-  Button,
-  TextInput,
-  FlatList,
-  Keyboard
-} from 'react-native'
-
-import * as styles from './styles'
-import { cycleDaysSortedbyTempValueView, saveTemperature } from './db'
-
-export default class Temp extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      currentValue: '',
-      rerenderToggle: false
-    }
-  }
-
-  render() {
-    return (
-      <View style={styles.container}>
-        <TextInput
-          placeholder="Enter your temperature"
-          onChangeText={(val) => {
-            this.setState({currentValue: val})
-          }}
-          keyboardType='numeric'
-          value = {this.state.currentValue}
-        />
-        <Button
-          onPress={() => {
-            console.log(Number(this.state.currentValue))
-            saveTemperature(
-              new Date(),
-              {
-                value: Number(this.state.currentValue),
-                exclude: false
-              }
-            )
-            this.setState({currentValue: ''})
-            // FlatList only reacts to primitive value changes,
-            // this boolean toggle makes sure the list updates
-            this.setState({ reRender: !this.state.rerenderToggle})
-            Keyboard.dismiss()
-          }}
-          title="Save"
-        />
-        <FlatList
-          data = { cycleDaysSortedbyTempValueView }
-          renderItem={({item}) => <Text>{item.temperature.value}</Text>}
-          extraData = { this.state }
-        />
-      </View>
-    )
-  }
-}

temperature.js

@@ -0,0 +1,84 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Text,
+  Button,
+  TextInput,
+  Switch
+} from 'react-native'
+
+import styles from './styles'
+import { saveTemperature, getPreviousTemperature } from './db'
+import { formatDateForViewHeader } from './format'
+import getCycleDay from './get-cycle-day'
+
+export default class Temp extends Component {
+  constructor(props) {
+    super(props)
+    this.cycleDay = props.navigation.state.params.cycleDay
+    let initialValue
+
+    if(this.cycleDay.temperature) {
+      initialValue = this.cycleDay.temperature.value.toString()
+    } else {
+      const prevTemp = getPreviousTemperature(this.cycleDay)
+      initialValue = prevTemp ? prevTemp.toString() : ''
+    }
+
+    this.state = {
+      currentValue: initialValue,
+      exclude: this.cycleDay.temperature ? this.cycleDay.temperature.exclude : false
+    }
+  }
+
+  render() {
+    const navigate = this.props.navigation.navigate
+    const cycleDay = this.cycleDay
+    return (
+      <View style={styles.container}>
+        <Text style={styles.welcome}>{formatDateForViewHeader(cycleDay.date)}</Text>
+        <Text>Cycle day {getCycleDay()}</Text>
+        <Text>Temperature</Text>
+        <TextInput
+          placeholder="Enter temperature"
+          onChangeText={(val) => {
+            this.setState({currentValue: val})
+          }}
+          keyboardType='numeric'
+          value = {this.state.currentValue}
+        />
+        <Text>Exclude</Text>
+        <Switch
+          onValueChange = {(val) => {
+            this.setState({ exclude: val })
+          }}
+          value = { this.state.exclude }
+        />
+        <Button
+          onPress={() => {
+            navigate('dayView', { cycleDay })
+          }}
+          title="Cancel">
+        </Button>
+        <Button
+          onPress={() => {
+            saveTemperature(cycleDay)
+            navigate('dayView', { cycleDay })
+          }}
+          title="Delete entry">
+        </Button>
+        <Button
+          onPress={() => {
+            saveTemperature(cycleDay, {
+              value: Number(this.state.currentValue),
+              exclude: this.state.exclude
+            })
+            navigate('dayView', { cycleDay })
+          }}
+          disabled={ this.state.currentValue === '' }
+          title="Save">
+        </Button>
+      </View>
+    )
+  }
+}