Add cervix setting

components/settings/index.js

@@ -13,6 +13,7 @@ import TempSlider from './temp-slider'
 import openImportDialogAndImport from './import-dialog'
 import openShareDialogAndExport from './export-dialog'
 import PasswordSetting from './password'
+import UseCervixSetting from './use-cervix'
 
 export default class Settings extends Component {
   constructor(props) {
@@ -24,6 +25,7 @@ export default class Settings extends Component {
     return (
       <ScrollView>
         <TempReminderPicker/>
+        <UseCervixSetting/>
         <View style={styles.settingsSegment}>
           <AppText style={styles.settingsSegmentTitle}>
             {labels.tempScale.segmentTitle}

components/settings/use-cervix.js

@@ -0,0 +1,48 @@
+import React, { Component } from 'react'
+import {
+  View,
+  TouchableOpacity,
+  Switch
+} from 'react-native'
+import AppText from '../app-text'
+import {
+  useCervixObservable,
+  saveUseCervix
+} from '../../local-storage'
+import styles from '../../styles/index'
+import { settings as labels } from '../../i18n/en/settings'
+
+export default class UseCervixSetting extends Component {
+  constructor() {
+    super()
+    this.state = {useCervix: useCervixObservable.value}
+  }
+
+  render() {
+    return (
+      <TouchableOpacity
+        style={styles.settingsSegment}
+      >
+        <AppText style={styles.settingsSegmentTitle}>
+          {labels.useCervix.title}
+        </AppText>
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <View style={{ flex: 1 }}>
+            {this.state.useCervix ?
+              <AppText>{labels.useCervix.cervixModeOn}</AppText>
+              :
+              <AppText>{labels.useCervix.cervixModeOff}</AppText>
+            }
+          </View>
+          <Switch
+            value={this.state.useCervix}
+            onValueChange={bool => {
+              this.setState({ useCervix: bool })
+              saveUseCervix(bool)
+            }}
+          />
+        </View>
+      </TouchableOpacity>
+    )
+  }
+}

i18n/en/settings.js

@@ -46,6 +46,11 @@ export const settings = {
     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.`
   },
+  useCervix: {
+    title: 'Secondary symptom',
+    cervixModeOn: 'Cervix values are being used for symptothermal fertility detection',
+    cervixModeOff: 'Mucus values are being used for symptothermal fertility detection'
+  },
   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.",

local-storage/index.js

@@ -44,6 +44,15 @@ export async function savePeriodReminder(reminder) {
   periodReminderObservable.set(reminder)
 }
 
+export const useCervixObservable = Observable()
+setObvWithInitValue('useCervix', useCervixObservable, false)
+
+export async function saveUseCervix(bool) {
+  console.log('saving cervix to', bool)
+  await AsyncStorage.setItem('useCervix', JSON.stringify(bool))
+  useCervixObservable.set(bool)
+}
+
 export const hasEncryptionObservable = Observable()
 setObvWithInitValue('hasEncryption', hasEncryptionObservable, false)
 
@@ -54,6 +63,8 @@ export async function saveEncryptionFlag(bool) {
 
 async function setObvWithInitValue(key, obv, defaultValue) {
   const result = await AsyncStorage.getItem(key)
+  console.log('result from db for key')
+  console.log(result)
   let value
   if (result) {
     value = JSON.parse(result)