Merge branch 'link-nfp-rules' into 'master'
Link nfp rules See merge request bloodyhealth/drip!169
This commit is contained in:
+11
-7
@@ -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
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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,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
@@ -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 => {
|
||||
|
||||
@@ -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
@@ -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,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.`,
|
||||
|
||||
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user