Skip to content
Snippets Groups Projects
Commit f3cabe5c authored by Lisa Hillebrand's avatar Lisa Hillebrand
Browse files

162 Use translation function in home component

parent e0f64173
No related branches found
No related tags found
No related merge requests found
......@@ -15,10 +15,12 @@ import { getFertilityStatusForDay } from '../lib/sympto-adapter'
import { determinePredictionText, formatWithOrdinalSuffix } from './helpers/home'
import { Colors, Fonts, Sizes, Spacing } from '../styles'
import { home as labels } from '../i18n/en/labels'
import { LocalDate } from 'js-joda'
import { useTranslation } from 'react-i18next'
const Home = ({navigate, setDate}) => {
const Home = ({ navigate, setDate }) => {
const { t } = useTranslation();
function navigateToCycleDayView() {
setDate(todayDateString)
......@@ -30,7 +32,7 @@ const Home = ({navigate, setDate}) => {
const cycleDayNumber = getCycleDayNumber(todayDateString)
const { status, phase, statusText } =
getFertilityStatusForDay(todayDateString)
const prediction = determinePredictionText(getPredictedMenses())
const prediction = determinePredictionText(getPredictedMenses(), t)
const cycleDayText = cycleDayNumber ? formatWithOrdinalSuffix(cycleDayNumber) : ''
......@@ -44,14 +46,14 @@ const Home = ({navigate, setDate}) => {
{cycleDayNumber &&
<View style={styles.line}>
<AppText style={styles.whiteSubtitle}>{cycleDayText}</AppText>
<AppText style={styles.turquoiseText}>{labels.cycleDay}</AppText>
<AppText style={styles.turquoiseText}>{t('components.Home.cycleDay')}</AppText>
</View>
}
{phase &&
<View style={styles.line}>
<AppText style={styles.whiteSubtitle}>{formatWithOrdinalSuffix(phase)}</AppText>
<AppText style={styles.turquoiseText}>
{labels.cyclePhase}
{t('components.Home.cyclePhase')}
</AppText>
<AppText style={styles.turquoiseText}>{status}</AppText>
<Asterisk />
......@@ -61,7 +63,7 @@ const Home = ({navigate, setDate}) => {
<AppText style={styles.turquoiseText}>{prediction}</AppText>
</View>
<Button isCTA isSmall={false} onPress={navigateToCycleDayView}>
{labels.addData}
{t('components.Home.addDataForToday')}
</Button>
{phase && (
<View style={styles.asteriskLine}>
......
......@@ -17,8 +17,8 @@ function getTimes(prediction) {
return { todayDate, predictedBleedingStart, predictedBleedingEnd, daysToEnd }
}
export function determinePredictionText(bleedingPrediction) {
if (!bleedingPrediction.length) return predictLabels.noPrediction
export function determinePredictionText(bleedingPrediction, t) {
if (!bleedingPrediction.length) return t('components.Home.noPrediction')
const {
todayDate,
predictedBleedingStart,
......
......@@ -2,7 +2,9 @@
"components": {
"Home": {
"addDataForToday": "add data for today",
"noPrediction": "As soon as you have tracked 3 menstrual cycles, drip will make predictions for the next ones."
"noPrediction": "As soon as you have tracked 3 menstrual cycles, drip will make predictions for the next ones.",
"cycleDay": " day of your cycle",
"cyclePhase": " cycle phase - "
}
}
}
......@@ -4,9 +4,6 @@ const settingsTitles = labels.menuItems
export const home = {
unknown: '?',
phase: n => `${['1st', '2nd', '3rd'][n - 1]} cycle phase`,
cycleDay: ' day of your cycle',
cyclePhase: ' cycle phase - ',
addData: 'add data for today'
}
export const chart = {
......@@ -69,7 +66,6 @@ export const stats = {
}
export const bleedingPrediction = {
noPrediction: `As soon as you have tracked 3 menstrual cycles, drip will make predictions for the next ones.`,
predictionInFuture: (startDays, endDays) => `Your next period is likely to start in ${startDays} to ${endDays} days.`,
predictionStartedXDaysLeft: (numberOfDays) => `Your period is likely to start today or within the next ${numberOfDays} days.`,
predictionStarted1DayLeft: 'Your period is likely to start today or tomorrow.',
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment