Merge branch 'master' into 117-implement-pain

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 (
       <CalendarList
-        onDayPress={this.passDateToDayView}
-        markedDates={this.state.bleedingDaysInCalFormat}
+        onDayPress={this.passDateToDayView.bind(this)}
+        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
+  }, {})
 }

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 (
       <ScrollView>
         <Text style={styles.welcome}>{this.state.welcomeText}</Text>
+        <Text style={styles.welcome}>{this.state.predictionText}</Text>
         <View style={styles.homeButtons}>
           <View style={styles.homeButton}>
             <Button
@@ -80,3 +84,27 @@ function determineWelcomeText(cycleDayNumber) {
   return cycleDayNumber ? welcomeTextWithCycleDay : welcomeText
 }
 
+function determinePredictionText() {
+  const bleedingPrediction = cycleModule().getPredictedMenses()
+  if (!bleedingPrediction.length) return labels.noPrediction
+  const todayDate = LocalDate.now()
+  const bleedingStart = LocalDate.parse(bleedingPrediction[0][0])
+  const bleedingEnd = LocalDate.parse(bleedingPrediction[0][ bleedingPrediction[0].length - 1 ])
+  if (todayDate.isBefore(bleedingStart)) {
+    return labels.predictionInFuture(
+      todayDate.until(bleedingStart, ChronoUnit.DAYS),
+      todayDate.until(bleedingEnd, ChronoUnit.DAYS)
+    )
+  }
+  if (todayDate.isAfter(bleedingEnd)) {
+    return labels.predictionInPast(bleedingStart.toString(), bleedingEnd.toString())
+  }
+  const daysToEnd = todayDate.until(bleedingEnd, ChronoUnit.DAYS)
+  if (daysToEnd === 0) {
+    return labels.predictionStartedNoDaysLeft
+  } else if (daysToEnd === 1) {
+    return labels.predictionStarted1DayLeft
+  } else {
+    return labels.predictionStartedXDaysLeft(daysToEnd)
+  }
+}

components/labels.js

@@ -76,4 +76,13 @@ export const stats = {
   minLabel: 'Shortest cycle',
   maxLabel: 'Longest cycle',
   stdLabel: 'Standard deviation'
+}
+
+export const bleedingPrediction = {
+  noPrediction: 'There is not enough period data to predict the next one.',
+  predictionInFuture: (startDays, endDays) => `Your next period is likely to start in ${startDays} to ${endDays} days.`,
+  predictionStartedXDaysLeft: (numberOfDays) => `Your period is likely to start today or during the next ${numberOfDays} days.`,
+  predictionStarted1DayLeft: 'Your period is likely to start today or tomorrow.',
+  predictionStartedNoDaysLeft: 'Your period is likely to start today.',
+  predictionInPast: (startDate, endDate) => `Based on your documented data, your period was likely to start between ${startDate} and ${endDate}.`
 }

components/stats.js

@@ -4,10 +4,10 @@ import {
   View,
   ScrollView
 } from 'react-native'
-import { LocalDate, ChronoUnit } from 'js-joda'
+
 import styles from '../styles/index'
 import cycleModule from '../lib/cycle'
-import getCycleInfo from '../lib/cycle-length'
+import {getCycleLengthStats as getCycleInfo} from '../lib/cycle-length'
 import {stats as labels} from './labels'
 
 export default class Stats extends Component {
@@ -18,7 +18,7 @@ export default class Stats extends Component {
     let numberOfCycles
     let cycleInfo
     if (atLeastOneCycle) {
-      cycleLengths = getCycleLength(allMensesStarts)
+      cycleLengths = cycleModule().getCycleLength(allMensesStarts)
       numberOfCycles = cycleLengths.length
       if (numberOfCycles > 1) {
         cycleInfo = getCycleInfo(cycleLengths)
@@ -31,10 +31,14 @@ export default class Stats extends Component {
             <Text style={styles.statsIntro}>{labels.emptyStats}</Text>
           }
           {atLeastOneCycle && numberOfCycles === 1 &&
-            <Text style={styles.statsIntro}>{labels.oneCycleStats(cycleLengths[0])}</Text>
+            <Text style={styles.statsIntro}>
+              {labels.oneCycleStats(cycleLengths[0])}
+            </Text>
           }
           {atLeastOneCycle && numberOfCycles > 1 && <View>
-            <Text style={styles.statsIntro}>{labels.getBasisOfStats(numberOfCycles)}</Text>
+            <Text style={styles.statsIntro}>
+              {labels.getBasisOfStats(numberOfCycles)}
+            </Text>
             <View style={styles.statsRow}>
               <Text style={styles.statsLabelLeft}>{labels.averageLabel}</Text>
               <Text style={styles.statsLabelRight}>{cycleInfo.mean + ' ' + labels.daysLabel}</Text>
@@ -56,14 +60,4 @@ export default class Stats extends Component {
       </ScrollView>
     )
   }
-}
-
-function getCycleLength(cycleStartDates) {
-  const cycleLengths = []
-  for (let i = 0; i < cycleStartDates.length - 1; i++) {
-    const nextCycleStart = LocalDate.parse(cycleStartDates[i])
-    const cycleStart = LocalDate.parse(cycleStartDates[i + 1])
-    cycleLengths.push(cycleStart.until(nextCycleStart, ChronoUnit.DAYS))
-  }
-  return cycleLengths
 }