Make bleeding view into a child component

day-view.js

@@ -5,7 +5,6 @@ import {
   Text
 } from 'react-native'
 import styles from './styles'
-import { formatDateForViewHeader } from './format'
 import { bleeding as labels} from './labels'
 import cycleDayModule from './get-cycle-day-number'
 import { bleedingDaysSortedByDate } from './db'
@@ -15,10 +14,8 @@ const getCycleDayNumber = cycleDayModule()
 export default class DayView extends Component {
   constructor(props) {
     super(props)
-    this.cycleDay = props.navigation.state.params.cycleDay
-    this.state = {
-      cycleDayNumber: getCycleDayNumber(this.cycleDay.date),
-    }
+    this.cycleDay = props.cycleDay
+    this.bringIntoView = props.bringIntoView
     bleedingDaysSortedByDate.addListener(setStateWithCurrentCycleDayNumber.bind(this))
   }
 
@@ -27,37 +24,33 @@ export default class DayView extends Component {
   }
 
   render() {
-    const navigate = this.props.navigation.navigate
-    const cycleDay = this.cycleDay
-    const bleedingValue = cycleDay.bleeding && cycleDay.bleeding.value
+    const bleedingValue = this.cycleDay.bleeding && this.cycleDay.bleeding.value
     let bleedingLabel
     if (typeof bleedingValue === 'number') {
       bleedingLabel = `Bleeding: ${labels[bleedingValue]}`
-      if (cycleDay.bleeding.exclude) bleedingLabel += " (Excluded)"
+      if (this.cycleDay.bleeding.exclude) bleedingLabel += " (Excluded)"
     } else {
       bleedingLabel = null
     }
-    const temperatureValue = cycleDay.temperature && cycleDay.temperature.value
+    const temperatureValue = this.cycleDay.temperature && this.cycleDay.temperature.value
     let temperatureLabel
     if (typeof temperatureValue === 'number') {
       temperatureLabel = `Temperature: ${temperatureValue}`
-      if (cycleDay.temperature.exclude) temperatureLabel += " (Excluded)"
+      if (this.cycleDay.temperature.exclude) temperatureLabel += " (Excluded)"
     } else {
       temperatureLabel = null
     }
 
     return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>{formatDateForViewHeader(cycleDay.date)}</Text>
-        <Text>Cycle day {getCycleDayNumber(cycleDay.date)}</Text>
+      <View>
         <Text style={styles.welcome}>{bleedingLabel}</Text>
         <Text style={styles.welcome}>{temperatureLabel}</Text>
         <Button
-          onPress={() => navigate('bleeding', { cycleDay })}
+          onPress={() => this.bringIntoView('bleedingEditView')}
           title="Edit bleeding">
         </Button>
         <Button
-          onPress={() => navigate('temperature', { cycleDay })}
+          onPress={() => this.bringIntoView('temperatureEditView')}
           title="Edit temperature">
         </Button>
       </View >