From 0b447178c5d92ecd302de27a31e7e45eb7f9131e Mon Sep 17 00:00:00 2001
From: Lisa Hillebrand <lisa.hillebrand@posteo.de>
Date: Sun, 2 May 2021 21:45:46 +0200
Subject: [PATCH] 162 Use hook to merge component path with translation key

---
 components/Home.js               | 10 +++++-----
 hooks/useComponentTranslation.js | 11 +++++++++++
 2 files changed, 16 insertions(+), 5 deletions(-)
 create mode 100644 hooks/useComponentTranslation.js

diff --git a/components/Home.js b/components/Home.js
index 0a57b6b..6f2acea 100644
--- a/components/Home.js
+++ b/components/Home.js
@@ -16,11 +16,11 @@ import { determinePredictionText, formatWithOrdinalSuffix } from './helpers/home
 
 import { Colors, Fonts, Sizes, Spacing } from '../styles'
 import { LocalDate } from 'js-joda'
-import { useTranslation } from 'react-i18next'
+import useComponentTranslation from '../hooks/useComponentTranslation'
 
 const Home = ({ navigate, setDate }) => {  
 
-  const { t } = useTranslation();
+  const { t } = useComponentTranslation('components.Home');
 
   function navigateToCycleDayView() {
     setDate(todayDateString)
@@ -46,14 +46,14 @@ const Home = ({ navigate, setDate }) => {
       {cycleDayNumber &&
         <View style={styles.line}>
           <AppText style={styles.whiteSubtitle}>{cycleDayText}</AppText>
-          <AppText style={styles.turquoiseText}>{t('components.Home.cycleDay')}</AppText>
+          <AppText style={styles.turquoiseText}>{t('cycleDay')}</AppText>
         </View>
       }
       {phase &&
         <View style={styles.line}>
           <AppText style={styles.whiteSubtitle}>{formatWithOrdinalSuffix(phase)}</AppText>
           <AppText style={styles.turquoiseText}>
-            {t('components.Home.cyclePhase')}
+            {t('cyclePhase')}
           </AppText>
           <AppText style={styles.turquoiseText}>{status}</AppText>
           <Asterisk />
@@ -63,7 +63,7 @@ const Home = ({ navigate, setDate }) => {
         <AppText style={styles.turquoiseText}>{prediction}</AppText>
       </View>
       <Button isCTA isSmall={false} onPress={navigateToCycleDayView}>
-        {t('components.Home.addDataForToday')}
+        {t('addDataForToday')}
       </Button>
       {phase && (
         <View style={styles.asteriskLine}>
diff --git a/hooks/useComponentTranslation.js b/hooks/useComponentTranslation.js
new file mode 100644
index 0000000..968491d
--- /dev/null
+++ b/hooks/useComponentTranslation.js
@@ -0,0 +1,11 @@
+import { useTranslation } from "react-i18next"
+
+export default function useComponentTranslation(componentPath) {
+    const { t, i18n } = useTranslation();
+    function translate(code, options) {
+        const mergedPath = `${componentPath}.${code}`;
+        const translation = t(mergedPath, options);
+        return translation !== mergedPath ? translation : t(code, options);
+    }
+    return { t: translate, i18n };
+}
\ No newline at end of file