set up period reminder in settings

components/labels.js

@@ -54,6 +54,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: 'your next period is likely to start in x 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 = Object.assign({}, 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: true})
+            }}
+          />
+        </View>
+      </View>
+    )
+  }
+}

local-storage/index.js

@@ -34,6 +34,16 @@ export async function saveTempReminder(reminder) {
   tempReminderObservable.set(reminder)
 }
 
+export const periodReminderObservable = Observable()
+setObvWithInitValue('periodReminder', periodReminderObservable, {
+  enabled: false
+})
+
+export async function savePeriodReminder(reminder) {
+  await AsyncStorage.setItem('periodReminder', JSON.stringify(reminder))
+  periodReminderObservable.set(reminder)
+}
+
 export const hasEncryptionObservable = Observable()
 setObvWithInitValue('hasEncryption', hasEncryptionObservable, false)