diff --git a/components/calendar.js b/components/calendar.js index fd85d3a..d579c31 100644 --- a/components/calendar.js +++ b/components/calendar.js @@ -1,19 +1,23 @@ import React, { Component } from 'react' import { CalendarList } from 'react-native-calendars' import { getOrCreateCycleDay, bleedingDaysSortedByDate } from '../db' +import cycleModule from '../lib/cycle' export default class CalendarView extends Component { constructor(props) { super(props) + const predictedMenses = cycleModule().getPredictedMenses() this.state = { - bleedingDaysInCalFormat: toCalFormat(bleedingDaysSortedByDate) + bleedingDaysInCalFormat: toCalFormat(bleedingDaysSortedByDate), + predictedBleedingDaysInCalFormat: predictionToCalFormat(predictedMenses) } this.setStateWithCalFormattedDays = (function (CalendarComponent) { - return function(_, changes) { - if (Object.values(changes).every(x => x && !x.length)) return + return function() { + const predictedMenses = cycleModule().getPredictedMenses() CalendarComponent.setState({ - bleedingDaysInCalFormat: toCalFormat(bleedingDaysSortedByDate) + bleedingDaysInCalFormat: toCalFormat(bleedingDaysSortedByDate), + predictedBleedingDaysInCalFormat: predictionToCalFormat(predictedMenses) }) } })(this) @@ -34,8 +38,14 @@ export default class CalendarView extends Component { render() { return ( ) @@ -52,4 +62,21 @@ function toCalFormat(bleedingDaysSortedByDate) { } return acc }, {}) +} + +function predictionToCalFormat(predictedDays) { + if (!predictedDays.length) return {} + const shadesOfGrey = ['#e5e5e5', '#cccccc'] // [lighter, darker] + const middleIndex = (predictedDays[0].length - 1) / 2 + return predictedDays.reduce((acc, setOfDays) => { + setOfDays.reduce((accSet, day, i) => { + accSet[day] = { + startingDay: true, + endingDay: true, + color: (i === middleIndex) ? shadesOfGrey[1] : shadesOfGrey[0] + } + return accSet + }, acc) + return acc + }, {}) } \ No newline at end of file diff --git a/components/home.js b/components/home.js index 2962492..6f4ab05 100644 --- a/components/home.js +++ b/components/home.js @@ -5,10 +5,11 @@ import { Text, ScrollView } from 'react-native' -import { LocalDate } from 'js-joda' +import { LocalDate, ChronoUnit } from 'js-joda' import styles from '../styles/index' import cycleModule from '../lib/cycle' import { getOrCreateCycleDay, bleedingDaysSortedByDate, fillWithDummyData, deleteAll } from '../db' +import {bleedingPrediction as labels} from './labels' const getCycleDayNumber = cycleModule().getCycleDayNumber @@ -19,23 +20,25 @@ export default class Home extends Component { const cycleDayNumber = getCycleDayNumber(this.todayDateString) this.state = { - welcomeText: determineWelcomeText(cycleDayNumber) + welcomeText: determineWelcomeText(cycleDayNumber), + predictionText: determinePredictionText() } - this.setStateWithCurrentWelcomeText = (function (HomeComponent) { + this.setStateWithCurrentText = (function (HomeComponent) { return function () { const cycleDayNumber = getCycleDayNumber(HomeComponent.todayDateString) HomeComponent.setState({ - welcomeText: determineWelcomeText(cycleDayNumber) + welcomeText: determineWelcomeText(cycleDayNumber), + predictionText: determinePredictionText() }) } })(this) - bleedingDaysSortedByDate.addListener(this.setStateWithCurrentWelcomeText) + bleedingDaysSortedByDate.addListener(this.setStateWithCurrentText) } componentWillUnmount() { - bleedingDaysSortedByDate.removeListener(this.setStateWithCurrentWelcomeText) + bleedingDaysSortedByDate.removeListener(this.setStateWithCurrentText) } passTodayToDayView() { @@ -49,6 +52,7 @@ export default class Home extends Component { return ( {this.state.welcomeText} + {this.state.predictionText}