changs output of getpredictedmenses, adds days to calendar

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)
@@ -35,7 +39,13 @@ export default class CalendarView extends Component {
     return (
       <CalendarList
         onDayPress={this.passDateToDayView.bind(this)}
-        markedDates={this.state.bleedingDaysInCalFormat}
+        markedDates={
+          Object.assign(
+            {},
+            this.state.bleedingDaysInCalFormat,
+            this.state.predictedBleedingDaysInCalFormat
+          )
+        }
         markingType={'period'}
       />
     )
@@ -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
+  }, {})
 }