Merge branch '345-move-info-button-out-of-header-to-body' into marie-move-info-button-out-of-header-to-body

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

@@ -1,8 +1,14 @@
 import React, { Component } from 'react'
-import { BackHandler, View } from 'react-native'
+import {
+  BackHandler, View, Alert, TouchableOpacity
+} from 'react-native'
 import { saveSymptom } from '../../../db'
 import Header from '../../header/symptom-view'
 import { headerTitles } from '../../../i18n/en/labels'
+import { sharedDialogs } from '../../../i18n/en/cycle-day'
+import FeatherIcon from 'react-native-vector-icons/Feather'
+import styles, { iconStyles } from '../../../styles'
+import infoLabels from '../../../i18n/en/symptom-info'
 
 export default class SymptomView extends Component {
   constructor(props) {
@@ -33,6 +39,20 @@ export default class SymptomView extends Component {
     this.backHandler.remove()
   }
 
+  isDeleteIconActive() {
+    return Object.values(this.state).some(value => {
+      // is there any meaningful value in the current state?
+      return value || value === 0
+    })
+  }
+
+  showInfoBox(){
+    Alert.alert(
+      infoLabels[this.symptomName].title,
+      infoLabels[this.symptomName].text
+    )
+  }
+
   render() {
     return (
       <View style={{flex: 1}}>
@@ -40,12 +60,37 @@ export default class SymptomView extends Component {
           title={headerTitles[this.symptomName].toLowerCase()}
           date={this.date}
           goBack={this.handleBackButtonPressOnSymptomView.bind(this)}
+          deleteIconActive={this.isDeleteIconActive()}
           deleteEntry={() => {
-            this.deleteSymptomEntry()
-            this.globalBackhandler()
+            Alert.alert(
+              sharedDialogs.areYouSureTitle,
+              sharedDialogs.areYouSureToDelete,
+              [{
+                text: sharedDialogs.cancel,
+                style: 'cancel'
+              }, {
+                text: sharedDialogs.reallyDeleteData,
+                onPress: () => {
+                  this.deleteSymptomEntry()
+                  this.globalBackhandler()
+                }
+              }]
+            )
           }}
         />
-        {this.renderContent()}
+        <View>
+          <TouchableOpacity
+            onPress={this.showInfoBox.bind(this)}
+            style={styles.infoButtonSymptomView}
+          >
+            <FeatherIcon
+              name="info"
+              {...iconStyles.infoInSymptomView}
+              style={iconStyles.symptomInfo}
+            />
+          </TouchableOpacity>
+          {this.renderContent()}
+        </View>
       </View>
     )
   }