Merge branch 'link-nfp-rules' into 'master'

Link nfp rules

See merge request bloodyhealth/drip!169

components/app-text.js

@@ -1,16 +1,20 @@
 import React from 'react'
 import { Text } from 'react-native'
 import styles from "../styles"
+import Link from './link'
 
 export default function AppText(props) {
+  // we parse for links in case the text contains any
   return (
-    <Text
+    <Link>
-      style={[styles.appText, props.style]}
+      <Text
-      onPress={props.onPress}
+        style={[styles.appText, props.style]}
-      numberOfLines={props.numberOfLines}
+        onPress={props.onPress}
-    >
+        numberOfLines={props.numberOfLines}
-      {props.children}
+      >
-    </Text>
+        {props.children}
+      </Text>
+    </Link>
   )
 }
 

components/cycle-day/symptoms/info-symptom.js

@@ -1,11 +1,9 @@
 import React, { Component } from 'react'
 import { ScrollView } from 'react-native'
-import Hyperlink from 'react-native-hyperlink'
 import AppText from '../../app-text'
 import labels from '../../../i18n/en/symptom-info.js'
 import FramedSegment from '../../framed-segment'
 import styles from '../../../styles/index'
-import replace from '../../helpers/replace-url-with-text'
 
 export default class InfoSymptom extends Component {
   render() {
@@ -29,9 +27,7 @@ export default class InfoSymptom extends Component {
           style={styles.framedSegmentLast}
           title={labels[currentSymptom].title}
         >
-          <Hyperlink linkStyle={styles.link} linkText={replace} linkDefault>
+          <AppText>{labels[currentSymptom].text}</AppText>
-            <AppText>{labels[currentSymptom].text}</AppText>
-          </Hyperlink>
         </FramedSegment>
       </ScrollView>
     )

components/helpers/replace-url-with-text.js

@@ -1,9 +0,0 @@
-import {links} from '../../i18n/en/settings'
-
-export default function(url) {
-  const link = Object.values(links).find(link => link.url === url)
-  if (url === 'mailto:bloodyhealth@mailbox.org') {
-    console.log(links.email.url === url)
-  }
-  return link ? link.text : url
-}

components/home.js

@@ -3,163 +3,171 @@ import { ScrollView, View, TouchableHighlight, Dimensions } from 'react-native'
 import { LocalDate, ChronoUnit } from 'js-joda'
 import Icon from 'react-native-vector-icons/Entypo'
 import { secondaryColor, cycleDayColor, periodColor } from '../styles'
-import { home as labels, bleedingPrediction as predictLabels, shared } from '../i18n/en/labels'
+import {
+  home as labels,
+  bleedingPrediction as predictLabels,
+  shared,
+} from '../i18n/en/labels'
+import links from '../i18n/en/links'
 import cycleModule from '../lib/cycle'
-import { getCycleDaysSortedByDate, getCycleDay } from '../db'
 import { getFertilityStatusForDay } from '../lib/sympto-adapter'
 import styles from '../styles'
 import AppText from './app-text'
 import DripHomeIcon from '../assets/drip-home-icons'
 import Button from './button'
 
+const ShowMoreToggler = ({ isShowingMore, onToggle }) => {
+  const {height, width} = Dimensions.get('window')
+  const leftPosition = isShowingMore ? 10 : width - 40
+  const style = isShowingMore ? styles.showLess : styles.showMore
+  const topPosition = height / 2 - styles.header.height - 30
+
+  return (
+    <TouchableHighlight
+      onPress={onToggle}
+      style={[style, { top: topPosition, left: leftPosition}]}
+    >
+      <View style={{alignItems: 'center'}}>
+        <AppText>{isShowingMore ? shared.less : shared.more}</AppText>
+        <Icon name='chevron-thin-down' />
+      </View>
+    </TouchableHighlight>
+  )
+}
+
+const IconText = ({ children, wrapperStyles }) => {
+  return (
+    <View style={[styles.homeIconTextWrapper, wrapperStyles]}>
+      <AppText style={styles.iconText}>
+        { children }
+      </AppText>
+    </View>
+  )
+}
+
+const HomeElement = ({ children, onPress, buttonColor, buttonLabel  }) => {
+  return (
+    <View
+      onPress={ onPress }
+      style={ styles.homeIconElement }
+    >
+      { children }
+      <Button
+        onPress={ onPress }
+        backgroundColor={ buttonColor }>
+        { buttonLabel }
+      </Button>
+    </View>
+  )
+}
+
 export default class Home extends Component {
   constructor(props) {
     super(props)
-    this.getCycleDayNumber = cycleModule().getCycleDayNumber
+    const { getCycleDayNumber, getPredictedMenses } = cycleModule()
-    this.getBleedingPrediction = cycleModule().getPredictedMenses
+    this.getCycleDayNumber = getCycleDayNumber
+    this.getBleedingPrediction = getPredictedMenses
     this.todayDateString = LocalDate.now().toString()
     const prediction = this.getBleedingPrediction()
     const fertilityStatus = getFertilityStatusForDay(this.todayDateString)
 
     this.state = {
+      isShowingMore: false,
       cycleDayNumber: this.getCycleDayNumber(this.todayDateString),
       predictionText: determinePredictionText(prediction),
       bleedingPredictionRange: getBleedingPredictionRange(prediction),
       ...fertilityStatus
     }
-
-    this.cycleDays = getCycleDaysSortedByDate()
   }
 
   passTodayTo(componentName) {
-    const navigate = this.props.navigate
+    const { navigate } = this.props
     navigate(componentName, { date: LocalDate.now().toString() })
   }
 
+  toggleShowingMore = () => {
+    this.setState({ isShowingMore: !this.state.isShowingMore })
+  }
+
   render() {
-    const cycleDayMoreText = this.state.cycleDayNumber ?
+    const { isShowingMore, cycleDayNumber, phase, status } = this.state
-      labels.cycleDayKnown(this.state.cycleDayNumber)
+    const { navigate } = this.props
-      :
+    const cycleDayMoreText = cycleDayNumber ?
+      labels.cycleDayKnown(cycleDayNumber) :
       labels.cycleDayNotEnoughInfo
 
-    const {height, width} = Dimensions.get('window')
+    const { statusText } = this.state
+
     return (
       <View flex={1}>
         <ScrollView>
           <View style={styles.homeView}>
-            <View style={styles.homeIconElement}>
+
+            <HomeElement
+              onPress={ () => this.passTodayTo('CycleDay') }
+              buttonColor={ cycleDayColor }
+              buttonLabel={ labels.editToday }
+            >
               <View position='absolute'>
                 <DripHomeIcon name="circle" size={80} color={cycleDayColor}/>
               </View>
-              <View style={[styles.homeIconTextWrapper, styles.wrapperCycle]}>
+              <IconText wrapperStyles={styles.wrapperCycle}>
-                <AppText style={styles.iconText}>
+                {cycleDayNumber || labels.unknown}
-                  {this.state.cycleDayNumber || labels.unknown}
+              </IconText>
-                </AppText>
-              </View>
 
-              { this.state.showMore &&
+              { isShowingMore &&
                   <AppText style={styles.paragraph}>{cycleDayMoreText}</AppText>
               }
+            </HomeElement>
 
-              <Button
+            <HomeElement
-                onPress={() => this.passTodayTo('CycleDay')}
+              onPress={ () => this.passTodayTo('BleedingEditView') }
-                backgroundColor={cycleDayColor}>
+              buttonColor={ periodColor }
-                {labels.editToday}
+              buttonLabel={ labels.trackPeriod }
-              </Button>
+            >
-
-            </View>
-
-            <View style={styles.homeIconElement}>
               <View position='absolute'>
                 <DripHomeIcon name="drop" size={105} color={periodColor} />
               </View>
-              <View style={[styles.homeIconTextWrapper, styles.wrapperDrop]}>
-                <AppText style={styles.iconText}>
-                  {this.state.bleedingPredictionRange}
-                </AppText>
-              </View>
 
-              {this.state.showMore &&
+              <IconText wrapperStyles={styles.wrapperDrop}>
+                {this.state.bleedingPredictionRange}
+              </IconText>
+
+              { isShowingMore &&
                 <AppText style={styles.paragraph}>
                   {this.state.predictionText}
                 </AppText>
               }
+            </HomeElement>
 
-              <Button
+            <HomeElement
-                onPress={() => {
+              onPress={ () => navigate('Chart') }
-                  const today = LocalDate.now().toString()
+              buttonColor={ secondaryColor }
-                  const cycleDay = getCycleDay(today)
+              buttonLabel={ labels.checkFertility }
-                  const props = {date: today}
+            >
-                  if (cycleDay) props.cycleDay = cycleDay
-                  this.props.navigate('BleedingEditView', props)
-                }}
-                backgroundColor={periodColor}>
-                {labels.trackPeriod}
-              </Button>
-
-            </View>
-
-            <View style={styles.homeIconElement}>
               <View style={styles.homeCircle} position='absolute' />
-              <View style={[styles.homeIconTextWrapper, styles.wrapperCircle]}>
-                <AppText style={styles.iconText}>
-                  {this.state.phase ?
-                    this.state.phase.toString()
-                    :
-                    labels.unknown
-                  }
-                </AppText>
-              </View>
-              {this.state.phase &&
-              <AppText>
-                {`${labels.phase(this.state.phase)} (${this.state.status})`}
-              </AppText>
-              }
-              {this.state.showMore &&
-                <AppText styles={styles.paragraph}>
-                  {this.state.statusText}
-                </AppText>
-              }
 
-              <Button
+              <IconText wrapperStyles={styles.wrapperCircle}>
-                onPress={() => this.props.navigate('Chart')}
+                { phase ? phase.toString() : labels.unknown }
-                backgroundColor={secondaryColor}>
+              </IconText>
-                {labels.checkFertility}
+
-              </Button>
+              { phase &&
-            </View>
+                <AppText>{`${labels.phase(phase)} (${status})`}</AppText>
+              }
+              { isShowingMore &&
+                <View>
+                  <AppText styles={styles.paragraph}>
+                    { `${statusText} ${links.moreAboutNfp.url}` }
+                  </AppText>
+                </View>
+              }
+            </HomeElement>
           </View>
-
         </ScrollView>
-
+        <ShowMoreToggler
-        {!this.state.showMore &&
+          isShowingMore={isShowingMore}
-          <TouchableHighlight
+          onToggle={this.toggleShowingMore}
-            onPress={() => this.setState({showMore: true})}
+        />
-            style={[styles.showMore, {
-              top: height / 2 - styles.header.height - 30,
-              left: width - 40
-            }]}
-          >
-            <View style={{alignItems: 'center'}}>
-              <AppText>{shared.more}</AppText>
-              <Icon name='chevron-thin-down' />
-            </View>
-          </TouchableHighlight>
-        }
-
-        {this.state.showMore &&
-          <TouchableHighlight
-            onPress={() => this.setState({showMore: false})}
-            style={[styles.showLess, {
-              top: height / 2 - styles.header.height - 30,
-              left: 10
-            }]}
-          >
-            <View style={{alignItems: 'center'}}>
-              <AppText>{shared.less}</AppText>
-              <Icon name='chevron-thin-down' />
-            </View>
-          </TouchableHighlight>
-        }
       </View>
     )
   }

components/license.js

@@ -1,22 +1,18 @@
 import React from 'react'
 import { ScrollView, View, BackHandler } from 'react-native'
-import Hyperlink from 'react-native-hyperlink'
 import AppText from './app-text'
 import { shared } from '../i18n/en/labels'
 import settingsLabels from '../i18n/en/settings'
 import styles,{secondaryColor} from '../styles'
 import Button from './button'
 import { saveLicenseFlag } from '../local-storage'
-import replace from './helpers/replace-url-with-text'
 
 const labels = settingsLabels.license
 export default function License({setLicense}) {
   return (
     <ScrollView style={styles.licensePage}>
-      <Hyperlink linkStyle={styles.link} linkText={replace} linkDefault>
+      <AppText style={styles.framedSegmentTitle}>{labels.title}</AppText>
-        <AppText style={styles.framedSegmentTitle}>{labels.title}</AppText>
+      <AppText>{labels.text}</AppText>
-        <AppText>{labels.text}</AppText>
-      </Hyperlink>
       <View style={styles.licenseButtons}>
         <Button
           style={styles.licenseButton}

components/link.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import Hyperlink from 'react-native-hyperlink'
+import styles from '../styles'
+import links from '../i18n/en/links'
+
+export default function Link(props) {
+  return (
+    <Hyperlink
+      linkStyle={styles.link}
+      linkText={replaceUrlWithText}
+      linkDefault
+    >
+      {props.children}
+    </Hyperlink>
+  )
+}
+
+function replaceUrlWithText(url) {
+  const link = Object.values(links).find(l => l.url === url)
+  return (link && link.text) || url
+}

components/settings/about.js

@@ -1,20 +1,16 @@
 import React, { Component } from 'react'
 import { ScrollView } from 'react-native'
-import Hyperlink from 'react-native-hyperlink'
 import AppText from '../app-text'
+import labels from '../../i18n/en/settings'
+import links from '../../i18n/en/links'
 import FramedSegment from '../framed-segment'
-import styles from '../../styles/index'
-import labels, { links } from '../../i18n/en/settings'
-import replace from '../helpers/replace-url-with-text'
 
 export default class AboutSection extends Component {
   render() {
     return (
       <ScrollView>
         <FramedSegment title={labels.aboutSection.title}>
-          <Hyperlink linkStyle={styles.link} linkText={replace} linkDefault>
+          <AppText>{labels.aboutSection.text}</AppText>
-            <AppText>{labels.aboutSection.text}</AppText>
-          </Hyperlink>
         </FramedSegment>
         <FramedSegment title={labels.philosophy.title}>
           <AppText>{labels.philosophy.text}</AppText>
@@ -23,9 +19,7 @@ export default class AboutSection extends Component {
           <AppText>{labels.credits.note}</AppText>
         </FramedSegment>
         <FramedSegment title={labels.website.title}>
-          <Hyperlink linkStyle={styles.link} linkDefault>
+          <AppText>{links.website.url}</AppText>
-            <AppText>{links.website.url}</AppText>
-          </Hyperlink>
         </FramedSegment>
         <FramedSegment title={labels.version.title} last>
           <AppText>{require('../../package.json').version}</AppText>

components/settings/license.js

@@ -1,20 +1,16 @@
 import React, { Component } from 'react'
 import { View, ScrollView } from 'react-native'
-import Hyperlink from 'react-native-hyperlink'
 import AppText from '../app-text'
 import styles from '../../styles/index'
 import labels from '../../i18n/en/settings'
-import replace from '../helpers/replace-url-with-text'
 
 export default class License extends Component {
   render() {
     return (
       <ScrollView>
         <View style={styles.framedSegment}>
-          <Hyperlink linkStyle={styles.link} linkText={replace} linkDefault>
+          <AppText style={styles.framedSegmentTitle}>{`${labels.license.title} `}</AppText>
-            <AppText style={styles.framedSegmentTitle}>{`${labels.license.title} `}</AppText>
+          <AppText>{`${labels.license.text} `}</AppText>
-            <AppText>{`${labels.license.text} `}</AppText>
-          </Hyperlink>
         </View>
       </ScrollView>
     )

components/settings/nfp-settings/index.js

@@ -2,7 +2,6 @@ import React, { Component } from 'react'
 import {
   ScrollView, View
 } from 'react-native'
-import Hyperlink from 'react-native-hyperlink'
 import styles, { iconStyles } from '../../../styles'
 import labels from '../../../i18n/en/settings'
 import AppText from '../../app-text'
@@ -10,7 +9,6 @@ import FramedSegment from '../../framed-segment'
 import TempSlider from './temp-slider'
 import UseCervixSetting from './use-cervix'
 import Icon from 'react-native-vector-icons/Entypo'
-import replaceUrlWithText from '../../helpers/replace-url-with-text'
 
 export default class Settings extends Component {
   constructor(props) {
@@ -33,9 +31,8 @@ export default class Settings extends Component {
             <Icon name="info-with-circle" style={iconStyles.infoInHeading}/>
             <AppText style={styles.framedSegmentTitle}>{`${labels.preOvu.title} `}</AppText>
           </View>
-          <Hyperlink linkStyle={styles.link} linkText={replaceUrlWithText} linkDefault>
+          <AppText>{labels.preOvu.note}</AppText>
-            <AppText>{labels.preOvu.note}</AppText>
+          <AppText>{labels.preOvu.note}</AppText>
-          </Hyperlink>
         </FramedSegment>
       </ScrollView>
     )

i18n/en/labels.js

@@ -96,7 +96,7 @@ export const home = {
   cycleDayKnown: d => `Your last period started ${getDaysDescriptor(d)}.`,
   trackPeriod: 'track your period',
   checkFertility: 'check your fertility',
-  phase: n => `${['1st', '2nd', '3rd'][n - 1]} cycle phase`
+  phase: n => `${['1st', '2nd', '3rd'][n - 1]} cycle phase`,
 }
 
 const getDaysDescriptor = cycleDayNumber => {

i18n/en/links.js

@@ -0,0 +1,21 @@
+export default {
+  gitlab: {
+    url: 'https://gitlab.com/bloodyhealth/drip',
+    text: 'GitLab'
+  },
+  email: {
+    url: 'mailto:bloodyhealth@mailbox.org',
+    text: 'email'
+  },
+  wiki: {
+    url: 'https://gitlab.com/bloodyhealth/drip/wikis/home',
+    text: 'wiki'
+  },
+  website: {
+    url: 'https://bloodyhealth.gitlab.io/'
+  },
+  moreAboutNfp: {
+    url: 'https://gitlab.com/bloodyhealth/drip/wikis/nfp/intro',
+    text: 'More'
+  },
+}

i18n/en/settings.js

@@ -1,21 +1,4 @@
-
+import links from './links'
-export const links = {
-  gitlab: {
-    url: 'https://gitlab.com/bloodyhealth/drip',
-    text: 'GitLab'
-  },
-  email: {
-    url: 'mailto:bloodyhealth@mailbox.org',
-    text: 'email'
-  },
-  wiki: {
-    url: 'https://gitlab.com/bloodyhealth/drip/wikis/',
-    text: 'wiki'
-  },
-  website: {
-    url: 'https://bloodyhealth.gitlab.io/'
-  }
-}
 
 export default {
   menuTitles: {

i18n/en/symptom-info.js

@@ -1,4 +1,4 @@
-import {links} from './settings'
+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.`,

lib/sympto-adapter.js

@@ -7,7 +7,8 @@ export function getFertilityStatusForDay(dateString) {
   const status = getCycleStatusForDay(dateString)
   if (!status) return {
     status: labels.fertile,
-    phase: null
+    phase: null,
+    statusText: labels.unknown
   }
 
   const phases = Object.keys(status.phases)