Replace action button footer in remaining symptom views

components/cycle-day/symptoms/temperature.js

@@ -11,6 +11,7 @@ import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
 import { getPreviousTemperature, saveSymptom } from '../../../db'
 import styles from '../../../styles'
 import { LocalTime, ChronoUnit } from 'js-joda'
+import ActionButtonFooter from './action-button-footer'
 
 const MINUTES = ChronoUnit.MINUTES
 
@@ -37,72 +38,70 @@ export default class Temp extends Component {
       time: this.time || LocalTime.now().truncatedTo(MINUTES).toString(),
       isTimePickerVisible: false
     }
-
-    props.setActionButtonState({
-      symptom : 'temperature',
-      cycleDay: props.cycleDay,
-      saveAction: () => {
-        const dataToSave = {
-          value: Number(this.state.currentValue),
-          exclude: this.state.exclude,
-          time: this.state.time
-        }
-        saveSymptom('temperature', props.cycleDay, dataToSave)
-      },
-      saveDisabled: this.state.currentValue === '' || isInvalidTime(this.state.time)
-    })
-  }
-
-  componentWillUnmount() {
-    this.props.unsetActionButtonState()
   }
 
   render() {
     return (
-      <View style={styles.symptomEditView}>
-        <View style={styles.symptomViewRowInline}>
-          <Text style={styles.symptomDayView}>Temperature (°C)</Text>
-          <TextInput
-            style={styles.temperatureTextInput}
-            placeholder="Enter"
-            onChangeText={(val) => {
-              this.setState({ currentValue: val })
+      <View style={styles.menuOnBottom}>
+        <View>
+          <View style={styles.symptomViewRowInline}>
+            <Text style={styles.symptomDayView}>Temperature (°C)</Text>
+            <TextInput
+              style={styles.temperatureTextInput}
+              placeholder="Enter"
+              onChangeText={(val) => {
+                this.setState({ currentValue: val })
+              }}
+              keyboardType='numeric'
+              value={this.state.currentValue}
+            />
+          </View>
+          <View style={styles.symptomViewRowInline}>
+            <Text style={styles.symptomDayView}>Time</Text>
+            <TextInput
+              style={styles.temperatureTextInput}
+              onFocus={() => {
+                Keyboard.dismiss()
+                this.setState({ isTimePickerVisible: true })
+              }}
+              value={this.state.time}
+            />
+          </View>
+          <DateTimePicker
+            mode="time"
+            isVisible={this.state.isTimePickerVisible}
+            onConfirm={jsDate => {
+              this.setState({
+                time: `${jsDate.getHours()}:${jsDate.getMinutes()}`,
+                isTimePickerVisible: false
+              })
             }}
-            keyboardType='numeric'
-            value={this.state.currentValue}
+            onCancel={() => this.setState({ isTimePickerVisible: false })}
           />
+          <View style={styles.symptomViewRowInline}>
+            <Text style={styles.symptomDayView}>Exclude</Text>
+            <Switch
+              onValueChange={(val) => {
+                this.setState({ exclude: val })
+              }}
+              value={this.state.exclude}
+            />
+          </View>
         </View>
-        <View style={styles.symptomViewRowInline}>
-          <Text style={styles.symptomDayView}>Time</Text>
-          <TextInput
-            style={styles.temperatureTextInput}
-            onFocus={() => {
-              Keyboard.dismiss()
-              this.setState({ isTimePickerVisible: true })
-            }}
-            value={this.state.time}
-          />
-        </View>
-        <DateTimePicker
-          mode="time"
-          isVisible={this.state.isTimePickerVisible}
-          onConfirm={jsDate => {
-            this.setState({
-              time: `${jsDate.getHours()}:${jsDate.getMinutes()}`,
-              isTimePickerVisible: false
-            })
+        <ActionButtonFooter
+          symptom='temperature'
+          cycleDay={this.cycleDay}
+          saveAction={() => {
+            const dataToSave = {
+              value: Number(this.state.currentValue),
+              exclude: this.state.exclude,
+              time: this.state.time
+            }
+            saveSymptom('temperature', this.props.cycleDay, dataToSave)
           }}
-          onCancel={() => this.setState({ isTimePickerVisible: false })}
+          saveDisabled={this.state.currentValue === '' || isInvalidTime(this.state.time)}
+          navigate={this.props.navigate}
         />
-        <View style={styles.symptomViewRowInline}>
-          <Text style={styles.symptomDayView}>Exclude</Text>
-          <Switch
-            onValueChange={(val) => {
-              this.setState({ exclude: val })
-            }}
-            value={this.state.exclude}
-          />
-        </View>
       </View>
     )
   }