On temperature view, replace menu with action buttons

components/cycle-day/action-buttons.js

@@ -1,47 +0,0 @@
-import React from 'react'
-import {
-  View,
-  Button,
-} from 'react-native'
-import { saveSymptom } from '../../db'
-
-export default function (navigateToOverView) {
-  return function ({ symptom, cycleDay, saveAction, saveDisabled}) {
-    const buttons = [
-      {
-        title: 'Cancel',
-        action: () => navigateToOverView()
-      },
-      {
-        title: 'Delete',
-        action: () => {
-          saveSymptom(symptom, cycleDay)
-          navigateToOverView()
-        },
-        disabledCondition: !cycleDay[symptom]
-      }, {
-        title: 'Save',
-        action: () => {
-          saveAction()
-          navigateToOverView()
-        },
-        disabledCondition: saveDisabled
-      }
-    ]
-
-    return buttons.map(({ title, action, disabledCondition }, i) => {
-      const style = { flex: 1, marginHorizontal: 10 }
-      if (i === 0) style.marginLeft = 0
-      if (i === buttons.length - 1) style.marginRight = 0
-      return (
-        <View style={style} key={i}>
-          <Button
-            onPress={action}
-            disabled={disabledCondition}
-            title={title}>
-          </Button>
-        </View >
-      )
-    })
-  }
-}

components/cycle-day/cycle-day-overview.js

