Merge branch '153-note-about-minus-20-rule-not-taken-into-account' into 'master'

Resolve "Note about Minus 20 rule not taken into account"

Closes #153

See merge request bloodyhealth/drip!141

components/app-text.js

@@ -1,33 +1,30 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Text } from 'react-native'
 import styles from "../styles"
 
-export default class AppText extends Component {
-  render() {
-    return (
-      <Text style={[styles.appText, this.props.style]}>
-        {this.props.children}
-      </Text>
-    )
-  }
+export default function AppText(props) {
+  return (
+    <Text
+      style={[styles.appText, props.style]}
+      onPress={props.onPress}
+    >
+      {props.children}
+    </Text>
+  )
 }
 
-export class AppTextLight extends Component {
-  render() {
-    return (
-      <Text style={[styles.appTextLight, this.props.style]}>
-        {this.props.children}
-      </Text>
-    )
-  }
+export function AppTextLight(props) {
+  return (
+    <Text style={[styles.appTextLight, props.style]}>
+      {props.children}
+    </Text>
+  )
 }
 
-export class SymptomSectionHeader extends Component {
-  render() {
-    return (
-      <AppText style={styles.symptomViewHeading}>
-        {this.props.children}
-      </AppText>
-    )
-  }
+export function SymptomSectionHeader(props) {
+  return (
+    <AppText style={styles.symptomViewHeading}>
+      {props.children}
+    </AppText>
+  )
 }

components/link.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Linking } from 'react-native'
+import AppText from "./app-text"
+import styles from '../styles';
+
+export default function Link(props) {
+  return (
+    <AppText
+      style={styles.link}
+      onPress={() => Linking.openURL(props.href)}
+    >{props.text}</AppText>
+  )
+}

components/settings/nfp-settings/index.js

@@ -2,11 +2,13 @@ import React, { Component } from 'react'
 import {
   ScrollView, View
 } from 'react-native'
-import styles from '../../../styles'
+import styles, { iconStyles } from '../../../styles'
 import labels from '../../../i18n/en/settings'
 import AppText from '../../app-text'
 import TempSlider from './temp-slider'
 import UseCervixSetting from './use-cervix'
+import Icon from 'react-native-vector-icons/Entypo'
+import Link from '../../link'
 
 export default class Settings extends Component {
   constructor(props) {
@@ -25,6 +27,17 @@ export default class Settings extends Component {
           <AppText>{labels.tempScale.segmentExplainer}</AppText>
           <TempSlider/>
         </View>
+        <View style={[styles.settingsSegment, styles.settingsSegmentLast]}>
+          <View style={{flexDirection: 'row', alignItems: 'center'}}>
+            <Icon name="info-with-circle" style={iconStyles.infoInHeading}/>
+            <AppText style={styles.settingsSegmentTitle}>{`${labels.preOvu.title} `}</AppText>
+          </View>
+          <AppText>
+            {labels.preOvu.note1}
+            <Link text={labels.preOvu.link} href="https://gitlab.com/bloodyhealth/drip/wikis/home" />
+            {labels.preOvu.note2}
+          </AppText>
+        </View>
       </ScrollView>
     )
   }

i18n/en/settings.js

@@ -1,3 +1,4 @@
+
 export default {
   menuTitles: {
     reminders: 'Reminders',
@@ -78,5 +79,11 @@ export default {
   aboutSection: {
     title: 'About',
     segmentExplainer: 'Please note that your data is stored locally on your phone and not on a server. We want to ensure that you stay in control of those sensitive information. 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 email (bl00dyhealth@mailbox.org). You can also contribute to the code base on GitLab (https://gitlab.com/bloodyhealth/drip/).',
+  },
+  preOvu: {
+    title: 'Infertile days at cycle start',
+    note1: "drip applies NFP's rules for calculating infertile days at the start of the cycle (see the ",
+    link: 'wiki',
+    note2: " 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."
   }
 }

styles/index.js

@@ -40,6 +40,10 @@ export default StyleSheet.create({
   emphasis: {
     fontWeight: 'bold',
   },
+  link: {
+    color: cycleDayColor,
+    textDecorationLine: 'underline'
+  },
   title: {
     fontSize: 18,
     color: 'black',
@@ -259,6 +263,9 @@ export default StyleSheet.create({
     marginHorizontal: defaultIndentation,
     padding: 7,
   },
+  settingsSegmentLast: {
+    marginBottom: defaultTopMargin,
+  },
   settingsSegmentTitle: {
     fontWeight: 'bold'
   },
@@ -409,4 +416,8 @@ export const iconStyles = {
   menuIconInactive: {
     color: colorInActive,
   },
+  infoInHeading: {
+    marginRight: 5,
+    color: 'black'
+  }
 }