From 291992f49a34c82f3ec851a3b5a3c996fda259cd Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Fri, 8 Jun 2018 16:25:32 +0200 Subject: [PATCH 1/6] Replace datepicker with calendar --- bleeding.js | 1 + datepicker.js | 46 +- db.js | 5 +- package-lock.json | 3140 +++++++++++++++++++++++---------------------- package.json | 1 + 5 files changed, 1619 insertions(+), 1574 deletions(-) diff --git a/bleeding.js b/bleeding.js index 6501246..fd38fd9 100644 --- a/bleeding.js +++ b/bleeding.js @@ -11,6 +11,7 @@ import { saveBleeding } from './db' import { formatDateForViewHeader } from './format' import { bleeding as labels } from './labels' import getCycleDay from './get-cycle-day' +import { bleedingDaysSortedByDate } from './db' export default class Bleeding extends Component { constructor(props) { diff --git a/datepicker.js b/datepicker.js index df300ba..337e2ad 100644 --- a/datepicker.js +++ b/datepicker.js @@ -1,33 +1,47 @@ import React, { Component } from 'react' -import { - View, Button, DatePickerAndroid -} from 'react-native' +import { View } from 'react-native' +import { Calendar } from 'react-native-calendars' import * as styles from './styles' -import { getOrCreateCycleDay } from './db' +import { getOrCreateCycleDay, bleedingDaysSortedByDate } from './db' + + export default class DatePickView extends Component { constructor(props) { super(props) - } - - async pickDate() { - const result = await DatePickerAndroid.open({ - date: new Date() - }) - if (result.action !== DatePickerAndroid.dismissedAction) { - const date = new Date(result.year, result.month, result.day) - const cycleDay = getOrCreateCycleDay(date) - const navigate = this.props.navigation.navigate - navigate('dayView', { cycleDay }) + this.state = { + cycleDays: bleedingDaysSortedByDate } } + passDateToDayView(result) { + // TODO this also has date as a string, perhaps useful for LocalDateFormat + const date = new Date(result.year, result.month - 1, result.day) + const cycleDay = getOrCreateCycleDay(date) + const navigate = this.props.navigation.navigate + navigate('dayView', { cycleDay }) + } + + rerenderCalendar() { + + } + render() { + const bleedingDaysInCalFormat = bleedingDaysSortedByDate.reduce((acc, day) => { + const dateString = day.date.toISOString().slice(0, 10) + acc[dateString] = { startingDay: true, endingDay: true, color: 'red' } + return acc + }, {}) return ( - From 80bf63adc23ce8dd4195c520f00a68edad1bdcfe Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Fri, 8 Jun 2018 19:05:03 +0200 Subject: [PATCH 5/6] Display differing shades of red depending on bleeding value --- calendar.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/calendar.js b/calendar.js index 50a9637..2cb6f94 100644 --- a/calendar.js +++ b/calendar.js @@ -37,9 +37,10 @@ export default class DatePickView extends Component { } function getBleedingDaysInCalFormat(bleedingDaysSortedByDate) { + const shadesOfRed = ['#ffbaba', '#ff7b7b', '#ff5252', '#ff0000'] return bleedingDaysSortedByDate.reduce((acc, day) => { const dateString = day.date.toISOString().slice(0, 10) - acc[dateString] = { startingDay: true, endingDay: true, color: 'red' } + acc[dateString] = { startingDay: true, endingDay: true, color: shadesOfRed[day.bleeding.value] } return acc }, {}) } \ No newline at end of file From 75a97089f9d13e3ae88eec8f82a07645c0b46678 Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Sat, 9 Jun 2018 15:06:13 +0200 Subject: [PATCH 6/6] Remove listener when component unmounts --- bleeding.js | 1 - calendar.js | 13 +++++++++---- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/bleeding.js b/bleeding.js index fd38fd9..6501246 100644 --- a/bleeding.js +++ b/bleeding.js @@ -11,7 +11,6 @@ import { saveBleeding } from './db' import { formatDateForViewHeader } from './format' import { bleeding as labels } from './labels' import getCycleDay from './get-cycle-day' -import { bleedingDaysSortedByDate } from './db' export default class Bleeding extends Component { constructor(props) { diff --git a/calendar.js b/calendar.js index 2cb6f94..4fdbd2f 100644 --- a/calendar.js +++ b/calendar.js @@ -9,10 +9,11 @@ export default class DatePickView extends Component { super(props) this.state = { bleedingDaysInCalFormat: getBleedingDaysInCalFormat(bleedingDaysSortedByDate) } - // so we rerender the calendar when there are new bleeding days - bleedingDaysSortedByDate.addListener(() => { - this.setState({ bleedingDaysInCalFormat: getBleedingDaysInCalFormat(bleedingDaysSortedByDate) }) - }) + bleedingDaysSortedByDate.addListener(setStateWithCalendarFormattedDays.bind(this)) + } + + componentWillUnmount() { + bleedingDaysSortedByDate.removeListener(setStateWithCalendarFormattedDays) } passDateToDayView(result) { @@ -43,4 +44,8 @@ function getBleedingDaysInCalFormat(bleedingDaysSortedByDate) { acc[dateString] = { startingDay: true, endingDay: true, color: shadesOfRed[day.bleeding.value] } return acc }, {}) +} + +function setStateWithCalendarFormattedDays() { + this.setState({ bleedingDaysInCalFormat: getBleedingDaysInCalFormat(bleedingDaysSortedByDate) }) } \ No newline at end of file