Merge branch 'symptom-views-clean-up' into 'master'

Symptom views clean up

See merge request bloodyhealth/drip!267

components/app.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 
 import { connect } from 'react-redux'
 
-import { getDate, setDate } from '../slices/date'
+import { getDate } from '../slices/date'
 import { getNavigation, navigate, goBack } from '../slices/navigation'
 
 import Header from './header'
@@ -21,6 +21,8 @@ class App extends Component {
   static propTypes = {
     date: PropTypes.string,
     navigation: PropTypes.object.isRequired,
+    navigate: PropTypes.func,
+    goBack: PropTypes.func,
   }
 
   constructor(props) {
@@ -61,7 +63,6 @@ class App extends Component {
     const pageProps = {
       cycleDay: date && getCycleDay(date),
       date,
-      handleBackButtonPress: goBack,
     }
 
     return (
@@ -89,7 +90,6 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = (dispatch) => {
   return({
-    setDate: (date) => dispatch(setDate(date)),
     navigate: (page) => dispatch(navigate(page)),
     goBack: () => dispatch(goBack()),
   })

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

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import { ScrollView, View } from 'react-native'
+import PropTypes from 'prop-types'
 
 import { connect } from 'react-redux'
 import { getDate, setDate } from '../../slices/date'
@@ -16,6 +17,16 @@ import { getCycleDay } from '../../db'
 import styles from '../../styles'
 
 class CycleDayOverView extends Component {
+
+  static propTypes = {
+    navigate: PropTypes.func,
+    setDate: PropTypes.func,
+    // The following are not being used,
+    // we could see if it's possible to not pass them from the <App />
+    cycleDay: PropTypes.object,
+    date: PropTypes.string,
+  }
+
   constructor(props) {
     super(props)
     this.state = {

components/cycle-day/symptoms/bleeding.js

@@ -14,7 +14,6 @@ class Bleeding extends Component {
 
   static propTypes = {
     cycleDay: PropTypes.object,
-    handleBackButtonPress: PropTypes.func,
     date: PropTypes.string.isRequired,
   }
 
@@ -54,7 +53,6 @@ class Bleeding extends Component {
       <SymptomView
         symptom={this.symptom}
         values={this.state}
-        handleBackButtonPress={this.props.handleBackButtonPress}
         date={this.props.date}
       >
         <SymptomSection

components/cycle-day/symptoms/cervix.js

@@ -14,7 +14,6 @@ class Cervix extends Component {
 
   static propTypes = {
     cycleDay: PropTypes.object,
-    handleBackButtonPress: PropTypes.func,
     date: PropTypes.string.isRequired,
   }
 
@@ -62,7 +61,6 @@ class Cervix extends Component {
       <SymptomView
         symptom={this.symptom}
         values={this.state}
-        handleBackButtonPress={this.props.handleBackButtonPress}
         date={this.props.date}
       >
         <SymptomSection

components/cycle-day/symptoms/desire.js

@@ -13,7 +13,6 @@ class Desire extends Component {
 
   static propTypes = {
     cycleDay: PropTypes.object,
-    handleBackButtonPress: PropTypes.func,
     date: PropTypes.string.isRequired,
   }
 
@@ -50,7 +49,6 @@ class Desire extends Component {
       <SymptomView
         symptom={this.symptom}
         values={this.state}
-        handleBackButtonPress={this.props.handleBackButtonPress}
         date={this.props.date}
       >
         <SymptomSection

components/cycle-day/symptoms/mood.js

@@ -13,7 +13,6 @@ class Mood extends Component {
 
   static propTypes = {
     cycleDay: PropTypes.object,
-    handleBackButtonPress: PropTypes.func,
     date: PropTypes.string.isRequired,
   }
 
@@ -64,7 +63,6 @@ class Mood extends Component {
       <SymptomView
         symptom={this.symptom}
         values={this.state}
-        handleBackButtonPress={this.props.handleBackButtonPress}
         date={this.props.date}
       >
         <SymptomSection

components/cycle-day/symptoms/mucus.js

@@ -15,7 +15,6 @@ class Mucus extends Component {
 
   static propTypes = {
     cycleDay: PropTypes.object,
-    handleBackButtonPress: PropTypes.func,
     date: PropTypes.string.isRequired,
   }
 
@@ -63,7 +62,6 @@ class Mucus extends Component {
       <SymptomView
         symptom={this.symptom}
         values={this.state}
-        handleBackButtonPress={this.props.handleBackButtonPress}
         date={this.props.date}
       >
         <SymptomSection

components/cycle-day/symptoms/note.js

@@ -39,7 +39,6 @@ class Note extends Component {
       <SymptomView
         symptom={this.symptom}
         values={this.state}
-        handleBackButtonPress={this.props.handleBackButtonPress}
         date={this.props.date}
       >
         <SymptomSection

components/cycle-day/symptoms/pain.js

@@ -14,7 +14,6 @@ class Pain extends Component {
 
   static propTypes = {
     cycleDay: PropTypes.object,
-    handleBackButtonPress: PropTypes.func,
     date: PropTypes.string.isRequired,
   }
 
@@ -65,7 +64,6 @@ class Pain extends Component {
       <SymptomView
         symptom={this.symptom}
         values={this.state}
-        handleBackButtonPress={this.props.handleBackButtonPress}
         date={this.props.date}
       >
         <SymptomSection

components/cycle-day/symptoms/sex.js

@@ -14,7 +14,6 @@ class Sex extends Component {
 
   static propTypes = {
     cycleDay: PropTypes.object,
-    handleBackButtonPress: PropTypes.func,
     date: PropTypes.string.isRequired,
   }
 
@@ -65,7 +64,6 @@ class Sex extends Component {
       <SymptomView
         symptom={this.symptom}
         values={this.state}
-        handleBackButtonPress={this.props.handleBackButtonPress}
         date={this.props.date}
       >
         <SymptomSection

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

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 
 import { connect } from 'react-redux'
 import { getDate } from '../../../slices/date'
+import { goBack } from '../../../slices/navigation'
 
 import { saveSymptom } from '../../../db'
 import formatDate from '../../helpers/format-date'
@@ -16,27 +17,30 @@ import { sharedDialogs } from '../../../i18n/en/cycle-day'
 
 import styles from '../../../styles'
 
+const checkIfHasValues = data => {
+  const isMeaningfulValue = value => value || value === 0
+  return Object.values(data).some(isMeaningfulValue)
+}
+
 class SymptomView extends Component {
 
   static propTypes = {
     symptom: PropTypes.string.isRequired,
     values: PropTypes.object,
     date: PropTypes.string,
+    children: PropTypes.node,
+    goBack: PropTypes.func,
   }
 
   constructor(props) {
     super()
-    this.values = props.values
     this.state = {
-      shouldShowDelete: this.checkIfHasValuesToDelete()
+      shouldShowDelete: checkIfHasValues(props.values)
     }
-    this.date = props.date
-    this.navigate = props.navigate
   }
 
   componentDidUpdate() {
-    this.values = this.props.values
+    const shouldShowDelete = checkIfHasValues(this.props.values)
-    const shouldShowDelete = this.checkIfHasValuesToDelete()
     if (shouldShowDelete !== this.state.shouldShowDelete) {
       this.setState({ shouldShowDelete })
     }
@@ -47,39 +51,9 @@ class SymptomView extends Component {
     saveSymptom(symptom, date, null)
   }
 
-  checkIfHasValuesToDelete() {
-    const valueHasBeenFilledOut = key => {
-      // is there any meaningful value in the current state?
-      return this.values[key] || this.values[key] === 0
-    }
-
-    const valuesKeys = Object.keys(this.values)
-
-    return valuesKeys.some(valueHasBeenFilledOut)
-  }
-
   onDeleteConfirmation = () => {
     this.deleteSymptomEntry()
-    this.props.handleBackButtonPress()
+    this.props.goBack()
-  }
-
-  showConfirmationAlert = () => {
-
-    const cancelButton = {
-      text: sharedDialogs.cancel,
-      style: 'cancel'
-    }
-
-    const confirmationButton = {
-      text: sharedDialogs.reallyDeleteData,
-      onPress: this.onDeleteConfirmation
-    }
-
-    return Alert.alert(
-      sharedDialogs.areYouSureTitle,
-      sharedDialogs.areYouSureToDelete,
-      [cancelButton, confirmationButton]
-    )
   }
 
   showConfirmationAlert = () => {
@@ -102,13 +76,13 @@ class SymptomView extends Component {
   }
 
   render() {
-    const { symptom } = this.props
+    const { symptom, date, goBack } = this.props
     return (
       <View style={{flex: 1}}>
         <Header
           title={headerTitles[symptom]}
-          subtitle={formatDate(this.date)}
+          subtitle={formatDate(date)}
-          handleBack={this.props.handleBackButtonPress}
+          handleBack={goBack}
           handleDelete={
             this.state.shouldShowDelete && this.showConfirmationAlert
           }
@@ -126,11 +100,17 @@ class SymptomView extends Component {
 
 const mapStateToProps = (state) => {
   return({
-    date: getDate(state)
+    date: getDate(state),
+  })
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return({
+    goBack: () => dispatch(goBack()),
   })
 }
 
 export default connect(
   mapStateToProps,
-  null
+  mapDispatchToProps,
 )(SymptomView)

components/cycle-day/symptoms/temperature.js

@@ -20,7 +20,6 @@ class Temperature extends Component {
 
   static propTypes = {
     cycleDay: PropTypes.object,
-    handleBackButtonPress: PropTypes.func,
     date: PropTypes.string.isRequired,
   }
 
@@ -90,7 +89,6 @@ class Temperature extends Component {
       <SymptomView
         symptom={'temperature'}
         values={this.state}
-        handleBackButtonPress={this.props.handleBackButtonPress}
         date={this.props.date}
       >
         <SymptomSection

components/home.js

@@ -30,11 +30,10 @@ class Home extends Component {
   static propTypes = {
     navigate: PropTypes.func,
     setDate: PropTypes.func,
-    // The following three is not being used,
+    // The following are not being used,
     // we could see if it's possible to not pass them from the <App />
     cycleDay: PropTypes.object,
     date: PropTypes.string,
-    handleBackButtonPress: PropTypes.func,
   }
 
   constructor(props) {