From 20c08674225e9b7e3edb9f770da2f68ceac1b870 Mon Sep 17 00:00:00 2001 From: tina Date: Fri, 14 Sep 2018 16:41:27 +0200 Subject: [PATCH 1/2] shows predicted bleeding with red circles, also sets up today formatting --- components/calendar.js | 55 +++++++++++++++++++++++++++++++++--------- styles/index.js | 8 +++++- 2 files changed, 51 insertions(+), 12 deletions(-) diff --git a/components/calendar.js b/components/calendar.js index af213dd..13c466c 100644 --- a/components/calendar.js +++ b/components/calendar.js @@ -1,8 +1,10 @@ import React, { Component } from 'react' import { CalendarList } from 'react-native-calendars' +import {LocalDate} from 'js-joda' import { getOrCreateCycleDay, bleedingDaysSortedByDate } from '../db' import cycleModule from '../lib/cycle' -import {shadesOfRed, shadesOfGrey} from '../styles/index' +import {shadesOfRed} from '../styles/index' +import styles from '../styles/index' export default class CalendarView extends Component { constructor(props) { @@ -10,7 +12,8 @@ export default class CalendarView extends Component { const predictedMenses = cycleModule().getPredictedMenses() this.state = { bleedingDaysInCalFormat: toCalFormat(bleedingDaysSortedByDate), - predictedBleedingDaysInCalFormat: predictionToCalFormat(predictedMenses) + predictedBleedingDaysInCalFormat: predictionToCalFormat(predictedMenses), + todayInCalFormat: todayToCalFormat() } this.setStateWithCalFormattedDays = (function (CalendarComponent) { @@ -18,7 +21,8 @@ export default class CalendarView extends Component { const predictedMenses = cycleModule().getPredictedMenses() CalendarComponent.setState({ bleedingDaysInCalFormat: toCalFormat(bleedingDaysSortedByDate), - predictedBleedingDaysInCalFormat: predictionToCalFormat(predictedMenses) + predictedBleedingDaysInCalFormat: predictionToCalFormat(predictedMenses), + todayInCalFormat: todayToCalFormat() }) } })(this) @@ -35,7 +39,6 @@ export default class CalendarView extends Component { const navigate = this.props.navigate navigate('CycleDay', { cycleDay }) } - render() { return ( ) } @@ -56,9 +60,14 @@ export default class CalendarView extends Component { function toCalFormat(bleedingDaysSortedByDate) { return bleedingDaysSortedByDate.reduce((acc, day) => { acc[day.date] = { - startingDay: true, - endingDay: true, - color: shadesOfRed[day.bleeding.value] + customStyles: { + container: { + backgroundColor: shadesOfRed[day.bleeding.value], + } + } + } + if (day.date === LocalDate.now().toString()) { + acc[day.date].customStyles.text = styles.calendarToday } return acc }, {}) @@ -70,12 +79,36 @@ function predictionToCalFormat(predictedDays) { return predictedDays.reduce((acc, setOfDays) => { setOfDays.reduce((accSet, day, i) => { accSet[day] = { - startingDay: true, - endingDay: true, - color: (i === middleIndex) ? shadesOfGrey[1] : shadesOfGrey[0] + customStyles: { + container: { + borderColor: (i === middleIndex) ? shadesOfRed[3] : shadesOfRed[2], + borderWidth: 3, + }, + text: { + marginTop: 1, + } + } + } + if (day === LocalDate.now().toString()) { + accSet[day].customStyles.text = Object.assign( + {}, + styles.calendarToday, + {marginTop: -2} + ) } return accSet }, acc) return acc }, {}) +} + +function todayToCalFormat() { + const todayDateString = LocalDate.now().toString() + const todayFormated = {} + todayFormated[todayDateString] = { + customStyles: { + text: styles.calendarToday + } + } + return todayFormated } \ No newline at end of file diff --git a/styles/index.js b/styles/index.js index c0fec24..629533a 100644 --- a/styles/index.js +++ b/styles/index.js @@ -2,9 +2,9 @@ import { StyleSheet } from 'react-native' export const primaryColor = '#ff7e5f' export const secondaryColor = '#351c4d' +export const secondaryColorLight = '#91749d' export const fontOnPrimaryColor = 'white' export const shadesOfRed = ['#ffcbbf', '#ffb19f', '#ff977e', '#ff7e5f'] // light to dark -export const shadesOfGrey = ['#e5e5e5', '#cccccc'] // [lighter, darker] const defaultBottomMargin = 5 const defaultIndentation = 10 @@ -243,6 +243,12 @@ export default StyleSheet.create({ }, page: { marginHorizontal: 10 + }, + calendarToday: { + fontWeight: 'bold', + fontSize: 20, + color: secondaryColor, + marginTop: 1 } }) From b01fdbb4731007d82b03238cfa301d4e10ac7b23 Mon Sep 17 00:00:00 2001 From: tina Date: Sat, 15 Sep 2018 15:42:49 +0200 Subject: [PATCH 2/2] places todayString outside of reduce --- components/calendar.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/components/calendar.js b/components/calendar.js index 13c466c..95e8bf8 100644 --- a/components/calendar.js +++ b/components/calendar.js @@ -58,6 +58,7 @@ export default class CalendarView extends Component { } function toCalFormat(bleedingDaysSortedByDate) { + const todayDateString = LocalDate.now().toString() return bleedingDaysSortedByDate.reduce((acc, day) => { acc[day.date] = { customStyles: { @@ -66,7 +67,7 @@ function toCalFormat(bleedingDaysSortedByDate) { } } } - if (day.date === LocalDate.now().toString()) { + if (day.date === todayDateString) { acc[day.date].customStyles.text = styles.calendarToday } return acc @@ -75,6 +76,7 @@ function toCalFormat(bleedingDaysSortedByDate) { function predictionToCalFormat(predictedDays) { if (!predictedDays.length) return {} + const todayDateString = LocalDate.now().toString() const middleIndex = (predictedDays[0].length - 1) / 2 return predictedDays.reduce((acc, setOfDays) => { setOfDays.reduce((accSet, day, i) => { @@ -89,7 +91,7 @@ function predictionToCalFormat(predictedDays) { } } } - if (day === LocalDate.now().toString()) { + if (day === todayDateString) { accSet[day].customStyles.text = Object.assign( {}, styles.calendarToday,