Make bleeding view into a child component

app.js

@@ -1,10 +1,8 @@
 import { createStackNavigator } from 'react-navigation'
 import Home from './home'
 
-import Temperature from './temperature'
 import Calendar from './calendar'
-import DayView from './day-view'
-import Bleeding from './bleeding'
+import Day from './day'
 
 // this is until react native fixes this bug, see https://github.com/facebook/react-native/issues/18868#issuecomment-382671739
 import { YellowBox } from 'react-native'
@@ -12,9 +10,6 @@ YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated'])
 
 export default createStackNavigator({
   home: { screen: Home },
-
-  temperature: { screen: Temperature },
   calendar: { screen: Calendar },
-  dayView: { screen: DayView },
-  bleeding: { screen: Bleeding }
+  day: { screen: Day }
 })

bleeding.js

@@ -8,16 +8,13 @@ import {
 import RadioForm from 'react-native-simple-radio-button'
 import styles from './styles'
 import { saveBleeding } from './db'
-import { formatDateForViewHeader } from './format'
 import { bleeding as labels } from './labels'
-import cycleDayModule from './get-cycle-day-number'
-
-const getCycleDayNumber = cycleDayModule()
 
 export default class Bleeding extends Component {
   constructor(props) {
     super(props)
-    this.cycleDay = props.navigation.state.params.cycleDay
+    this.cycleDay = props.cycleDay
+    this.bringIntoView = props.bringIntoView
     let bleedingValue = this.cycleDay.bleeding && this.cycleDay.bleeding.value
     if (! (typeof bleedingValue === 'number') ){
       bleedingValue = -1
@@ -28,10 +25,7 @@ export default class Bleeding extends Component {
     }
   }
 
-  // TODO display cycle day
   render() {
-    const navigate = this.props.navigation.navigate
-    const day = this.cycleDay
     const bleedingRadioProps = [
       {label: labels[0], value: 0 },
       {label: labels[1], value: 1 },
@@ -40,8 +34,6 @@ export default class Bleeding extends Component {
     ]
     return (
       <View style={styles.container}>
-        <Text style={styles.welcome}>{formatDateForViewHeader(day.date)}</Text>
-        <Text>Cycle day {getCycleDayNumber(day.date)}</Text>
         <Text>Bleeding</Text>
         <RadioForm
           radio_props={bleedingRadioProps}
@@ -59,25 +51,23 @@ export default class Bleeding extends Component {
           }}
           value={this.state.exclude} />
         <Button
-          onPress={() => {
-            navigate('dayView', { cycleDay: day })
-          }}
+          onPress={() => this.bringIntoView('dayView')}
           title="Cancel">
         </Button>
         <Button
           onPress={() => {
-            saveBleeding(day)
-            navigate('dayView', { cycleDay: day })
+            saveBleeding(this.cycleDay)
+            this.bringIntoView('dayView')
           }}
           title="Delete entry">
         </Button>
         <Button
           onPress={() => {
-            saveBleeding(day, {
+            saveBleeding(this.cycleDay, {
               value: this.state.currentValue,
               exclude: this.state.exclude
             })
-            navigate('dayView', { cycleDay: day })
+            this.bringIntoView('dayView')
           }}
           disabled={ this.state.currentValue === -1 }
           title="Save">

calendar.js

@@ -19,7 +19,7 @@ export default class DatePickView extends Component {
   passDateToDayView(result) {
     const cycleDay = getOrCreateCycleDay(result.dateString)
     const navigate = this.props.navigation.navigate
-    navigate('dayView', { cycleDay })
+    navigate('day', { cycleDay })
   }
 
   render() {

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 >

day.js

@@ -0,0 +1,50 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Text
+} from 'react-native'
+import cycleDayModule from './get-cycle-day-number'
+import { bleedingDaysSortedByDate } from './db'
+import DayView from './day-view'
+import BleedingEditView from './bleeding'
+import TemperatureEditView from './temperature'
+import { formatDateForViewHeader } from './format'
+import styles from './styles'
+
+const getCycleDayNumber = cycleDayModule()
+
+export default class Day extends Component {
+  constructor(props) {
+    super(props)
+    this.cycleDay = props.navigation.state.params.cycleDay
+    this.cycleDayNumber = getCycleDayNumber(this.cycleDay.date)
+
+    this.state = {
+      visibleComponent: 'dayView',
+    }
+
+    this.bringIntoView = view => {
+      this.setState({visibleComponent: view})
+    }
+  }
+
+  componentWillUnmount() {
+    bleedingDaysSortedByDate.removeAllListeners()
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.welcome}>{formatDateForViewHeader(this.cycleDay.date)}</Text>
+        <Text>Cycle day {getCycleDayNumber(this.cycleDay.date)}</Text>
+        {
+          { dayView: <DayView cycleDay={this.cycleDay} bringIntoView={this.bringIntoView} />,
+            bleedingEditView: <BleedingEditView cycleDay={this.cycleDay} bringIntoView={this.bringIntoView}/>,
+            temperatureEditView: <TemperatureEditView cycleDay={this.cycleDay} bringIntoView={this.bringIntoView}/>
+          }[this.state.visibleComponent]
+        }
+
+      </View >
+    )
+  }
+}