From 4408334d7c0ff04cbccd55f6ba59e8d81874c7e0 Mon Sep 17 00:00:00 2001 From: Sofiya Tepikin Date: Mon, 21 Jan 2019 00:48:30 +0100 Subject: [PATCH 1/6] Makes some order in home component --- components/home.js | 206 ++++++++++++++++++++++----------------------- 1 file changed, 102 insertions(+), 104 deletions(-) diff --git a/components/home.js b/components/home.js index 1d66b53..112094c 100644 --- a/components/home.js +++ b/components/home.js @@ -1,4 +1,5 @@ import React, { Component } from 'react' +import { Linking } from 'react-native' import { ScrollView, View, TouchableOpacity, TouchableHighlight, Dimensions } from 'react-native' import { LocalDate, ChronoUnit } from 'js-joda' import Icon from 'react-native-vector-icons/Entypo' @@ -12,16 +13,63 @@ import AppText, { AppTextLight } 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), @@ -32,141 +80,91 @@ export default class Home extends Component { } 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') return ( - - this.passTodayTo('CycleDay')} - style={styles.homeIconElement} + + + this.passTodayTo('CycleDay') } + buttonColor={ cycleDayColor } + buttonLabel={ labels.editToday } > - - - {this.state.cycleDayNumber || labels.unknown} - - + + {cycleDayNumber || labels.unknown} + - { this.state.showMore && + { isShowingMore && {cycleDayMoreText} } + - - - - - this.passTodayTo('BleedingEditView')} - style={styles.homeIconElement} + this.passTodayTo('BleedingEditView') } + buttonColor={ periodColor } + buttonLabel={ labels.trackPeriod } > - - - {this.state.bleedingPredictionRange} - - - {this.state.showMore && + + {this.state.bleedingPredictionRange} + + + { isShowingMore && {this.state.predictionText} } + - - - - - this.props.navigate('Chart')} - style={styles.homeIconElement} + 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 && + + + {this.state.statusText} + + + } + - - - {!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} - - - - } + ) } From 1e39c71a4ee9f25993b83e2efff51ffebe02f14b Mon Sep 17 00:00:00 2001 From: Sofiya Tepikin Date: Mon, 28 Jan 2019 23:52:00 +0300 Subject: [PATCH 2/6] temp --- components/home.js | 12 +++++++++--- i18n/en/labels.js | 2 +- i18n/en/settings.js | 8 ++++++-- 3 files changed, 16 insertions(+), 6 deletions(-) diff --git a/components/home.js b/components/home.js index 112094c..a649b5a 100644 --- a/components/home.js +++ b/components/home.js @@ -1,13 +1,14 @@ import React, { Component } from 'react' -import { Linking } from 'react-native' import { ScrollView, View, TouchableOpacity, TouchableHighlight, Dimensions } from 'react-native' import { LocalDate, ChronoUnit } from 'js-joda' import Icon from 'react-native-vector-icons/Entypo' +import Hyperlink from 'react-native-hyperlink' 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, links } from '../i18n/en/labels' import cycleModule from '../lib/cycle' import { getCycleDaysSortedByDate } from '../db' import { getFertilityStatusForDay } from '../lib/sympto-adapter' +import replace from './helpers/replace-url-with-text' import styles from '../styles' import AppText, { AppTextLight } from './app-text' import DripHomeIcon from '../assets/drip-home-icons' @@ -95,6 +96,8 @@ export default class Home extends Component { labels.cycleDayKnown(cycleDayNumber) : labels.cycleDayNotEnoughInfo + const { statusText } = this.state; + return ( @@ -154,7 +157,10 @@ export default class Home extends Component { { isShowingMore && - {this.state.statusText} + { statusText && { `${status}.` } } + + ${links.moreToNfp.url}`} + } diff --git a/i18n/en/labels.js b/i18n/en/labels.js index 208c75a..220cad4 100644 --- a/i18n/en/labels.js +++ b/i18n/en/labels.js @@ -94,7 +94,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 => { diff --git a/i18n/en/settings.js b/i18n/en/settings.js index 19c13f0..acca595 100644 --- a/i18n/en/settings.js +++ b/i18n/en/settings.js @@ -14,7 +14,11 @@ export const links = { }, website: { url: 'https://bloodyhealth.gitlab.io/' - } + }, + moreToNfp: { + url: 'https://gitlab.com/bloodyhealth/drip/wikis/nfp/intro', + text: 'More' + }, } export default { @@ -122,7 +126,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 email at bloodyhealth@mailbox.com.` }, From 3e94df56e29ced785e624ec54689315fdd29d77d Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Sat, 2 Feb 2019 10:54:51 +0100 Subject: [PATCH 3/6] Limit press handler to just button --- components/home.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/home.js b/components/home.js index 327f0c0..1412ec3 100644 --- a/components/home.js +++ b/components/home.js @@ -1,5 +1,5 @@ import React, { Component } from 'react' -import { ScrollView, View, TouchableHighlight, TouchableOpacity, Dimensions } from 'react-native' +import { ScrollView, View, TouchableHighlight, Dimensions } from 'react-native' import { LocalDate, ChronoUnit } from 'js-joda' import Icon from 'react-native-vector-icons/Entypo' import Hyperlink from 'react-native-hyperlink' @@ -49,7 +49,7 @@ const IconText = ({ children, wrapperStyles }) => { const HomeElement = ({ children, onPress, buttonColor, buttonLabel }) => { return ( - @@ -59,7 +59,7 @@ const HomeElement = ({ children, onPress, buttonColor, buttonLabel }) => { backgroundColor={ buttonColor }> { buttonLabel } - + ) } From 8318f5d313f5d309a3f33117c5f6e0635e28c498 Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Sat, 2 Feb 2019 11:23:40 +0100 Subject: [PATCH 4/6] Make link work --- components/helpers/replace-url-with-text.js | 5 +---- components/home.js | 5 ++--- components/settings/about.js | 3 ++- 3 files changed, 5 insertions(+), 8 deletions(-) diff --git a/components/helpers/replace-url-with-text.js b/components/helpers/replace-url-with-text.js index 69493eb..5b98cd0 100644 --- a/components/helpers/replace-url-with-text.js +++ b/components/helpers/replace-url-with-text.js @@ -1,9 +1,6 @@ -import {links} from '../../i18n/en/settings' +import links from '../../i18n/en/links' 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 1412ec3..f4ec660 100644 --- a/components/home.js +++ b/components/home.js @@ -158,11 +158,10 @@ export default class Home extends Component { } { isShowingMore && - + - { statusText } + { `${statusText} ${links.moreAboutNfp.url}` } - {links.moreAboutNfp.url} } diff --git a/components/settings/about.js b/components/settings/about.js index c944d4a..320ba8c 100644 --- a/components/settings/about.js +++ b/components/settings/about.js @@ -4,7 +4,8 @@ import Hyperlink from 'react-native-hyperlink' import AppText from '../app-text' import SettingsSegment from './shared/settings-segment' import styles from '../../styles/index' -import labels, { links } from '../../i18n/en/settings' +import labels from '../../i18n/en/settings' +import links from '../../i18n/en/links' import replace from '../helpers/replace-url-with-text' export default class AboutSection extends Component { From 87301da648a998384b8afb277e592f6c9e5ad359 Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Sat, 2 Feb 2019 11:33:46 +0100 Subject: [PATCH 5/6] Return status text when no NFP status can be detected --- lib/sympto-adapter.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/sympto-adapter.js b/lib/sympto-adapter.js index 980cbfe..858a14e 100644 --- a/lib/sympto-adapter.js +++ b/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) From 0878654e8291bbcbd0e5f5e70bde3979c49f20bb Mon Sep 17 00:00:00 2001 From: Julia Friesel Date: Sat, 2 Feb 2019 11:55:03 +0100 Subject: [PATCH 6/6] Extract link component and parse all app text for links --- components/app-text.js | 16 ++++++++++------ components/helpers/replace-url-with-text.js | 6 ------ components/home.js | 10 +++------- components/license.js | 8 ++------ components/link.js | 21 +++++++++++++++++++++ components/settings/about.js | 11 ++--------- components/settings/license.js | 8 ++------ components/settings/nfp-settings/index.js | 6 +----- 8 files changed, 41 insertions(+), 45 deletions(-) delete mode 100644 components/helpers/replace-url-with-text.js create mode 100644 components/link.js diff --git a/components/app-text.js b/components/app-text.js index 8311d39..2f1f826 100644 --- a/components/app-text.js +++ b/components/app-text.js @@ -1,15 +1,19 @@ 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/helpers/replace-url-with-text.js b/components/helpers/replace-url-with-text.js deleted file mode 100644 index 5b98cd0..0000000 --- a/components/helpers/replace-url-with-text.js +++ /dev/null @@ -1,6 +0,0 @@ -import links from '../../i18n/en/links' - -export default function(url) { - const link = Object.values(links).find(link => link.url === url) - return link ? link.text : url -} \ No newline at end of file diff --git a/components/home.js b/components/home.js index f4ec660..e9eb0f4 100644 --- a/components/home.js +++ b/components/home.js @@ -2,7 +2,6 @@ import React, { Component } from 'react' import { ScrollView, View, TouchableHighlight, Dimensions } from 'react-native' import { LocalDate, ChronoUnit } from 'js-joda' import Icon from 'react-native-vector-icons/Entypo' -import Hyperlink from 'react-native-hyperlink' import { secondaryColor, cycleDayColor, periodColor } from '../styles' import { home as labels, @@ -12,7 +11,6 @@ import { import links from '../i18n/en/links' import cycleModule from '../lib/cycle' import { getFertilityStatusForDay } from '../lib/sympto-adapter' -import replace from './helpers/replace-url-with-text' import styles from '../styles' import AppText from './app-text' import DripHomeIcon from '../assets/drip-home-icons' @@ -158,11 +156,9 @@ export default class Home extends Component { } { isShowingMore && - - - { `${statusText} ${links.moreAboutNfp.url}` } - - + + { `${statusText} ${links.moreAboutNfp.url}` } + } diff --git a/components/license.js b/components/license.js index 051e4ec..027e34b 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}