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}>