From 2a1c7fce7c5c14948a4c93a76089d951c81703ca Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Thu, 14 Jun 2018 11:11:23 +0200 Subject: [PATCH 1/9] 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 3a310a0..423ab23 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 31dc8c6..7fb32ab 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 ( - {formatDateForViewHeader(day.date)} - Cycle day {getCycleDayNumber(day.date)} Bleeding diff --git a/day.js b/day.js new file mode 100644 index 0000000..875ba94 --- /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 ( + + {formatDateForViewHeader(this.cycleDay.date)} + Cycle day {getCycleDayNumber(this.cycleDay.date)} + { + { dayView: , + bleedingEditView: , + temperatureEditView: + }[this.state.visibleComponent] + } + + + ) + } +} \ No newline at end of file From 38b850709159c7d73fe17d50de6ed440a79029e5 Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Thu, 14 Jun 2018 11:18:20 +0200 Subject: [PATCH 2/9] Remove superfluous listener remove --- day.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/day.js b/day.js index 875ba94..1347716 100644 --- a/day.js +++ b/day.js @@ -4,7 +4,6 @@ import { 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' @@ -28,10 +27,6 @@ export default class Day extends Component { } } - componentWillUnmount() { - bleedingDaysSortedByDate.removeAllListeners() - } - render() { return ( From dd8b527f964954b75fbc0f5f1d47c5406b9e6b68 Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Thu, 14 Jun 2018 12:08:46 +0200 Subject: [PATCH 3/9] Remove navigate from temperature component --- temperature.js | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/temperature.js b/temperature.js index 5e2f00a..5bf20c3 100644 --- a/temperature.js +++ b/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.bringIntoView = props.bringIntoView 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 ( - - {formatDateForViewHeader(cycleDay.date)} - Cycle day {getCycleDayNumber()} + Temperature @@ -75,7 +68,7 @@ export default class Temp extends Component { value: Number(this.state.currentValue), exclude: this.state.exclude }) - navigate('dayView', { cycleDay }) + this.bringIntoView('dayView') }} disabled={ this.state.currentValue === '' } title="Save"> From 166c69581b889ba5c0cf98e8a90ee2000677cc90 Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Thu, 14 Jun 2018 14:02:07 +0200 Subject: [PATCH 4/9] Disable prop-types rule --- .eslintrc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.eslintrc b/.eslintrc index 9fa10f3..24f9ab5 100644 --- a/.eslintrc +++ b/.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 } } \ No newline at end of file From 7dc78ff32ca374e101c6387230ff4aa1addae0ae Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Thu, 14 Jun 2018 14:02:39 +0200 Subject: [PATCH 5/9] Only show cycle day label when there is a cycle day number --- day.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/day.js b/day.js index 1347716..294462b 100644 --- a/day.js +++ b/day.js @@ -31,7 +31,7 @@ export default class Day extends Component { return ( {formatDateForViewHeader(this.cycleDay.date)} - Cycle day {getCycleDayNumber(this.cycleDay.date)} + { this.cycleDayNumber && Cycle day {this.cycleDayNumber} } { { dayView: , bleedingEditView: , From 547d3f7a12ee1300e05b376cb3adaf8fa2b6e2e0 Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Thu, 14 Jun 2018 14:11:10 +0200 Subject: [PATCH 6/9] Also navigate to day container from 'edit today' button --- home.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/home.js b/home.js index 9ae5917..98f79cd 100644 --- a/home.js +++ b/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('day', { cycleDay }) } render() { From 5041a45576a347f7f65286079b830c9b397039c2 Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Thu, 14 Jun 2018 14:48:09 +0200 Subject: [PATCH 7/9] Rename cycle day container and overview component --- app.js | 2 +- day-view.js => cycle-day-overview.js | 0 day.js => cycle-day.js | 2 +- 3 files changed, 2 insertions(+), 2 deletions(-) rename day-view.js => cycle-day-overview.js (100%) rename day.js => cycle-day.js (96%) diff --git a/app.js b/app.js index 423ab23..012b396 100644 --- a/app.js +++ b/app.js @@ -2,7 +2,7 @@ import { createStackNavigator } from 'react-navigation' import Home from './home' import Calendar from './calendar' -import Day from './day' +import Day 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' diff --git a/day-view.js b/cycle-day-overview.js similarity index 100% rename from day-view.js rename to cycle-day-overview.js diff --git a/day.js b/cycle-day.js similarity index 96% rename from day.js rename to cycle-day.js index 294462b..35d887d 100644 --- a/day.js +++ b/cycle-day.js @@ -4,7 +4,7 @@ import { Text } from 'react-native' import cycleDayModule from './get-cycle-day-number' -import DayView from './day-view' +import DayView from './cycle-day-overview' import BleedingEditView from './bleeding' import TemperatureEditView from './temperature' import { formatDateForViewHeader } from './format' From be0b9ba09e6d19c975e8ac6a97f23a5803c0b361 Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Thu, 14 Jun 2018 14:49:45 +0200 Subject: [PATCH 8/9] Rename showView callback --- bleeding.js | 8 ++++---- cycle-day-overview.js | 6 +++--- cycle-day.js | 8 ++++---- temperature.js | 8 ++++---- 4 files changed, 15 insertions(+), 15 deletions(-) diff --git a/bleeding.js b/bleeding.js index 7fb32ab..2854aeb 100644 --- a/bleeding.js +++ b/bleeding.js @@ -14,7 +14,7 @@ export default class Bleeding extends Component { constructor(props) { super(props) this.cycleDay = props.cycleDay - this.bringIntoView = props.bringIntoView + this.showView = props.bringIntoView let bleedingValue = this.cycleDay.bleeding && this.cycleDay.bleeding.value if (! (typeof bleedingValue === 'number') ){ bleedingValue = -1 @@ -51,13 +51,13 @@ export default class Bleeding extends Component { }} value={this.state.exclude} /> @@ -67,7 +67,7 @@ export default class Bleeding extends Component { value: this.state.currentValue, exclude: this.state.exclude }) - this.bringIntoView('dayView') + this.showView('dayView') }} disabled={ this.state.currentValue === -1 } title="Save"> diff --git a/cycle-day-overview.js b/cycle-day-overview.js index ac73006..bafe44e 100644 --- a/cycle-day-overview.js +++ b/cycle-day-overview.js @@ -15,7 +15,7 @@ export default class DayView extends Component { constructor(props) { super(props) this.cycleDay = props.cycleDay - this.bringIntoView = props.bringIntoView + this.showView = props.bringIntoView bleedingDaysSortedByDate.addListener(setStateWithCurrentCycleDayNumber.bind(this)) } @@ -46,11 +46,11 @@ export default class DayView extends Component { {bleedingLabel} {temperatureLabel} diff --git a/cycle-day.js b/cycle-day.js index 35d887d..f16fb85 100644 --- a/cycle-day.js +++ b/cycle-day.js @@ -22,7 +22,7 @@ export default class Day extends Component { visibleComponent: 'dayView', } - this.bringIntoView = view => { + this.showView = view => { this.setState({visibleComponent: view}) } } @@ -33,9 +33,9 @@ export default class Day extends Component { {formatDateForViewHeader(this.cycleDay.date)} { this.cycleDayNumber && Cycle day {this.cycleDayNumber} } { - { dayView: , - bleedingEditView: , - temperatureEditView: + { dayView: , + bleedingEditView: , + temperatureEditView: }[this.state.visibleComponent] } diff --git a/temperature.js b/temperature.js index 5bf20c3..fe2a9a7 100644 --- a/temperature.js +++ b/temperature.js @@ -13,7 +13,7 @@ export default class Temp extends Component { constructor(props) { super(props) this.cycleDay = props.cycleDay - this.bringIntoView = props.bringIntoView + this.showView = props.bringIntoView let initialValue if(this.cycleDay.temperature) { @@ -51,14 +51,14 @@ export default class Temp extends Component { /> @@ -68,7 +68,7 @@ export default class Temp extends Component { value: Number(this.state.currentValue), exclude: this.state.exclude }) - this.bringIntoView('dayView') + this.showView('dayView') }} disabled={ this.state.currentValue === '' } title="Save"> From c72e8d45a9786b588a5860ddad01a56e1763f69a Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Thu, 14 Jun 2018 14:55:08 +0200 Subject: [PATCH 9/9] Rename screen in navigtor --- app.js | 4 ++-- bleeding.js | 2 +- calendar.js | 2 +- cycle-day-overview.js | 2 +- cycle-day.js | 6 +++--- home.js | 2 +- temperature.js | 2 +- 7 files changed, 10 insertions(+), 10 deletions(-) diff --git a/app.js b/app.js index 012b396..70c1a05 100644 --- a/app.js +++ b/app.js @@ -2,7 +2,7 @@ import { createStackNavigator } from 'react-navigation' import Home from './home' import Calendar from './calendar' -import Day from './cycle-day' +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' @@ -11,5 +11,5 @@ YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated']) export default createStackNavigator({ home: { screen: Home }, calendar: { screen: Calendar }, - day: { screen: Day } + cycleDay: { screen: CycleDay } }) diff --git a/bleeding.js b/bleeding.js index 2854aeb..4019e9c 100644 --- a/bleeding.js +++ b/bleeding.js @@ -14,7 +14,7 @@ export default class Bleeding extends Component { constructor(props) { super(props) this.cycleDay = props.cycleDay - this.showView = props.bringIntoView + this.showView = props.showView let bleedingValue = this.cycleDay.bleeding && this.cycleDay.bleeding.value if (! (typeof bleedingValue === 'number') ){ bleedingValue = -1 diff --git a/calendar.js b/calendar.js index 2274a14..2880647 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('day', { cycleDay }) + navigate('cycleDay', { cycleDay }) } render() { diff --git a/cycle-day-overview.js b/cycle-day-overview.js index bafe44e..eca8cb6 100644 --- a/cycle-day-overview.js +++ b/cycle-day-overview.js @@ -15,7 +15,7 @@ export default class DayView extends Component { constructor(props) { super(props) this.cycleDay = props.cycleDay - this.showView = props.bringIntoView + this.showView = props.showView bleedingDaysSortedByDate.addListener(setStateWithCurrentCycleDayNumber.bind(this)) } diff --git a/cycle-day.js b/cycle-day.js index f16fb85..de5a577 100644 --- a/cycle-day.js +++ b/cycle-day.js @@ -33,9 +33,9 @@ export default class Day extends Component { {formatDateForViewHeader(this.cycleDay.date)} { this.cycleDayNumber && Cycle day {this.cycleDayNumber} } { - { dayView: , - bleedingEditView: , - temperatureEditView: + { dayView: , + bleedingEditView: , + temperatureEditView: }[this.state.visibleComponent] } diff --git a/home.js b/home.js index 98f79cd..81b2d13 100644 --- a/home.js +++ b/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('day', { cycleDay }) + navigate('cycleDay', { cycleDay }) } render() { diff --git a/temperature.js b/temperature.js index fe2a9a7..786248b 100644 --- a/temperature.js +++ b/temperature.js @@ -13,7 +13,7 @@ export default class Temp extends Component { constructor(props) { super(props) this.cycleDay = props.cycleDay - this.showView = props.bringIntoView + this.showView = props.showView let initialValue if(this.cycleDay.temperature) {