On temperature view, replace menu with action buttons

app.js

@@ -1,11 +1,11 @@
 import React, { Component } from 'react'
-import { View, BackHandler } from 'react-native'
+import { View, BackHandler, ScrollView } from 'react-native'
 import Header from './components/header'
 import Menu from './components/menu'
 import Home from './components/home'
 import Calendar from './components/calendar'
 import CycleDay from './components/cycle-day/cycle-day-overview'
-import SymptomView from './components/cycle-day/symptoms'
+import symptomViews from './components/cycle-day/symptoms'
 import Chart from './components/chart/chart'
 import Settings from './components/settings'
 import Stats from './components/stats'
@@ -13,8 +13,11 @@ import Stats from './components/stats'
 // 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
+
 export default class App extends Component {
   constructor(props) {
     super(props)
@@ -24,9 +27,11 @@ export default class App extends Component {
 
     const handleBackButtonPress = function() {
       if (this.state.currentPage === 'Home') return false
-      // this is handled in the SymptomView
-      if (this.state.currentPage === 'SymptomView') return true
-      this.navigate('Home')
+      if (isSymptomView(this.state.currentPage)) {
+        this.navigate('CycleDay', {cycleDay: this.state.currentProps.cycleDay})
+      } else {
+        this.navigate('Home')
+      }
       return true
     }.bind(this)
 
@@ -41,34 +46,40 @@ 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>
           {this.state.currentPage != 'CycleDay' && <Header title={this.state.currentPage}/>}
-          <View>
-            <CurrentPage
-              page={this.state.currentPage}
-              navigate={this.navigate.bind(this)}
-              props={this.state.currentProps}
-            />
-          </View>
+          <ScrollView>
+            {React.createElement(page, {
+              navigate: this.navigate.bind(this),
+              setActionButtonState: this.setActionButtonState.bind(this),
+              unsetActionButtonState: this.unsetActionButtonState.bind(this),
+              ...this.state.currentProps
+            })}
+          </ScrollView>
         </View>
-        <Menu navigate={this.navigate.bind(this)} />
+        {isSymptomView(this.state.currentPage) && this.state.actionButtonInfo ?
+          <ActionButtonFooter
+            {...this.state.actionButtonInfo}
+            navigate={this.navigate.bind(this)}
+          />
+          :
+          <Menu navigate={this.navigate.bind(this)}/>
+        }
       </View>
     )
   }
-}
-
-class CurrentPage extends Component {
-  render () {
-    const page = {
-      Home, Calendar, CycleDay, SymptomView, Chart, Settings, Stats
-    }[this.props.page]
-    const props = this.props.props || {}
-    return React.createElement(page, {
-      navigate: this.props.navigate,
-      ...props
-    })
-  }
 }