From 291992f49a34c82f3ec851a3b5a3c996fda259cd Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Fri, 8 Jun 2018 16:25:32 +0200 Subject: [PATCH] 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 ( -