Replace action button footer in remaining symptom views

app.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { View, BackHandler, ScrollView } from 'react-native'
+import { View, BackHandler } from 'react-native'
 import Header from './components/header'
 import Menu from './components/menu'
 import Home from './components/home'
@@ -9,11 +9,11 @@ import symptomViews from './components/cycle-day/symptoms'
 import Chart from './components/chart/chart'
 import Settings from './components/settings'
 import Stats from './components/stats'
+import styles from './styles'
 
 // this is until react native fixes this bugg, see
 // https://github.com/facebook/react-native/issues/18868#issuecomment-382671739
 import { YellowBox } from 'react-native'
-import ActionButtonFooter from './components/cycle-day/symptoms/action-button-footer';
 YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated'])
 
 const isSymptomView = name => Object.keys(symptomViews).indexOf(name) > -1
@@ -46,38 +46,22 @@ export default class App extends Component {
     this.setState({currentPage: pageName, currentProps: props})
   }
 
-  setActionButtonState(actionButtonInfo) {
-    this.setState({actionButtonInfo})
-  }
-
-  unsetActionButtonState() {
-    this.setState({actionButtonInfo: null})
-  }
-
   render() {
     const page = {
       Home, Calendar, CycleDay, Chart, Settings, Stats, ...symptomViews
     }[this.state.currentPage]
     return (
-      <View style={{height: '100%', justifyContent: 'space-between' }}>
+      <View style={styles.menuOnBottom}>
-        <View>
+
-          {this.state.currentPage != 'CycleDay' && <Header title={this.state.currentPage}/>}
+        {this.state.currentPage != 'CycleDay' && <Header title={this.state.currentPage} />}
-          <ScrollView>
+
         {React.createElement(page, {
           navigate: this.navigate.bind(this),
-              setActionButtonState: this.setActionButtonState.bind(this),
-              unsetActionButtonState: this.unsetActionButtonState.bind(this),
           ...this.state.currentProps
         })}
-          </ScrollView>
+
-        </View>
+        {!isSymptomView(this.state.currentPage) &&
-        {isSymptomView(this.state.currentPage) && this.state.actionButtonInfo ?
+          <Menu navigate={this.navigate.bind(this)} />
-          <ActionButtonFooter
-            {...this.state.actionButtonInfo}
-            navigate={this.navigate.bind(this)}
-          />
-          :
-          <Menu navigate={this.navigate.bind(this)}/>
         }
       </View>
     )

components/cycle-day/symptoms/bleeding.js

@@ -8,6 +8,7 @@ import RadioForm from 'react-native-simple-radio-button'
 import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
 import { bleeding as labels } from '../labels/labels'
+import ActionButtonFooter from './action-button-footer'
 
 export default class Bleeding extends Component {
   constructor(props) {
@@ -32,8 +33,8 @@ export default class Bleeding extends Component {
       { label: labels[3], value: 3 },
     ]
     return (
+      <View style={styles.menuOnBottom}>
         <View>
-        <View style={styles.symptomEditView}>
           <Text style={styles.symptomDayView}>Bleeding</Text>
           <View style={styles.radioButtonRow}>
             <RadioForm
@@ -57,21 +58,18 @@ export default class Bleeding extends Component {
             />
           </View>
         </View>
-        <View style={styles.actionButtonRow}>
+        <ActionButtonFooter
-          {this.makeActionButtons(
+          symptom='bleeding'
-            {
+          cycleDay={this.props.cycleDay}
-              symptom: 'bleeding',
+          saveAction={() => {
-              cycleDay: this.cycleDay,
+            saveSymptom('bleeding', this.props.cycleDay, {
-              saveAction: () => {
-                saveSymptom('bleeding', this.cycleDay, {
               value: this.state.currentValue,
               exclude: this.state.exclude
             })
-              },
+          }}
-              saveDisabled: this.state.currentValue === -1
+          saveDisabled={this.state.currentValue === -1}
-            }
+          navigate={this.props.navigate}
-          )}
+        />
-        </View>
       </View>
     )
   }

components/cycle-day/symptoms/cervix.js

@@ -12,6 +12,7 @@ import {
   cervixFirmness as firmnessLabels,
   cervixPosition as positionLabels
 } from '../labels/labels'
+import ActionButtonFooter from './action-button-footer'
 
 export default class Cervix extends Component {
   constructor(props) {
@@ -45,10 +46,11 @@ export default class Cervix extends Component {
     const cervixPositionRadioProps = [
       {label: positionLabels[0], value: 0 },
       {label: positionLabels[1], value: 1 },
-      {label: positionLabels[2], value: 2 }
+      { label: positionLabels[2], value: 2 }
     ]
-    return(
+    return (
-      <View style={ styles.symptomEditView }>
+      <View style={styles.menuOnBottom}>
+        <View>
           <Text style={styles.symptomDayView}>Cervix</Text>
           <Text style={styles.symptomDayView}>Opening</Text>
           <View style={styles.radioButtonRow}>
@@ -59,7 +61,7 @@ export default class Cervix extends Component {
               labelHorizontal={false}
               labelStyle={styles.radioButton}
               onPress={(itemValue) => {
-              this.setState({opening: itemValue})
+                this.setState({ opening: itemValue })
               }}
             />
           </View>
@@ -72,7 +74,7 @@ export default class Cervix extends Component {
               labelHorizontal={false}
               labelStyle={styles.radioButton}
               onPress={(itemValue) => {
-              this.setState({firmness: itemValue})
+                this.setState({ firmness: itemValue })
               }}
             />
           </View>
@@ -85,7 +87,7 @@ export default class Cervix extends Component {
               labelHorizontal={false}
               labelStyle={styles.radioButton}
               onPress={(itemValue) => {
-              this.setState({position: itemValue})
+                this.setState({ position: itemValue })
               }}
             />
           </View>
@@ -98,23 +100,21 @@ export default class Cervix extends Component {
               value={this.state.exclude}
             />
           </View>
-        <View style={styles.actionButtonRow}>
+        </View>
-          {this.makeActionButtons(
+        <ActionButtonFooter
-            {
+          symptom='cervix'
-              symptom: 'cervix',
+          cycleDay={this.cycleDay}
-              cycleDay: this.cycleDay,
+          saveAction={() => {
-              saveAction: () => {
             saveSymptom('cervix', this.cycleDay, {
               opening: this.state.opening,
               firmness: this.state.firmness,
               position: this.state.position,
               exclude: this.state.exclude
             })
-              },
+          }}
-              saveDisabled: this.state.opening === -1 || this.state.firmness === -1
+          saveDisabled={this.state.opening === -1 || this.state.firmness === -1}
-            }
+          navigate={this.props.navigate}
-          )}
+        />
-        </View>
       </View>
     )
   }

components/cycle-day/symptoms/desire.js

@@ -7,6 +7,7 @@ import RadioForm from 'react-native-simple-radio-button'
 import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
 import { intensity as labels } from '../labels/labels'
+import ActionButtonFooter from './action-button-footer'
 
 export default class Desire extends Component {
   constructor(props) {
@@ -27,7 +28,8 @@ export default class Desire extends Component {
       { label: labels[2], value: 2 }
     ]
     return (
-      <View style={styles.symptomEditView}>
+      <View style={styles.menuOnBottom}>
+        <View>
           <Text style={styles.symptomDayView}>Desire</Text>
           <View style={styles.radioButtonRow}>
             <RadioForm
@@ -41,18 +43,16 @@ export default class Desire extends Component {
               }}
             />
           </View>
-        <View style={styles.actionButtonRow}>
-          {this.makeActionButtons(
-            {
-              symptom: 'desire',
-              cycleDay: this.cycleDay,
-              saveAction: () => {
-                saveSymptom('desire', this.cycleDay, { value: this.state.currentValue })
-              },
-              saveDisabled: this.state.currentValue === -1
-            }
-          )}
         </View>
+        <ActionButtonFooter
+          symptom='desire'
+          cycleDay={this.cycleDay}
+          saveAction={() => {
+            saveSymptom('desire', this.cycleDay, { value: this.state.currentValue })
+          }}
+          saveDisabled={this.state.currentValue === -1}
+          navigate={this.props.navigate}
+        />
       </View>
     )
   }

components/cycle-day/symptoms/mucus.js

@@ -12,6 +12,7 @@ import {
   mucusTexture as textureLabels
 } from '../labels/labels'
 import computeSensiplanValue from '../../../lib/sensiplan-mucus'
+import ActionButtonFooter from './action-button-footer'
 
 
 export default class Mucus extends Component {
@@ -31,23 +32,23 @@ export default class Mucus extends Component {
       }
     })
     /* eslint-enable react/no-direct-mutation-state */
-
   }
 
   render() {
     const mucusFeelingRadioProps = [
-      {label: feelingLabels[0], value: 0 },
+      { label: feelingLabels[0], value: 0 },
-      {label: feelingLabels[1], value: 1 },
+      { label: feelingLabels[1], value: 1 },
-      {label: feelingLabels[2], value: 2 },
+      { label: feelingLabels[2], value: 2 },
-      {label: feelingLabels[3], value: 3 }
+      { label: feelingLabels[3], value: 3 }
     ]
     const mucusTextureRadioProps = [
-      {label: textureLabels[0], value: 0 },
+      { label: textureLabels[0], value: 0 },
-      {label: textureLabels[1], value: 1 },
+      { label: textureLabels[1], value: 1 },
-      {label: textureLabels[2], value: 2 }
+      { label: textureLabels[2], value: 2 }
     ]
-    return(
+    return (
-      <View style={ styles.symptomEditView }>
+      <View style={styles.menuOnBottom}>
+        <View>
           <Text style={styles.symptomDayView}>Mucus</Text>
           <Text style={styles.symptomDayView}>Feeling</Text>
           <View style={styles.radioButtonRow}>
@@ -58,7 +59,7 @@ export default class Mucus extends Component {
               labelHorizontal={false}
               labelStyle={styles.radioButton}
               onPress={(itemValue) => {
-              this.setState({feeling: itemValue })
+                this.setState({ feeling: itemValue })
               }}
             />
           </View>
@@ -71,7 +72,7 @@ export default class Mucus extends Component {
               labelHorizontal={false}
               labelStyle={styles.radioButton}
               onPress={(itemValue) => {
-              this.setState({texture: itemValue })
+                this.setState({ texture: itemValue })
               }}
             />
           </View>
@@ -84,25 +85,21 @@ export default class Mucus extends Component {
               value={this.state.exclude}
             />
           </View>
-
+        </View>
-        <View style={styles.actionButtonRow}>
+        <ActionButtonFooter
-          {this.makeActionButtons(
+          symptom='mucus'
-            {
+          cycleDay={this.cycleDay}
-              symptom: 'mucus',
+          saveAction={() => {
-              cycleDay: this.cycleDay,
-              saveAction: () => {
             saveSymptom('mucus', this.cycleDay, {
               feeling: this.state.feeling,
               texture: this.state.texture,
               value: computeSensiplanValue(this.state.feeling, this.state.texture),
               exclude: this.state.exclude
             })
-              },
+          }}
-              saveDisabled: this.state.feeling === -1 || this.state.texture === -1
+          saveDisabled={this.state.feeling === -1 || this.state.texture === -1}
-            }
+          navigate={this.props.navigate}
-          )}
+        />
-        </View>
-
       </View>
     )
   }

components/cycle-day/symptoms/note.js

@@ -7,6 +7,7 @@ import {
 
 import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
+import ActionButtonFooter from './action-button-footer'
 
 export default class Temp extends Component {
   constructor(props) {
@@ -22,7 +23,7 @@ export default class Temp extends Component {
 
   render() {
     return (
-      <View style={styles.symptomEditView}>
+      <View style={styles.menuOnBottom}>
         <View style={styles.symptomViewRow}>
           <Text style={styles.symptomDayView}>Note</Text>
           <TextInput
@@ -34,18 +35,17 @@ export default class Temp extends Component {
             value={this.state.currentValue}
           />
         </View>
-        <View style={styles.actionButtonRow}>
+        <ActionButtonFooter
-          {this.makeActionButtons({
+          symptom='note'
-            symptom: 'note',
+          cycleDay={this.cycleDay}
-            cycleDay: this.cycleDay,
+          saveAction={() => {
-            saveAction: () => {
             saveSymptom('note', this.cycleDay, {
               value: this.state.currentValue
             })
-            },
+          }}
-            saveDisabled: !this.state.currentValue
+          saveDisabled={!this.state.currentValue}
-          })}
+          navigate={this.props.navigate}
-        </View>
+        />
       </View>
     )
   }

components/cycle-day/symptoms/sex.js

@@ -11,6 +11,7 @@ import {
   sexActivity as activityLabels,
   contraceptives as contraceptiveLabels
 } from '../labels/labels'
+import ActionButtonFooter from './action-button-footer'
 
 export default class Sex extends Component {
   constructor(props) {
@@ -30,21 +31,22 @@ export default class Sex extends Component {
   render() {
 
     return (
-      <View style={styles.symptomEditView}>
+      <View style={styles.menuOnBottom}>
+        <View>
           <Text style={styles.symptomDayView}>SEX</Text>
           <View style={styles.symptomViewRowInline}>
             <Text style={styles.symptomDayView}>{activityLabels.solo}</Text>
             <CheckBox
               value={this.state.solo}
               onValueChange={(val) => {
-              this.setState({solo: val})
+                this.setState({ solo: val })
               }}
             />
             <Text style={styles.symptomDayView}>{activityLabels.partner}</Text>
             <CheckBox
               value={this.state.partner}
               onValueChange={(val) => {
-              this.setState({partner: val})
+                this.setState({ partner: val })
               }}
             />
           </View>
@@ -56,7 +58,7 @@ export default class Sex extends Component {
             <CheckBox
               value={this.state.condom}
               onValueChange={(val) => {
-              this.setState({condom: val})
+                this.setState({ condom: val })
               }}
             />
             <Text style={styles.symptomDayView}>
@@ -65,7 +67,7 @@ export default class Sex extends Component {
             <CheckBox
               value={this.state.pill}
               onValueChange={(val) => {
-              this.setState({pill: val})
+                this.setState({ pill: val })
               }}
             />
           </View>
@@ -76,7 +78,7 @@ export default class Sex extends Component {
             <CheckBox
               value={this.state.iud}
               onValueChange={(val) => {
-              this.setState({iud: val})
+                this.setState({ iud: val })
               }}
             />
             <Text style={styles.symptomDayView}>
@@ -85,7 +87,7 @@ export default class Sex extends Component {
             <CheckBox
               value={this.state.patch}
               onValueChange={(val) => {
-              this.setState({patch: val})
+                this.setState({ patch: val })
               }}
             />
           </View>
@@ -96,7 +98,7 @@ export default class Sex extends Component {
             <CheckBox
               value={this.state.ring}
               onValueChange={(val) => {
-              this.setState({ring: val})
+                this.setState({ ring: val })
               }}
             />
             <Text style={styles.symptomDayView}>
@@ -105,7 +107,7 @@ export default class Sex extends Component {
             <CheckBox
               value={this.state.implant}
               onValueChange={(val) => {
-              this.setState({implant: val})
+                this.setState({ implant: val })
               }}
             />
           </View>
@@ -123,33 +125,31 @@ export default class Sex extends Component {
               }}
             />
           </View>
-        { this.state.other &&
+          {this.state.other &&
             <TextInput
               autoFocus={this.state.focusTextArea}
               multiline={true}
               placeholder="Enter"
               value={this.state.note}
               onChangeText={(val) => {
-              this.setState({note: val})
+                this.setState({ note: val })
               }}
             />
           }
-        <View style={styles.actionButtonRow}>
+        </View>
-          {this.props.makeActionButtons(
+        <ActionButtonFooter
-            {
+          symptom='sex'
-              symptom: 'sex',
+          cycleDay={this.cycleDay}
-              cycleDay: this.cycleDay,
+          saveAction={() => {
-              saveAction: () => {
             const copyOfState = Object.assign({}, this.state)
             if (!copyOfState.other) {
               copyOfState.note = null
             }
             saveSymptom('sex', this.cycleDay, copyOfState)
-              },
+          }}
-              saveDisabled: Object.values(this.state).every(value => !value)
+          saveDisabled={Object.values(this.state).every(value => !value)}
-            }
+          navigate={this.props.navigate}
-          )}
+        />
-        </View>
       </View>
     )
   }

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,29 +38,12 @@ 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.menuOnBottom}>
+        <View>
           <View style={styles.symptomViewRowInline}>
             <Text style={styles.symptomDayView}>Temperature (°C)</Text>
             <TextInput
@@ -104,6 +88,21 @@ export default class Temp extends Component {
             />
           </View>
         </View>
+        <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)
+          }}
+          saveDisabled={this.state.currentValue === '' || isInvalidTime(this.state.time)}
+          navigate={this.props.navigate}
+        />
+      </View>
     )
   }
 }

components/stats.js

@@ -5,7 +5,6 @@ import {
   ScrollView
 } from 'react-native'
 import { LocalDate, ChronoUnit } from 'js-joda'
-import Header from './header'
 import styles from '../styles/index'
 import cycleModule from '../lib/cycle'
 import getCycleInfo from '../lib/cycle-length'

styles/index.js

@@ -83,6 +83,10 @@ export default StyleSheet.create({
   symptomDataText: {
     fontSize: 12
   },
+  menuOnBottom: {
+    flex: 1,
+    justifyContent: 'space-between'
+  },
   symptomEditRow: {
     justifyContent: 'space-between',
     marginBottom: 10,