From f3cabe5ca1796a438e868bedda75d7718f3dafe3 Mon Sep 17 00:00:00 2001
From: Lisa Hillebrand <lisa.hillebrand@posteo.de>
Date: Sun, 2 May 2021 21:21:53 +0200
Subject: [PATCH] 162 Use translation function in home component

---
 components/Home.js         | 14 ++++++++------
 components/helpers/home.js |  4 ++--
 i18n/en.json               |  4 +++-
 i18n/en/labels.js          |  4 ----
 4 files changed, 13 insertions(+), 13 deletions(-)

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 &&
         <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}>
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.',