diff --git a/components/Home.js b/components/Home.js
index d0ebed8..0a57b6b 100644
--- a/components/Home.js
+++ b/components/Home.js
@@ -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 &&
{cycleDayText}
- {labels.cycleDay}
+ {t('components.Home.cycleDay')}
}
{phase &&
{formatWithOrdinalSuffix(phase)}
- {labels.cyclePhase}
+ {t('components.Home.cyclePhase')}
{status}
@@ -61,7 +63,7 @@ const Home = ({navigate, setDate}) => {
{prediction}
{phase && (
diff --git a/components/helpers/home.js b/components/helpers/home.js
index e5b75c3..d822800 100644
--- a/components/helpers/home.js
+++ b/components/helpers/home.js
@@ -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,
diff --git a/i18n/en.json b/i18n/en.json
index 7178649..d74e3ec 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -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 - "
}
}
}
diff --git a/i18n/en/labels.js b/i18n/en/labels.js
index 1721a3d..c341805 100644
--- a/i18n/en/labels.js
+++ b/i18n/en/labels.js
@@ -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.',