changes footer depending on new entry or edit mode

components/cycle-day/select-tab-group.js

@@ -23,7 +23,13 @@ export default class SelectTabGroup extends Component {
             if (isActive) activeStyle = styles.selectTabActive
             return (
               <TouchableOpacity
-                onPress={() => isActive ? this.props.onSelect(null) : this.props.onSelect(value)}
+                onPress={() => {
+                  if (this.props.isRadioButton) {
+                    this.props.onSelect(value)
+                  } else {
+                    isActive ? this.props.onSelect(null) : this.props.onSelect(value)
+                  }
+                }}
                 key={i}
                 activeOpacity={1}
               >

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

@@ -3,11 +3,13 @@ import {
   View, TouchableOpacity, Text
 } from 'react-native'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+import { saveSymptom } from '../../../db'
 import styles, {iconStyles} from '../../../styles'
 
 export default class ActionButtonFooter extends Component {
   render() {
     const {
+      symptom,
       cycleDay,
       saveAction,
       saveDisabled,
@@ -15,33 +17,65 @@ export default class ActionButtonFooter extends Component {
       autoShowDayView = true}
       = this.props
     const navigateToOverView = () => navigate('CycleDay', {cycleDay})
-    const saveButton = {
-      title: 'Save',
-      action: () => {
-        saveAction()
-        if (autoShowDayView) navigateToOverView()
+    const buttonsNewEntry = [
+      {
+        title: 'Cancel',
+        action: () => navigateToOverView(),
+        icon: 'cancel'
       },
-      disabledCondition: saveDisabled,
-      icon: 'content-save-outline'
-    }
-    const textStyle = saveButton.disabledCondition ? styles.menuTextInActive : styles.menuText
-    const iconStyle = saveButton.disabledCondition ?
-      Object.assign({}, iconStyles.menuIcon, iconStyles.menuIconInactive) :
-      iconStyles.menuIcon
+      {
+        title: 'Add',
+        action: () => {
+          saveAction()
+          if (autoShowDayView) navigateToOverView()
+        },
+        disabledCondition: saveDisabled,
+        icon: 'content-save-outline'
+      }
+    ]
+    const buttonsEdit = [
+      {
+        title: 'Delete',
+        action: () => {
+          saveSymptom(symptom, cycleDay)
+          navigateToOverView()
+        },
+        disabledCondition: !cycleDay[symptom],
+        icon: 'delete-outline'
+      }, {
+        title: 'Save',
+        action: () => {
+          saveAction()
+          if (autoShowDayView) navigateToOverView()
+        },
+        disabledCondition: saveDisabled,
+        icon: 'content-save-outline'
+      }
+    ]
+    const buttons = !cycleDay[symptom] ? buttonsNewEntry : buttonsEdit
 
     return (
       <View style={styles.menu}>
-        <TouchableOpacity
-          onPress={saveButton.action}
-          style={styles.menuItem}
-          disabled={saveButton.disabledCondition}
-          key={'save'}
-        >
-          <Icon name={saveButton.icon} {...iconStyle} />
-          <Text style={textStyle}>
-            {saveButton.title}
-          </Text>
-        </TouchableOpacity>
+        {buttons.map(({ title, action, disabledCondition, icon }, i) => {
+          const textStyle = disabledCondition ? styles.menuTextInActive : styles.menuText
+          const iconStyle = disabledCondition ?
+            Object.assign({}, iconStyles.menuIcon, iconStyles.menuIconInactive) :
+            iconStyles.menuIcon
+
+          return (
+            <TouchableOpacity
+              onPress={action}
+              style={styles.menuItem}
+              disabled={disabledCondition}
+              key={i.toString()}
+            >
+              <Icon name={icon} {...iconStyle} />
+              <Text style={textStyle}>
+                {title}
+              </Text>
+            </TouchableOpacity>
+          )
+        })}
       </View>
     )
   }

components/cycle-day/symptoms/bleeding.js

@@ -40,6 +40,7 @@ export default class Bleeding extends Component {
               buttons={bleedingRadioProps}
               active={this.state.currentValue}
               onSelect={val => this.setState({ currentValue: val })}
+              isRadioButton={true}
             />
           </SymptomSection>
           <SymptomSection
@@ -56,6 +57,7 @@ export default class Bleeding extends Component {
           </SymptomSection>
         </ScrollView>
         <ActionButtonFooter
+          symptom='bleeding'
           cycleDay={this.props.cycleDay}
           saveAction={() => {
             saveSymptom('bleeding', this.props.cycleDay, {

components/cycle-day/symptoms/cervix.js

@@ -50,6 +50,7 @@ export default class Cervix extends Component {
               buttons={cervixOpeningRadioProps}
               active={this.state.opening}
               onSelect={val => this.setState({ opening: val })}
+              isRadioButton={true}
             />
           </SymptomSection>
           <SymptomSection
@@ -60,6 +61,7 @@ export default class Cervix extends Component {
               buttons={cervixFirmnessRadioProps}
               active={this.state.firmness}
               onSelect={val => this.setState({ firmness: val })}
+              isRadioButton={true}
             />
           </SymptomSection>
           <SymptomSection
@@ -70,6 +72,7 @@ export default class Cervix extends Component {
               buttons={cervixPositionRadioProps}
               active={this.state.position}
               onSelect={val => this.setState({ position: val })}
+              isRadioButton={false}
             />
           </SymptomSection>
           <SymptomSection

components/cycle-day/symptoms/desire.js

@@ -36,6 +36,7 @@ export default class Desire extends Component {
               buttons={desireRadioProps}
               active={this.state.currentValue}
               onSelect={val => this.setState({ currentValue: val })}
+              isRadioButton={true}
             />
           </SymptomSection>
         </ScrollView>