Merge branch '57-refactor-day-view-to-share-state-with-children' into 'master'

Resolve "refactor day view to share state with children"

Closes #57

See merge request bloodyhealth/drip!15

.eslintrc

@@ -47,6 +47,6 @@
     "no-var": "error",
     "prefer-const": "error",
     "no-trailing-spaces": "error",
-    "react/prop-types": ["error", {"ignore": ["navigation"]}]
+    "react/prop-types": 0
   }
 }

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 CycleDay from './cycle-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 }
+  cycleDay: { screen: CycleDay }
 })

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.showView = props.showView
     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.showView('dayView')}
           title="Cancel">
         </Button>
         <Button
           onPress={() => {
-            saveBleeding(day)
-            navigate('dayView', { cycleDay: day })
+            saveBleeding(this.cycleDay)
+            this.showView('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.showView('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('cycleDay', { cycleDay })
   }
 
   render() {

cycle-day-overview.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.showView = props.showView
     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.showView('bleedingEditView')}
           title="Edit bleeding">
         </Button>
         <Button
-          onPress={() => navigate('temperature', { cycleDay })}
+          onPress={() => this.showView('temperatureEditView')}
           title="Edit temperature">
         </Button>
       </View >

cycle-day.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Text
+} from 'react-native'
+import cycleDayModule from './get-cycle-day-number'
+import DayView from './cycle-day-overview'
+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.showView = view => {
+      this.setState({visibleComponent: view})
+    }
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.welcome}>{formatDateForViewHeader(this.cycleDay.date)}</Text>
+        { this.cycleDayNumber && <Text>Cycle day {this.cycleDayNumber}</Text> }
+        {
+          { dayView: <DayView cycleDay={this.cycleDay} showView={this.showView} />,
+            bleedingEditView: <BleedingEditView cycleDay={this.cycleDay} showView={this.showView}/>,
+            temperatureEditView: <TemperatureEditView cycleDay={this.cycleDay} showView={this.showView}/>
+          }[this.state.visibleComponent]
+        }
+
+      </View >
+    )
+  }
+}

home.js

@@ -32,7 +32,7 @@ export default class Home extends Component {
     const todayDateString = LocalDate.now().toString()
     const cycleDay = getOrCreateCycleDay(todayDateString)
     const navigate = this.props.navigation.navigate
-    navigate('dayView', { cycleDay })
+    navigate('cycleDay', { cycleDay })
   }
 
   render() {

temperature.js

@@ -7,17 +7,13 @@ import {
   Switch
 } from 'react-native'
 
-import styles from './styles'
 import { saveTemperature, getPreviousTemperature } from './db'
-import { formatDateForViewHeader } from './format'
-import cycleDayModule from './get-cycle-day-number'
-
-const getCycleDayNumber = cycleDayModule()
 
 export default class Temp extends Component {
   constructor(props) {
     super(props)
-    this.cycleDay = props.navigation.state.params.cycleDay
+    this.cycleDay = props.cycleDay
+    this.showView = props.showView
     let initialValue
 
     if(this.cycleDay.temperature) {
@@ -34,12 +30,9 @@ export default class Temp extends Component {
   }
 
   render() {
-    const navigate = this.props.navigation.navigate
     const cycleDay = this.cycleDay
     return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>{formatDateForViewHeader(cycleDay.date)}</Text>
-        <Text>Cycle day {getCycleDayNumber()}</Text>
+      <View>
         <Text>Temperature</Text>
         <TextInput
           placeholder="Enter temperature"
@@ -58,14 +51,14 @@ export default class Temp extends Component {
         />
         <Button
           onPress={() => {
-            navigate('dayView', { cycleDay })
+            this.showView('dayView')
           }}
           title="Cancel">
         </Button>
         <Button
           onPress={() => {
             saveTemperature(cycleDay)
-            navigate('dayView', { cycleDay })
+            this.showView('dayView')
           }}
           title="Delete entry">
         </Button>
@@ -75,7 +68,7 @@ export default class Temp extends Component {
               value: Number(this.state.currentValue),
               exclude: this.state.exclude
             })
-            navigate('dayView', { cycleDay })
+            this.showView('dayView')
           }}
           disabled={ this.state.currentValue === '' }
           title="Save">