0.0.2

Use LocalDate to get date range

See merge request bloodyhealth/drip!197

CHANGELOG.md

@@ -0,0 +1,19 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.0.1] - 2019-02-22
+## First beta release version
+### Added (list of core functionality)
+- you can track your menstrual bleeding
+- you can track symptoms related to natural family planning (nfp), i.e. basal temperature and mucus or cervix
+- you can use nfp symptoms for fertility awareness (drip implements the sympto-thermal method)
+- you can track other symptoms like desire, sex, pain, mood, or save a note
+- you can see bleeding days and predicted bleeding days in a calendar
+- drip gives you an overview of tracked symptoms on a beautiful chart
+- you can see basic stats about your cycle lengths
+- you can encrypt your data and protect it with a password
+- you can import and export your data in a nice format (csv)
+- you can set reminders (daily reminder for taking your temperature or once per cycle for your next period

components/calendar.js

@@ -1,9 +1,9 @@
 import React, { Component } from 'react'
 import { CalendarList } from 'react-native-calendars'
-import {LocalDate} from 'js-joda'
+import { LocalDate } from 'js-joda'
 import { getBleedingDaysSortedByDate } from '../db'
 import cycleModule from '../lib/cycle'
-import {shadesOfRed} from '../styles/index'
+import { shadesOfRed, calendarTheme } from '../styles/index'
 import styles from '../styles/index'
 import nothingChanged from '../db/db-unchanged'
 
@@ -52,6 +52,9 @@ export default class CalendarView extends Component {
           )
         }
         markingType={'custom'}
+        // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
+        firstDay={1}
+        theme={calendarTheme}
       />
     )
   }

components/chart/chart.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react'
 import { View, FlatList, ActivityIndicator } from 'react-native'
-import range from 'date-range'
 import { LocalDate } from 'js-joda'
 import { makeYAxisLabels, makeHorizontalGrid } from './y-axis'
 import nfpLines from './nfp-lines'
@@ -124,14 +123,8 @@ export default class CycleChart extends Component {
       // we don't want the chart to end abruptly before the first data day
       amountOfCycleDays += 5
     }
