Merge branch '139-next-period-reminder' into 'master'

Resolve "next period reminder"

Closes #139

See merge request bloodyhealth/drip!87

components/labels.js

@@ -57,6 +57,11 @@ export const settings = {
     timeSet: time => `Daily reminder set for ${time}`,
     notification: 'Record your morning temperature'
   },
+  periodReminder: {
+    title: 'Next period reminder',
+    reminderText: 'Get a notification 3 days before your next period is likely to start.',
+    notification: daysToEndOfPrediction => `Your next period is likely to start in 3 to ${daysToEndOfPrediction} days.`
+  },
   passwordSettings: {
     title: 'App password',
     explainerDisabled: "Encrypt the app's database with a password. You need to enter the password every time the app is started.",

components/settings/index.js

@@ -8,6 +8,7 @@ import styles from '../../styles/index'
 import { settings as labels } from '../labels'
 import { AppText } from '../app-text'
 import TempReminderPicker from './temp-reminder-picker'
+import PeriodReminderPicker from './period-reminder'
 import TempSlider from './temp-slider'
 import openImportDialogAndImport from './import-dialog'
 import openShareDialogAndExport from './export-dialog'
@@ -30,6 +31,7 @@ export default class Settings extends Component {
           <AppText>{labels.tempScale.segmentExplainer}</AppText>
           <TempSlider/>
         </View>
+        <PeriodReminderPicker/>
         <PasswordSetting />
         <View style={styles.settingsSegment}>
           <AppText style={styles.settingsSegmentTitle}>

components/settings/period-reminder.js

@@ -0,0 +1,41 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Switch
+} from 'react-native'
+import { AppText } from '../app-text'
+import {
+  periodReminderObservable,
+  savePeriodReminder
+} from '../../local-storage'
+import styles from '../../styles/index'
+import { settings as labels } from '../labels'
+
+export default class PeriodReminderPicker extends Component {
+  constructor(props) {
+    super(props)
+    this.state = periodReminderObservable.value
+  }
+
+  render() {
+    return (
+      <View style={styles.settingsSegment}>
+        <AppText style={styles.settingsSegmentTitle}>
+          {labels.periodReminder.title}
+        </AppText>
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <View style={{ flex: 1 }}>
+            <AppText>{labels.periodReminder.reminderText}</AppText>
+          </View>
+          <Switch
+            value={this.state.enabled}
+            onValueChange={switchOn => {
+              this.setState({ enabled: switchOn })
+              savePeriodReminder({enabled: switchOn})
+            }}
+          />
+        </View>
+      </View>
+    )
+  }
+}