@@ -40,9 +40,8 @@ export default class CycleDayOverView extends Component {
   }
 
   navigate(symptom) {
-    this.props.navigate('SymptomView', {
-      symptom,
-      cycleDay: this.state.cycleDay
+    this.props.navigate(symptom, {
+      cycleDay: this.state.cycleDay,
     })
   }
 

components/cycle-day/symptoms/action-button-footer.js

@@ -1,19 +1,20 @@
 import React, { Component } from 'react'
 import {
-  View,
-  Button,
+  View, TouchableOpacity, Text
 } from 'react-native'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 import { saveSymptom } from '../../../db'
-import styles from '../../../styles'
+import styles, {iconStyles} from '../../../styles'
 
 export default class ActionButtonFooter extends Component {
   render() {
     const { symptom, cycleDay, saveAction, saveDisabled, navigate} = this.props
-    const navigateToOverView = () => navigate('CycleDay', cycleDay)
+    const navigateToOverView = () => navigate('CycleDay', {cycleDay})
     const buttons = [
       {
         title: 'Cancel',
-        action: () => navigateToOverView()
+        action: () => navigateToOverView(),
+        icon: 'cancel'
       },
       {
         title: 'Delete',
@@ -21,31 +22,34 @@ export default class ActionButtonFooter extends Component {
           saveSymptom(symptom, cycleDay)
           navigateToOverView()
         },
-        disabledCondition: !cycleDay[symptom]
+        disabledCondition: !cycleDay[symptom],
+        icon: 'delete-outline'
       }, {
         title: 'Save',
         action: () => {
           saveAction()
           navigateToOverView()
         },
-        disabledCondition: saveDisabled
+        disabledCondition: saveDisabled,
+        icon: 'content-save-outline'
       }
     ]
 
     return (
-      <View style={styles.actionButtonRow}>
-        {buttons.map(({ title, action, disabledCondition }, i) => {
-          const style = { flex: 1, marginHorizontal: 10 }
-          if (i === 0) style.marginLeft = 0
-          if (i === buttons.length - 1) style.marginRight = 0
+      <View style={styles.menu}>
+        {buttons.map(({ title, action, disabledCondition, icon }, i) => {
           return (
-            <View style={style} key={i}>
-              <Button
-                onPress={action}
-                disabled={disabledCondition}
-                title={title}>
-              </Button>
-            </View >
+            <TouchableOpacity
+              onPress={action}
+              style={styles.menuItem}
+              disabled={disabledCondition}
+              key={i.toString()}
+            >
+              <Icon name={icon} {...iconStyles.menuIcon} />
+              <Text style={styles.menuText}>
+                {title}
+              </Text>
+            </TouchableOpacity>
           )
         })}
       </View>

components/cycle-day/symptoms/index.js

@@ -1,7 +1,3 @@
-import React, { Component } from 'react'
-import { ScrollView, BackHandler } from 'react-native'
-import Header from '../../header'
-import actionButtonModule from '../action-buttons'
 import BleedingEditView from './bleeding'
 import TemperatureEditView from './temperature'
 import MucusEditView from './mucus'
@@ -10,7 +6,7 @@ import NoteEditView from './note'
 import DesireEditView from './desire'
 import SexEditView from './sex'
 
-const symptomViews = {
+export default {
   BleedingEditView,
   TemperatureEditView,
   MucusEditView,
@@ -18,54 +14,4 @@ const symptomViews = {
   NoteEditView,
   DesireEditView,
   SexEditView
-}
-const titles = {
-  BleedingEditView: 'Bleeding',
-  TemperatureEditView: 'Temperature',
-  MucusEditView: 'Mucus',
-  CervixEditView: 'Cervix',
-  NoteEditView: 'Note',
-  DesireEditView: 'Desire',
-  SexEditView: 'Sex'
-}
-
-export default class SymptomView extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      visibleComponent: props.symptom,
-      cycleDay: props.cycleDay
-    }
-
-    this.makeActionButtons = actionButtonModule(() => {
-      this.props.navigate('CycleDay', {cycleDay: this.state.cycleDay})
-    })
-
-    const handleBackButtonPress = function() {
-      this.props.navigate('CycleDay', {cycleDay: this.state.cycleDay})
-      return true
-    }.bind(this)
-
-    this.backHandler = BackHandler.addEventListener('hardwareBackPress', handleBackButtonPress)
-  }
-
-  componentWillUnmount() {
-    this.backHandler.remove()
-  }
-
-  render() {
-    return (
-      <ScrollView>
-        <Header title={titles[this.state.visibleComponent]}/>
-        {React.createElement(
-          symptomViews[this.state.visibleComponent],
-          {
-            cycleDay: this.state.cycleDay,
-            makeActionButtons: this.makeActionButtons
-          }
-        )}
-      </ScrollView >
-    )
-  }
-}
+}

components/cycle-day/symptoms/temperature.js

@@ -4,7 +4,7 @@ import {
   Text,
   TextInput,
   Switch,
-  Keyboard
+  Keyboard,
 } from 'react-native'
 import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
 
@@ -37,10 +37,27 @@ 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() {
-    const cycleDay = this.cycleDay
     return (
       <View style={styles.symptomEditView}>
         <View style={styles.symptomViewRowInline}>
@@ -61,7 +78,7 @@ export default class Temp extends Component {
             style={styles.temperatureTextInput}
             onFocus={() => {
               Keyboard.dismiss()
-              this.setState({isTimePickerVisible: true})
+              this.setState({ isTimePickerVisible: true })
             }}
             value={this.state.time}
           />
@@ -75,7 +92,7 @@ export default class Temp extends Component {
               isTimePickerVisible: false
             })
           }}
-          onCancel={() => this.setState({isTimePickerVisible: false})}
+          onCancel={() => this.setState({ isTimePickerVisible: false })}
         />
         <View style={styles.symptomViewRowInline}>
           <Text style={styles.symptomDayView}>Exclude</Text>
@@ -86,21 +103,6 @@ export default class Temp extends Component {
             value={this.state.exclude}
           />
         </View>
-        <View style={styles.actionButtonRow}>
-          {this.makeActionButtons({
-            symptom: 'temperature',
-            cycleDay: this.cycleDay,
-            saveAction: () => {
-              const dataToSave = {
-                value: Number(this.state.currentValue),
-                exclude: this.state.exclude,
-                time: this.state.time
-              }
-              saveSymptom('temperature', cycleDay, dataToSave)
-            },
-            saveDisabled: this.state.currentValue === '' || isInvalidTime(this.state.time)
-          })}
-        </View>
       </View>
     )
   }

components/menu.js

@@ -8,11 +8,12 @@ import styles, { iconStyles } from '../styles'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 
 export default class Menu extends Component {
-  makeMenuItem({ title, icon, componentName }) {
+  makeMenuItem({ title, icon, onPress}, i) {
     return (
       <TouchableOpacity
-        onPress={() => this.props.navigate(componentName)}
+        onPress={onPress}
         style={styles.menuItem}
+        key={i.toString()}
       >
         <Icon name={icon} {...iconStyles.menuIcon} />
         <Text style={styles.menuText}>
@@ -21,20 +22,22 @@ export default class Menu extends Component {
       </TouchableOpacity>
     )
   }
+
+  goTo(componentName) {
+    this.props.navigate(componentName)
+  }
+
   render() {
     return (
-      this.props.symptomView ?
-        placeActionButtons()
-        :
-        <View style={styles.menu}>
-          {[
-            {title: 'Home', icon: 'home', componentName: 'Home'},
-            {title: 'Calendar', icon: 'calendar-range', componentName: 'Calendar'},
-            {title: 'Chart', icon: 'chart-line', componentName: 'Chart'},
-            {title: 'Stats', icon: 'chart-pie', componentName: 'Stats'},
-            {title: 'Settings', icon: 'settings', componentName: 'Settings'},
-          ].map(this.makeMenuItem.bind(this))}
-        </View >
+      <View style={styles.menu}>
+        {[
+          { title: 'Home', icon: 'home', onPress: () => this.goTo('Home') },
+          { title: 'Calendar', icon: 'calendar-range', onPress: () => this.goTo('Calendar') },
+          { title: 'Chart', icon: 'chart-line', onPress: () => this.goTo('Chart') },
+          { title: 'Stats', icon: 'chart-pie', onPress: () => this.goTo('Stats') },
+          { title: 'Settings', icon: 'settings', onPress: () => this.goTo('Settings') },
+        ].map(this.makeMenuItem.bind(this))}
+      </View >
     )
   }
 }