diff --git a/components/app-text.js b/components/app-text.js index 079d9c7..829e8b3 100644 --- a/components/app-text.js +++ b/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 ( - - {props.children} - + + + {props.children} + + ) } diff --git a/components/cycle-day/symptoms/info-symptom.js b/components/cycle-day/symptoms/info-symptom.js index 8ebe170..951ed47 100644 --- a/components/cycle-day/symptoms/info-symptom.js +++ b/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} > - - {labels[currentSymptom].text} - + {labels[currentSymptom].text} ) diff --git a/components/helpers/replace-url-with-text.js b/components/helpers/replace-url-with-text.js deleted file mode 100644 index 69493eb..0000000 --- a/components/helpers/replace-url-with-text.js +++ /dev/null @@ -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 -} \ No newline at end of file diff --git a/components/home.js b/components/home.js index 01a74d2..e9eb0f4 100644 --- a/components/home.js +++ b/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 ( + + + {isShowingMore ? shared.less : shared.more} + + + + ) +} + +const IconText = ({ children, wrapperStyles }) => { + return ( + + + { children } + + + ) +} + +const HomeElement = ({ children, onPress, buttonColor, buttonLabel }) => { + return ( + + { children } + + + ) +} + 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 ( - + + this.passTodayTo('CycleDay') } + buttonColor={ cycleDayColor } + buttonLabel={ labels.editToday } + > - - - {this.state.cycleDayNumber || labels.unknown} - - + + {cycleDayNumber || labels.unknown} + - { this.state.showMore && + { isShowingMore && {cycleDayMoreText} } + - - - - - + this.passTodayTo('BleedingEditView') } + buttonColor={ periodColor } + buttonLabel={ labels.trackPeriod } + > - - - {this.state.bleedingPredictionRange} - - - {this.state.showMore && + + {this.state.bleedingPredictionRange} + + + { isShowingMore && {this.state.predictionText} } + - - - - - + navigate('Chart') } + buttonColor={ secondaryColor } + buttonLabel={ labels.checkFertility } + > - - - {this.state.phase ? - this.state.phase.toString() - : - labels.unknown - } - - - {this.state.phase && - - {`${labels.phase(this.state.phase)} (${this.state.status})`} - - } - {this.state.showMore && - - {this.state.statusText} - - } - - + + { phase ? phase.toString() : labels.unknown } + + + { phase && + {`${labels.phase(phase)} (${status})`} + } + { isShowingMore && + + + { `${statusText} ${links.moreAboutNfp.url}` } + + + } + - - - {!this.state.showMore && - this.setState({showMore: true})} - style={[styles.showMore, { - top: height / 2 - styles.header.height - 30, - left: width - 40 - }]} - > - - {shared.more} - - - - } - - {this.state.showMore && - this.setState({showMore: false})} - style={[styles.showLess, { - top: height / 2 - styles.header.height - 30, - left: 10 - }]} - > - - {shared.less} - - - - } + ) } diff --git a/components/license.js b/components/license.js index 8e35b2b..a908c5c 100644 --- a/components/license.js +++ b/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 ( - - {labels.title} - {labels.text} - + {labels.title} + {labels.text}