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

Link nfp rules

See merge request bloodyhealth/drip!169
This commit is contained in:
Julia Friesel
2019-02-04 20:20:58 +00:00
14 changed files with 182 additions and 174 deletions
+11 -7
View File
@@ -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
style={[styles.appText, props.style]}
onPress={props.onPress}
numberOfLines={props.numberOfLines}
>
{props.children}
</Text>
<Link>
<Text
style={[styles.appText, props.style]}
onPress={props.onPress}
numberOfLines={props.numberOfLines}
>
{props.children}
</Text>
</Link>
)
}
@@ -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>
</Hyperlink>
<AppText>{labels[currentSymptom].text}</AppText>
</FramedSegment>
</ScrollView>
)
@@ -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
}
+112 -104
View File
@@ -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
this.getBleedingPrediction = cycleModule().getPredictedMenses
const { getCycleDayNumber, getPredictedMenses } = cycleModule()
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 ?
labels.cycleDayKnown(this.state.cycleDayNumber)
:
const { isShowingMore, cycleDayNumber, phase, status } = this.state
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]}>
<AppText style={styles.iconText}>
{this.state.cycleDayNumber || labels.unknown}
</AppText>
</View>
<IconText wrapperStyles={styles.wrapperCycle}>
{cycleDayNumber || labels.unknown}
</IconText>
{ this.state.showMore &&
{ isShowingMore &&
<AppText style={styles.paragraph}>{cycleDayMoreText}</AppText>
}
</HomeElement>
<Button
onPress={() => this.passTodayTo('CycleDay')}
backgroundColor={cycleDayColor}>
{labels.editToday}
</Button>
</View>
<View style={styles.homeIconElement}>
<HomeElement
onPress={ () => this.passTodayTo('BleedingEditView') }
buttonColor={ periodColor }
buttonLabel={ labels.trackPeriod }
>
<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
onPress={() => {
const today = LocalDate.now().toString()
const cycleDay = getCycleDay(today)
const props = {date: today}
if (cycleDay) props.cycleDay = cycleDay
this.props.navigate('BleedingEditView', props)
}}
backgroundColor={periodColor}>
{labels.trackPeriod}
</Button>
</View>
<View style={styles.homeIconElement}>
<HomeElement
onPress={ () => navigate('Chart') }
buttonColor={ secondaryColor }
buttonLabel={ labels.checkFertility }
>
<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
onPress={() => this.props.navigate('Chart')}
backgroundColor={secondaryColor}>
{labels.checkFertility}
</Button>
</View>
<IconText wrapperStyles={styles.wrapperCircle}>
{ phase ? phase.toString() : labels.unknown }
</IconText>
{ phase &&
<AppText>{`${labels.phase(phase)} (${status})`}</AppText>
}
{ isShowingMore &&
<View>
<AppText styles={styles.paragraph}>
{ `${statusText} ${links.moreAboutNfp.url}` }
</AppText>
</View>
}
</HomeElement>
</View>
</ScrollView>
{!this.state.showMore &&
<TouchableHighlight
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>
}
<ShowMoreToggler
isShowingMore={isShowingMore}
onToggle={this.toggleShowingMore}
/>
</View>
)
}
+2 -6
View File
@@ -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>{labels.text}</AppText>
</Hyperlink>
<AppText style={styles.framedSegmentTitle}>{labels.title}</AppText>
<AppText>{labels.text}</AppText>
<View style={styles.licenseButtons}>
<Button
style={styles.licenseButton}
+21
View File
@@ -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
}
+4 -10
View File
@@ -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>
</Hyperlink>
<AppText>{labels.aboutSection.text}</AppText>
</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>
</Hyperlink>
<AppText>{links.website.url}</AppText>
</FramedSegment>
<FramedSegment title={labels.version.title} last>
<AppText>{require('../../package.json').version}</AppText>
+2 -6
View File
@@ -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>{`${labels.license.text} `}</AppText>
</Hyperlink>
<AppText style={styles.framedSegmentTitle}>{`${labels.license.title} `}</AppText>
<AppText>{`${labels.license.text} `}</AppText>
</View>
</ScrollView>
)
+2 -5
View File
@@ -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>
</Hyperlink>
<AppText>{labels.preOvu.note}</AppText>
<AppText>{labels.preOvu.note}</AppText>
</FramedSegment>
</ScrollView>
)
+1 -1
View File
@@ -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 => {
+21
View File
@@ -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'
},
}
+2 -19
View File
@@ -1,21 +1,4 @@
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/'
}
}
import links from './links'
export default {
menuTitles: {
@@ -123,7 +106,7 @@ export default {
title: 'drip is an open-source cycle tracking app',
text: `Copyright (C) 2019 Bloody Health GbR
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details: https://www.gnu.org/licenses/gpl-3.0.html
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details: https://www.gnu.org/licenses/gpl-3.0.html
You can contact us by bloodyhealth@mailbox.org.`
},
+1 -1
View File
@@ -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.`,
+2 -1
View File
@@ -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)