Merge branch '371-bug-back-navigation-doesn-t-wait-for-temperature-range-warning' into 'master'

Await alert result before navigating back

Closes #371 and #373

See merge request bloodyhealth/drip!215

components/cycle-day/symptoms/symptom-view.js

@@ -7,12 +7,20 @@ import { headerTitles } from '../../../i18n/en/labels'
 export default class SymptomView extends Component {
   constructor(props) {
     super()
-    // every specific symptom view provides their own onBackButtonPress method
-    this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.onBackButtonPress.bind(this))
+    this.backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      this.handleBackButtonPressOnSymptomView.bind(this)
+    )
     this.globalBackhandler = props.handleBackButtonPress
     this.date = props.date
   }
 
+  async handleBackButtonPressOnSymptomView() {
+    // every specific symptom view provides their own onBackButtonPress method
+    const stopHere = await this.onBackButtonPress()
+    if (!stopHere) this.globalBackhandler()
+  }
+
   saveSymptomEntry(entry) {
     saveSymptom(this.symptomName, this.date, entry)
   }
@@ -31,10 +39,7 @@ export default class SymptomView extends Component {
         <Header
           title={headerTitles[this.symptomName].toLowerCase()}
           date={this.date}
-          goBack={() => {
-            this.onBackButtonPress()
-            this.globalBackhandler()
-          }}
+          goBack={this.handleBackButtonPressOnSymptomView.bind(this)}
           deleteEntry={() => {
             this.deleteSymptomEntry()
             this.globalBackhandler()

components/cycle-day/symptoms/temperature.js

@@ -55,13 +55,16 @@ export default class Temp extends SymptomView {
 
   symptomName = 'temperature'
 
-  onBackButtonPress() {
+  async onBackButtonPress() {
     if (typeof this.state.temperature != 'string' || this.state.temperature === '') {
       this.deleteSymptomEntry()
       return
     }
 
-    this.checkRangeAndSave()
+    const userWantsToSave = await this.warnUserIfTempOutOfRange()
+    if (!userWantsToSave) return true
+
+    this.saveTemperature()
   }
 
   saveTemperature = () => {
@@ -75,7 +78,7 @@ export default class Temp extends SymptomView {
     this.saveSymptomEntry(dataToSave)
   }
 
-  checkRangeAndSave = () => {
+  warnUserIfTempOutOfRange = async () => {
     const value = Number(this.state.temperature)
     const { min, max } = config.temperatureScale
     const range = { min, max }
@@ -88,18 +91,26 @@ export default class Temp extends SymptomView {
       warningMsg = labels.outOfRangeWarning
     }
 
-    if (warningMsg) {
-      Alert.alert(
-        sharedLabels.warning,
-        warningMsg,
-        [
-          { text: sharedLabels.cancel },
-          { text: sharedLabels.save, onPress: this.saveTemperature}
-        ]
-      )
-    } else {
-      this.saveTemperature()
-    }
+    // RN alert runs asynchronously but doesn't provide a callback, so wrap
+    // it in a promise
+    return new Promise(resolve => {
+      if (warningMsg) {
+        Alert.alert(
+          sharedLabels.warning,
+          warningMsg,
+          [
+            { text: sharedLabels.cancel, onPress: () => {
+              resolve(false)
+            }},
+            { text: sharedLabels.save, onPress: () => {
+              resolve(true)
+            }}
+          ]
+        )
+      } else {
+        resolve(true)
+      }
+    })
   }
 
   setTemperature = (temperature) => {
@@ -136,7 +147,6 @@ export default class Temp extends SymptomView {
               onChangeText={this.setTemperature}
               keyboardType='numeric'
               maxLength={5}
-              onBlur={this.checkRange}
             />
             <AppText style={{ marginLeft: 5 }}>°C</AppText>
           </View>