Refactors the header

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

@@ -9,8 +9,9 @@ import Header from '../header'
 import FillerBoxes from './FillerBoxes'
 import SymptomBox from './SymptomBox'
 
-import { getCycleDay } from '../../db'
 import cycleModule from '../../lib/cycle'
+import formatDate from '../helpers/format-date'
+import { getCycleDay } from '../../db'
 import styles from '../../styles'
 
 class CycleDayOverView extends Component {
@@ -21,28 +22,34 @@ class CycleDayOverView extends Component {
     }
   }
 
-  goToCycleDay = (target) => {
-    const localDate = LocalDate.parse(this.props.date)
-    const targetDate = target === 'before' ?
-      localDate.minusDays(1).toString() :
-      localDate.plusDays(1).toString()
-    this.props.setDate(targetDate)
+  updateCycleDay = (date) => {
+    this.props.setDate(date)
     this.setState({
-      cycleDay: getCycleDay(targetDate)
+      cycleDay: getCycleDay(date)
     })
   }
 
+  goToPrevDay = () => {
+    const { date } = this.props
+    const prevDate = LocalDate.parse(date).minusDays(1).toString()
+    this.updateCycleDay(prevDate)
+  }
+
+  goToNextDay = () => {
+    const { date } = this.props
+    const nextDate = LocalDate.parse(date).plusDays(1).toString()
+    this.updateCycleDay(nextDate)
+  }
+
   navigate(symptom) {
     const { cycleDay } = this.state
     this.props.navigate(symptom, cycleDay)
   }
 
   render() {
-    const { getCycleDayNumber } = cycleModule()
     const { cycleDay } = this.state
     const { date } = this.props
 
-    const cycleDayNumber = getCycleDayNumber(date)
     const dateInFuture = LocalDate.now().isBefore(LocalDate.parse(date))
 
     const symptomBoxesList = [
@@ -57,13 +64,18 @@ class CycleDayOverView extends Component {
       'note',
     ]
 
+    const { getCycleDayNumber } = cycleModule()
+    const cycleDayNumber = getCycleDayNumber(date)
+    const headerSubtitle =
+      cycleDayNumber && `Cycle day ${cycleDayNumber}`.toLowerCase()
+
     return (
       <View style={{ flex: 1 }}>
         <Header
-          isCycleDayOverView={true}
-          cycleDayNumber={cycleDayNumber}
-          date={date}
-          goToCycleDay={this.goToCycleDay}
+          handleBack={this.goToPrevDay}
+          handleNext={this.goToNextDay}
+          title={formatDate(date)}
+          subtitle={headerSubtitle}
         />
         <ScrollView>
           <View style={styles.symptomBoxesView}>

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

@@ -6,8 +6,9 @@ import { connect } from 'react-redux'
 import { getDate } from '../../../slices/date'
 
 import { saveSymptom } from '../../../db'
+import formatDate from '../../helpers/format-date'
 
-import Header from '../../header/symptom-view'
+import Header from '../../header'
 import SymptomInfo from './symptom-info'
 
 import { headerTitles } from '../../../i18n/en/labels'
@@ -80,16 +81,36 @@ class SymptomView extends Component {
     )
   }
 
+  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]
+    )
+  }
+
   render() {
     const { symptom } = this.props
     return (
       <View style={{flex: 1}}>
         <Header
           title={headerTitles[symptom].toLowerCase()}
-          date={this.date}
-          goBack={this.props.handleBackButtonPress}
-          shouldShowDelete={this.state.shouldShowDelete}
-          onDelete={this.showConfirmationAlert}
+          subtitle={formatDate(this.date)}
+          handleBack={this.props.handleBackButtonPress}
+          handleDelete={
+            this.state.shouldShowDelete && this.showConfirmationAlert
+          }
         />
         <View flex={1}>
           <ScrollView style={styles.page}>