From 2a1c7fce7c5c14948a4c93a76089d951c81703ca Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Thu, 14 Jun 2018 11:11:23 +0200
Subject: [PATCH] Make bleeding view into a child component
---
app.js | 9 ++-------
bleeding.js | 24 +++++++-----------------
calendar.js | 2 +-
day-view.js | 25 +++++++++----------------
day.js | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++
5 files changed, 69 insertions(+), 41 deletions(-)
create mode 100644 day.js
diff --git a/app.js b/app.js
index 3a310a0e..423ab239 100644
--- a/app.js
+++ b/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 }
})
diff --git a/bleeding.js b/bleeding.js
index 31dc8c69..7fb32ab8 100644
--- a/bleeding.js
+++ b/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">
diff --git a/calendar.js b/calendar.js
index b23025d3..2274a14e 100644
--- a/calendar.js
+++ b/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() {
diff --git a/day-view.js b/day-view.js
index 03752193..ac73006b 100644
--- a/day-view.js
+++ b/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 >
diff --git a/day.js b/day.js
new file mode 100644
index 00000000..875ba948
--- /dev/null
+++ b/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 >
+ )
+ }
+}
\ No newline at end of file
--
GitLab