Add symptom view component with back button listener

components/cycle-day/symptoms/bleeding.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import {
   View,
   Switch,
@@ -10,8 +10,9 @@ import { bleeding } from '../../../i18n/en/cycle-day'
 import ActionButtonFooter from './action-button-footer'
 import SelectTabGroup from '../select-tab-group'
 import SymptomSection from './symptom-section'
+import SymptomView from './symptom-view'
 
-export default class Bleeding extends Component {
+export default class Bleeding extends SymptomView {
   constructor(props) {
     super(props)
     const cycleDay = props.cycleDay
@@ -22,6 +23,13 @@ export default class Bleeding extends Component {
     }
   }
 
+  save() {
+    saveSymptom('bleeding', this.props.date, {
+      value: this.state.currentValue,
+      exclude: this.state.exclude
+    })
+  }
+
   render() {
     const bleedingRadioProps = [
       { label: bleeding.labels[0], value: 0 },
@@ -59,13 +67,6 @@ export default class Bleeding extends Component {
           symptom='bleeding'
           date={this.props.date}
           currentSymptomValue={this.bleeding}
-          saveAction={() => {
-            saveSymptom('bleeding', this.props.date, {
-              value: this.state.currentValue,
-              exclude: this.state.exclude
-            })
-          }}
-          saveDisabled={typeof this.state.currentValue != 'number'}
           navigate={this.props.navigate}
         />
       </View>

components/cycle-day/symptoms/cervix.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import {
   View,
   Switch,
@@ -10,15 +10,25 @@ import { cervix as labels } from '../../../i18n/en/cycle-day'
 import ActionButtonFooter from './action-button-footer'
 import SelectTabGroup from '../select-tab-group'
 import SymptomSection from './symptom-section'
+import SymptomView from './symptom-view'
 
-export default class Cervix extends Component {
+export default class Cervix extends SymptomView {
   constructor(props) {
-    super(props)
+    super()
     const cycleDay = props.cycleDay
     this.cervix = cycleDay && cycleDay.cervix
     this.state = this.cervix ? this.cervix : {}
   }
 
+  save() {
+    saveSymptom('cervix', this.props.date, {
+      opening: this.state.opening,
+      firmness: this.state.firmness,
+      position: this.state.position,
+      exclude: Boolean(this.state.exclude)
+    })
+  }
+
   render() {
     const cervixOpeningRadioProps = [
       { label: labels.opening.categories[0], value: 0 },

components/cycle-day/symptoms/desire.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import {
   View,
   ScrollView
@@ -9,16 +9,21 @@ import { intensity, desire } from '../../../i18n/en/cycle-day'
 import ActionButtonFooter from './action-button-footer'
 import SelectTabGroup from '../select-tab-group'
 import SymptomSection from './symptom-section'
+import SymptomView from './symptom-view'
 
-export default class Desire extends Component {
+export default class Desire extends SymptomView {
   constructor(props) {
-    super(props)
+    super()
     const cycleDay = props.cycleDay
     this.desire = cycleDay && cycleDay.desire
     const desireValue = this.desire && this.desire.value
     this.state = { currentValue: desireValue }
   }
 
+  save() {
+    saveSymptom('desire', this.props.date, { value: this.state.currentValue })
+  }
+
   render() {
     const desireRadioProps = [
       { label: intensity[0], value: 0 },
@@ -43,9 +48,6 @@ export default class Desire extends Component {
           symptom='desire'
           date={this.props.date}
           currentSymptomValue={this.desire}
-          saveAction={() => {
-            saveSymptom('desire', this.props.date, { value: this.state.currentValue })
-          }}
           saveDisabled={typeof this.state.currentValue != 'number'}
           navigate={this.props.navigate}
         />

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

@@ -1,11 +1,12 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { ScrollView } from 'react-native'
 import AppText from '../../app-text'
 import labels from '../../../i18n/en/symptom-info.js'
 import FramedSegment from '../../framed-segment'
 import styles from '../../../styles/index'
+import SymptomView from './symptom-view'
 
-export default class InfoSymptom extends Component {
+export default class InfoSymptom extends SymptomView {
   render() {
     const symptomView = this.props.symptomView
     const symptomMapping = {

components/cycle-day/symptoms/mood.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import {
   ScrollView,
   TextInput,
@@ -10,10 +10,11 @@ import ActionButtonFooter from './action-button-footer'
 import SelectBoxGroup from '../select-box-group'
 import SymptomSection from './symptom-section'
 import styles from '../../../styles'
+import SymptomView from './symptom-view'
 
-export default class Mood extends Component {
+export default class Mood extends SymptomView {
   constructor(props) {
-    super(props)
+    super()
     const cycleDay = props.cycleDay
     if (cycleDay && cycleDay.mood) {
       this.state = Object.assign({}, cycleDay.mood)
@@ -25,6 +26,14 @@ export default class Mood extends Component {
     }
   }
 
+  save() {
+    const copyOfState = Object.assign({}, this.state)
+    if (!copyOfState.other) {
+      copyOfState.note = null
+    }
+    saveSymptom('mood', this.props.date, copyOfState)
+  }
+
   toggleState = (key) => {
     const curr = this.state[key]
     this.setState({[key]: !curr})
@@ -62,13 +71,6 @@ export default class Mood extends Component {
           symptom='mood'
           date={this.props.date}
           currentSymptomValue={this.state}
-          saveAction={() => {
-            const copyOfState = Object.assign({}, this.state)
-            if (!copyOfState.other) {
-              copyOfState.note = null
-            }
-            saveSymptom('mood', this.props.date, copyOfState)
-          }}
           saveDisabled={Object.values(this.state).every(value => !value)}
           navigate={this.props.navigate}
         />

components/cycle-day/symptoms/mucus.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import {
   View,
   Switch,
@@ -11,15 +11,27 @@ import computeNfpValue from '../../../lib/nfp-mucus'
 import ActionButtonFooter from './action-button-footer'
 import SelectTabGroup from '../select-tab-group'
 import SymptomSection from './symptom-section'
+import SymptomView from './symptom-view'
 
-export default class Mucus extends Component {
+export default class Mucus extends SymptomView {
   constructor(props) {
-    super(props)
+    super()
     const cycleDay = props.cycleDay
     this.mucus = cycleDay && cycleDay.mucus
     this.state = this.mucus ? this.mucus : {}
   }
 
+  save() {
+    const feeling = this.state.feeling
+    const texture = this.state.texture
+    saveSymptom('mucus', this.props.date, {
+      feeling,
+      texture,
+      value: computeNfpValue(feeling, texture),
+      exclude: Boolean(this.state.exclude)
+    })
+  }
+
   render() {
     const mucusFeeling = [
       { label: labels.feeling.categories[0], value: 0 },
@@ -73,16 +85,6 @@ export default class Mucus extends Component {
           symptom='mucus'
           date={this.props.date}
           currentSymptomValue={this.mucus}
-          saveAction={() => {
-            const feeling = this.state.feeling
-            const texture = this.state.texture
-            saveSymptom('mucus', this.props.date, {
-              feeling,
-              texture,
-              value: computeNfpValue(feeling, texture),
-              exclude: Boolean(this.state.exclude)
-            })
-          }}
           navigate={this.props.navigate}
         />
       </View>

components/cycle-day/symptoms/note.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import {
   View,
   ScrollView,
@@ -11,8 +11,9 @@ import ActionButtonFooter from './action-button-footer'
 import SymptomSection from './symptom-section'
 import { noteExplainer } from '../../../i18n/en/cycle-day'
 import { shared as sharedLabels } from '../../../i18n/en/labels'
+import SymptomView from './symptom-view'
 
-export default class Note extends Component {
+export default class Note extends SymptomView {
   constructor(props) {
     super(props)
     const cycleDay = props.cycleDay
@@ -23,6 +24,12 @@ export default class Note extends Component {
     }
   }
 
+  save() {
+    saveSymptom('note', this.props.date, {
+      value: this.state.currentValue
+    })
+  }
+
   render() {
     return (
       <View style={{ flex: 1 }}>
@@ -45,11 +52,6 @@ export default class Note extends Component {
           symptom='note'
           date={this.props.date}
           currentSymptomValue={this.note}
-          saveAction={() => {
-            saveSymptom('note', this.props.date, {
-              value: this.state.currentValue
-            })
-          }}
           saveDisabled={!this.state.currentValue}
           navigate={this.props.navigate}
         />

components/cycle-day/symptoms/pain.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import {
   ScrollView,
   TextInput,
@@ -11,8 +11,9 @@ import ActionButtonFooter from './action-button-footer'
 import SelectBoxGroup from '../select-box-group'
 import SymptomSection from './symptom-section'
 import styles from '../../../styles'
+import SymptomView from './symptom-view'
 
-export default class Pain extends Component {
+export default class Pain extends SymptomView {
   constructor(props) {
     super(props)
     const cycleDay = props.cycleDay
@@ -26,6 +27,14 @@ export default class Pain extends Component {
     }
   }
 
+  save() {
+    const copyOfState = Object.assign({}, this.state)
+    if (!copyOfState.other) {
+      copyOfState.note = null
+    }
+    saveSymptom('pain', this.props.date, copyOfState)
+  }
+
   toggleState = (key) => {
     const curr = this.state[key]
     this.setState({[key]: !curr})
@@ -63,13 +72,6 @@ export default class Pain extends Component {
           symptom='pain'
           date={this.props.date}
           currentSymptomValue={this.state}
-          saveAction={() => {
-            const copyOfState = Object.assign({}, this.state)
-            if (!copyOfState.other) {
-              copyOfState.note = null
-            }
-            saveSymptom('pain', this.props.date, copyOfState)
-          }}
           saveDisabled={Object.values(this.state).every(value => !value)}
           navigate={this.props.navigate}
         />

components/cycle-day/symptoms/sex.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import {
   TextInput,
   View,
@@ -11,8 +11,9 @@ import { shared as sharedLabels } from '../../../i18n/en/labels'
 import ActionButtonFooter from './action-button-footer'
 import SelectBoxGroup from '../select-box-group'
 import SymptomSection from './symptom-section'
+import SymptomView from './symptom-view'
 
-export default class Sex extends Component {
+export default class Sex extends SymptomView {
   constructor(props) {
     super(props)
     const cycleDay = props.cycleDay
@@ -26,6 +27,14 @@ export default class Sex extends Component {
     if (this.state.note) this.state.other = true
   }
 
+  save() {
+    const copyOfState = Object.assign({}, this.state)
+    if (!copyOfState.other) {
+      copyOfState.note = null
+    }
+    saveSymptom('sex', this.props.date, copyOfState)
+  }
+
   toggleState = (key) => {
     const curr = this.state[key]
     this.setState({[key]: !curr})
@@ -75,13 +84,6 @@ export default class Sex extends Component {
           symptom='sex'
           date={this.props.date}
           currentSymptomValue={this.state}
-          saveAction={() => {
-            const copyOfState = Object.assign({}, this.state)
-            if (!copyOfState.other) {
-              copyOfState.note = null
-            }
-            saveSymptom('sex', this.props.date, copyOfState)
-          }}
           saveDisabled={Object.values(this.state).every(value => !value)}
           navigate={this.props.navigate}
         />

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

@@ -0,0 +1,13 @@
+import { Component } from 'react'
+import { BackHandler } from 'react-native'
+
+export default class SymptomView extends Component {
+  constructor() {
+    super()
+    this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.save.bind(this))
+  }
+
+  componentWillUnmount() {
+    this.backHandler.remove()
+  }
+}

components/cycle-day/symptoms/temperature.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import {
   View,
   Switch,
@@ -20,10 +20,11 @@ import config from '../../../config'
 import AppTextInput from '../../app-text-input'
 import AppText from '../../app-text'
 import SymptomSection from './symptom-section'
+import SymptomView from './symptom-view'
 
 const minutes = ChronoUnit.MINUTES
 
-export default class Temp extends Component {
+export default class Temp extends SymptomView {
   constructor(props) {
     super(props)
     const cycleDay = props.cycleDay
@@ -45,7 +46,7 @@ export default class Temp extends Component {
         this.state.temperature = `${this.state.temperature}.0`
       }
     } else {
-      const prevTemp = getPreviousTemperature(this.props.date)
+      const prevTemp = getPreviousTemperature(props.date)
       if (prevTemp) {
         this.state.temperature = prevTemp.toString()
         this.state.isSuggestion = true
@@ -53,6 +54,10 @@ export default class Temp extends Component {
     }
   }
 
+  save() {
+    this.checkRangeAndSave()
+  }
+
   saveTemperature = () => {
     const dataToSave = {
       value: Number(this.state.temperature),
@@ -182,7 +187,6 @@ export default class Temp extends Component {
           symptom='temperature'
           date={this.props.date}
           currentSymptomValue={this.temperature}
-          saveAction={() => this.checkRangeAndSave()}
           saveDisabled={
             this.state.temperature === '' ||
             isNaN(Number(this.state.temperature)) ||