-    const jsDates = getTodayAndPreviousDays(amountOfCycleDays)
-    return jsDates.map(jsDate => {
-      return LocalDate.of(
-        jsDate.getFullYear(),
-        jsDate.getMonth() + 1,
-        jsDate.getDate()
-      ).toString()
-    })
+    const localDates = getTodayAndPreviousDays(amountOfCycleDays)
+    return localDates.map(localDate => localDate.toString())
   }
 
   render() {
@@ -170,10 +163,7 @@ export default class CycleChart extends Component {
                 size={styles.yAxis.width - 7}
                 color={cycleDayColor}
               />
-              <AppText style={[
-                styles.column.label.date,
-                styles.yAxisLabels.dateLabel
-              ]}>
+              <AppText style={[styles.yAxisLabels.dateLabel]}>
                 {labels.date.toLowerCase()}
               </AppText>
             </View>
@@ -216,12 +206,18 @@ function LoadingMoreView(props) {
 }
 
 function getTodayAndPreviousDays(n) {
-  const today = new Date()
-  today.setHours(0)
-  today.setMinutes(0)
-  today.setSeconds(0)
-  today.setMilliseconds(0)
-  const earlierDate = new Date(today - (range.DAY * n))
+  const today = LocalDate.now()
+  const targetDate = today.minusDays(n)
 
-  return range(earlierDate, today).reverse()
+  function getDaysInRange(currDate, range) {
+    if (currDate.isBefore(targetDate)) {
+      return range
+    } else {
+      range.push(currDate)
+      const next = currDate.minusDays(1)
+      return getDaysInRange(next, range)
+    }
+  }
+
+  return getDaysInRange(today, [])
 }

components/chart/day-column.js

@@ -43,11 +43,11 @@ export default class DayColumn extends Component {
         } else if (symptom === 'pain') {
           // is any pain documented?
           acc.pain = cycleDay.pain &&
-            Object.values(cycleDay.pain).some(x => x === true)
+            Object.values({...cycleDay.pain}).some(x => x === true)
         } else if (symptom === 'mood') {
           // is mood documented?
           acc.mood = cycleDay.mood &&
-            Object.values(cycleDay.mood).some(x => x === true)
+            Object.values({...cycleDay.mood}).some(x => x === true)
         }
         acc[`${symptom}Exclude`] = cycleDay[symptom] && cycleDay[symptom].exclude
         return acc

components/chart/styles.js

@@ -34,6 +34,7 @@ const styles = {
         fontSize: 9,
         fontWeight: '100',
         textAlign: 'center',
+        paddingTop: 2.5
       },
       number: {
         color: cycleDayColor,
@@ -101,7 +102,10 @@ const styles = {
     },
     dateLabel: {
       textAlign: 'center',
-      justifyContent: 'center'
+      justifyContent: 'center',
+      color: 'grey',
+      fontSize: 9,
+      fontWeight: '100',
     }
   },
   horizontalGrid: {

components/cycle-day/cycle-day-overview.js

@@ -106,7 +106,7 @@ export default class CycleDayOverView extends Component {
       },
       sex: sex => {
         let sexLabel = []
-        if (sex && Object.values(sex).some(val => val)){
+        if (sex && Object.values({...sex}).some(val => val)){
           Object.keys(sex).forEach(key => {
             if(sex[key] && key !== 'other' && key !== 'note') {
               sexLabel.push(
@@ -128,7 +128,7 @@ export default class CycleDayOverView extends Component {
       },
       pain: pain => {
         let painLabel = []
-        if (pain && Object.values(pain).some(val => val)){
+        if (pain && Object.values({...pain}).some(val => val)){
           Object.keys(pain).forEach(key => {
             if(pain[key] && key !== 'other' && key !== 'note') {
               painLabel.push(painLabels[key])
@@ -147,7 +147,7 @@ export default class CycleDayOverView extends Component {
       },
       mood: mood => {
         let moodLabel = []
-        if (mood && Object.values(mood).some(val => val)){
+        if (mood && Object.values({...mood}).some(val => val)){
           Object.keys(mood).forEach(key => {
             if(mood[key] && key !== 'other' && key !== 'note') {
               moodLabel.push(moodLabels[key])

components/cycle-day/select-tab-group.js

@@ -27,7 +27,7 @@ export default class SelectTabGroup extends Component {
                 key={i}
                 activeOpacity={1}
               >
-                <View style={styles.radioButtonTextGroup}>
+                <View>
                   <View style={[
                     styles.selectTab,
                     firstOrLastStyle,

components/cycle-day/symptoms/action-button-footer.js

@@ -39,7 +39,10 @@ export default class ActionButtonFooter extends Component {
             }]
           )
         },
-        disabledCondition: !currentSymptomValue,
+        disabledCondition: (!currentSymptomValue ||
+          (Object.keys(currentSymptomValue).length === 0 && currentSymptomValue.constructor === Object) ||
+          (Object.values(currentSymptomValue).every(x => !x) && currentSymptomValue.constructor === Object)
+        ),
         icon: 'delete-outline'
       }, {
         title: labels.save,

components/home.js

@@ -1,19 +1,20 @@
+import { ChronoUnit, LocalDate } from 'js-joda'
 import React, { Component } from 'react'
-import { ScrollView, View, TouchableHighlight, Dimensions } from 'react-native'
-import { LocalDate, ChronoUnit } from 'js-joda'
+import { Dimensions, ScrollView, TouchableHighlight, View } from 'react-native'
 import Icon from 'react-native-vector-icons/Entypo'
-import { secondaryColor, cycleDayColor, periodColor } from '../styles'
+
+import DripHomeIcon from '../assets/drip-home-icons'
+import { getCycleDay } from '../db'
 import {
-  home as labels,
   bleedingPrediction as predictLabels,
+  home as labels,
   shared,
 } from '../i18n/en/labels'
 import links from '../i18n/en/links'
 import cycleModule from '../lib/cycle'
 import { getFertilityStatusForDay } from '../lib/sympto-adapter'
-import styles from '../styles'
+import styles, { cycleDayColor, periodColor, secondaryColor } from '../styles'
 import AppText from './app-text'
-import DripHomeIcon from '../assets/drip-home-icons'
 import Button from './button'
 
 const ShowMoreToggler = ({ isShowingMore, onToggle }) => {
@@ -83,7 +84,10 @@ export default class Home extends Component {
 
   passTodayTo(componentName) {
     const { navigate } = this.props
-    navigate(componentName, { date: LocalDate.now().toString() })
+    navigate(componentName, {
+      date: this.todayDateString,
+      cycleDay: getCycleDay(this.todayDateString)
+    })
   }
 
   toggleShowingMore = () => {
@@ -158,7 +162,7 @@ export default class Home extends Component {
               { isShowingMore &&
                 <View>
                   <AppText styles={styles.paragraph}>
-                    { `${statusText} ${links.moreAboutNfp.url}` }
+                    { `${statusText} ${links.wiki.url}.` }
                   </AppText>
                 </View>
               }

components/settings/nfp-settings/index.js

@@ -32,7 +32,6 @@ export default class Settings extends Component {
             <AppText style={styles.framedSegmentTitle}>{`${labels.preOvu.title} `}</AppText>
           </View>
           <AppText>{labels.preOvu.note}</AppText>
-          <AppText>{labels.preOvu.note}</AppText>
         </FramedSegment>
       </ScrollView>
     )

i18n/en/labels.js

@@ -111,7 +111,7 @@ export const fertilityStatus = {
   fertileUntilEvening: 'Fertile phase ends in the evening',
   unknown: 'We cannot show any cycle information because no period data has been added.',
   preOvuText: "With NFP rules, you may assume 5 days of infertility at the beginning of your cycle, provided you don't observe any fertile mucus or cervix values.",
-  periOvuText: "We have not been able to detect both a temperature shift and mucus or cervix shift.",
+  periOvuText: "We have not been able to detect both a temperature shift and mucus or cervix shift. Please find more information on NFP rules here:",
   postOvuText: tempRule => {
     return (
       'We have detected a temperature shift (' + ['regular', '1st exception', '2nd exception'][tempRule] +

i18n/en/links.js

@@ -9,13 +9,9 @@ export default {
   },
   wiki: {
     url: 'https://gitlab.com/bloodyhealth/drip/wikis/home',
-    text: 'wiki'
+    text: 'our wiki'
   },
   website: {
     url: 'https://bloodyhealth.gitlab.io/'
   },
-  moreAboutNfp: {
-    url: 'https://gitlab.com/bloodyhealth/drip/wikis/nfp/intro',
-    text: 'More'
-  },
 }

i18n/en/settings.js

@@ -15,8 +15,8 @@ export default {
       couldNotConvert: 'Could not convert data to CSV',
       problemSharing: 'There was a problem sharing the data export file'
     },
-    title: 'My Drip data export',
-    subject: 'My Drip data export',
+    title: 'My drip data export',
+    subject: 'My drip data export',
     button: 'Export data',
     segmentExplainer: 'Export data in CSV format for backup or so you can use it elsewhere'
   },
@@ -96,11 +96,11 @@ export default {
   },
   aboutSection: {
     title: 'About',
-    text: `Please note that your data is stored locally on your phone and not on a server. This means your data cannot be read by anyone else unless they have access to your phone. We want to ensure that you stay in control of your own data. If you are planning to switch or reset your phone, please remember to export your data before doing so. You can reinstall the app afterwards and import your data.\n\nIf you encounter any technical issues, don't hesitate to contact via ${links.email.url}. You can also contribute to the code base on ${links.gitlab.url}`,
+    text: `Please note that your data is stored locally on your phone and not on a server. This means your data cannot be read by anyone else unless they have access to your phone. We want to ensure that you stay in control of your own data. If you are planning to switch or reset your phone, please remember to export your data before doing so. You can reinstall the app afterwards and import your data.\n\nIf you encounter any technical issues, don't hesitate to contact us via ${links.email.url}. You can also contribute to the code base on ${links.gitlab.url}`,
   },
   philosophy: {
     title: 'Remember to think for yourself',
-    text: `Drip makes period predictions for you and helps you apply NFP fertility awareness rules. But please remember that this app is made by humans, and humans make mistakes. Always think for yourself: "Does this make sense?" Remember, you don't need an app to understand your cycle! However, drip wants to support you and make period tracking easier, more transparent and secure.`,
+    text: `drip makes period predictions for you and helps you apply NFP fertility awareness rules. But please remember that this app is made by humans, and humans make mistakes. Always think for yourself: "Does this make sense?" Remember, you don't need an app to understand your cycle! However, drip wants to support you and make period tracking easier, more transparent and secure.`,
   },
   license: {
     title: 'drip is an open-source cycle tracking app',
@@ -118,7 +118,7 @@ You can contact us by bloodyhealth@mailbox.org.`
   },
   preOvu: {
     title: 'Infertile days at cycle start',
-    note: `drip applies NFP's rules for calculating infertile days at the start of the cycle (see the ${links.wiki.url} for more info). However, drip does not currently apply the so called 20-day-rule, which determines infertile days at the cycle start from past cycle lengths in case no past symptothermal info is available.`
+    note: `drip applies NFP's rules for calculating infertile days at the start of the cycle (see ${links.wiki.url} for more info). However, drip does not currently apply the so called 20-day-rule, which determines infertile days at the cycle start from past cycle lengths in case no past symptothermal info is available.`
   },
   credits: {
     title: 'Credits',

i18n/en/symptom-info.js

@@ -2,12 +2,18 @@ import links from './links'
 
 export const generalInfo = {
   chartNfp: `On the chart, you can track fertility signs. When both a valid temperature shift and a mucus or cervix shift have been detected, an orange line will be displayed on the chart. This indicates the end of the peri-ovulatory and the beginning of the post-ovulatory phase.`,
-  curiousNfp: `If you are curious to learn more about the sympto-thermal method that is used for fertility tracking within the app, you can visit our ${links.wiki.url}.`,
+  curiousNfp: `If you are curious to learn more about the sympto-thermal method that is used for fertility tracking within the app, you can visit ${links.wiki.url}.`,
   cycleRelation: `It may be influenced by or have an impact on your menstrual cycles and its hormonal changes.`,
   excludeExplainer: `You can exclude these values, so they won't be taken into account for any fertility calculation.`,
-  nfpTfyReminder: `Drip makes period predictions for you and helps you apply NFP fertility awareness rules. But please remember that this app is made by humans, and humans make mistakes. Always think for yourself: "Does this make sense?" Remember, you don't need an app to understand your cycle! However, drip wants to support you and make period tracking easier, more transparent and secure.
+  nfpTfyReminder: `When - on a daily/regular basis - you track:
+  1. your basal body temperature,
+  2. your cervical mucus OR your cervix,
+  3. and menstrual bleeding
+the app helps you identify in which phase of the menstrual cycle you are.
 
-Please find more info on the sympto-thermal method in our ${links.wiki.url}.`,
+drip makes period predictions for you and helps you apply NFP fertility awareness rules. But please remember that this app is made by humans, and humans make mistakes. Always think for yourself: "Does this make sense?" Remember, you don't need an app to understand your cycle! However, drip wants to support you and make period tracking easier, more transparent and secure.
+
+Please find more info on the sympto-thermal method in ${links.wiki.url}.`,
   noNfpSymptom: `The app allows you to track this symptom for your information, it is not taken into account for any calculation. On the chart you can check how often you track this symptom.`
 }
 
@@ -25,12 +31,6 @@ The app allows you to track different intensities of bleeding. On the chart and
 
 Excluding bleeding values is for tracking bleeding when it's not marking the start of a new cycle or the continuation of menstrual bleeding the day(s) before, e.g. bleeding caused by ovulation or a miscarriage.
 
-When - on a daily/regular basis - you track:
-1. your basal body temperature,
-2. your cervical mucus OR your cervix,
-3. and menstrual bleeding
-the app helps you identify in which phase of your cycle you are.
-
 ${generalInfo.nfpTfyReminder}`,
   },
   cervix:  {
@@ -39,11 +39,7 @@ ${generalInfo.nfpTfyReminder}`,
 
 Tracking how open or closed and how firm or soft the cervix feels can help determine in which phase of the menstrual cycle you are.
 
-By default, the secondary symptom the app uses for NFP evaluation is cervical mucus, but you can change it to cervix in "Settings" -> "NFP Settings". When - on a daily/regular basis - you track:
-1. your basal body temperature,
-2. your cervical mucus OR your cervix,
-3. and menstrual bleeding
-the app helps you identify in which phase of your cycle you are.
+By default, the secondary symptom the app uses for NFP evaluation is cervical mucus, but you can change it to cervix in "Settings" -> "NFP Settings".
 
 · How to identify a fertile cervix?
 A fertile cervix is open and feels soft like your earlobes. In contrast, an infertile cervix feels closed and hard, like the tip of your nose. If the cervix feels anything other than closed and hard, drip takes it as a sign of fertility. On the chart, a fertile cervix is colored in dark yellow, and infertile cervix is colored in light yellow.
@@ -78,11 +74,7 @@ ${generalInfo.curiousNfp}`
     title: 'Tracking cervical mucus',
     text: `Cervical mucus can help determine in which phase of the menstrual cycle you are.
 
-By default the secondary symptom the app uses for NFP evaluation is cervical mucus. When - on a daily/regular basis - you track:
-1. your basal body temperature,
-2. your cervical mucus OR your cervix,
-3. and menstrual bleeding
-the app helps you identify in which phase of your cycle you are.
+By default the secondary symptom the app uses for NFP evaluation is cervical mucus.
 
 · How to identify fertile cervical mucus?
 Tracking the feeling and the texture of your cervical mucus on a daily basis helps you identify changes of the quality of the cervical mucus. The values you enter for both feeling and texture of your cervical mucus are combined by drip into one of five NFP-conforming values.
@@ -133,11 +125,7 @@ ${generalInfo.curiousNfp}`
     title: 'Tracking body basal temperature',
     text: `One of the body signs you need to track for knowing your fertility status is your body basal temperature. The body temperature changes over the course of a menstrual cycle, it rises after ovulation.
 
-By default the secondary symptom is cervical mucus, but you can change it to cervix in "Settings" -> "NFP Settings". When - on a daily/regular basis - you track:
-1. your basal body temperature,
-2. your cervical mucus OR your cervix,
-3. and menstrual bleeding
-the app helps you identify in which phase of your cycle you are.
+By default the secondary symptom is cervical mucus, but you can change it to cervix in "Settings" -> "NFP Settings".
 
 · What is body basal temperature?
 It's your temperature after lying still for at least 6 hours. For many, this is when they are waking up in the morning after sleeping at least 6 hours and before getting up.

ios/drip/AppDelegate.m

@@ -9,6 +9,7 @@
 
 #import <React/RCTBundleURLProvider.h>
 #import <React/RCTRootView.h>
+#import <React/RCTPushNotificationManager.h>
 
 @implementation AppDelegate
 
@@ -19,7 +20,7 @@
   jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
 
   RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
-                                                      moduleName:@"drip"
+                                                      moduleName:@"home"
                                                initialProperties:nil
                                                    launchOptions:launchOptions];
   rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
@@ -32,4 +33,31 @@
   return YES;
 }
 
+// Required to register for notifications
+- (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings
+{
+  [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings];
+}
+// Required for the register event.
+- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
+{
+  [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
+}
+// Required for the notification event. You must call the completion handler after handling the remote notification.
+- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
+fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
+{
+  [RCTPushNotificationManager didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
+}
+// Required for the registrationError event.
+- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
+{
+  [RCTPushNotificationManager didFailToRegisterForRemoteNotificationsWithError:error];
+}
+// Required for the localNotification event.
+- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification
+{
+  [RCTPushNotificationManager didReceiveLocalNotification:notification];
+}
+
 @end

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "drip",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -3220,11 +3220,6 @@
         }
       }
     },
-    "date-range": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/date-range/-/date-range-0.0.2.tgz",
-      "integrity": "sha1-OVHZ5SWZgu3VMewx5APYImPvbjk="
-    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "drip",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "contributors": [
     "Julia Friesel <julia.friesel@gmail.com>",
     "Marie Kochsiek",
@@ -9,6 +9,7 @@
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",
     "android": "react-native run-android",
+    "ios": "react-native run-ios --simulator=\"iPhone 8 Plus\"",
     "log": "react-native log-android",
     "test": "mocha --recursive --require @babel/register test && npm run lint",
     "test-watch": "mocha --recursive --require @babel/register --watch test",
@@ -20,7 +21,6 @@
     "ajv": "^5.5.2",
     "assert": "^1.4.1",
     "csvtojson": "^2.0.8",
-    "date-range": "0.0.2",
     "isobject": "^3.0.1",
     "js-base64": "^2.4.8",
     "js-joda": "^1.8.2",

styles/index.js

@@ -26,6 +26,16 @@ const defaultIndentation = 10
 const defaultTopMargin = 10
 const colorInActive = '#666666'
 
+export const calendarTheme = {
+  textDayFontFamily: textFont,
+  textMonthFontFamily: textFontBold,
+  textDayHeaderFontFamily: textFont,
+  textDayFontSize: regularSize,
+  textMonthFontSize: regularSize,
+  textDayHeaderFontSize: hintSize,
+  textSectionTitleColor: 'grey'
+}
+
 export default StyleSheet.create({
   appText: {
     color: 'black',
@@ -162,9 +172,9 @@ export default StyleSheet.create({
     fontFamily: headerFont
   },
   symptomViewHeading: {
-    fontSize: 20,
-    color: 'black',
-    marginBottom: 5
+    fontWeight: 'bold',
+    fontFamily: textFontBold,
+    marginTop: 10
   },
   symptomInfoIcon: {
     marginRight: 20,
@@ -333,10 +343,10 @@ export default StyleSheet.create({
   selectBoxSection: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    marginVertical: 10,
+    marginTop: 7,
   },
   selectTabGroup: {
-    marginVertical: 10,
+    marginTop: 7,
     flexDirection: 'row'
   },
   selectTab: {