Merge branch '614/Use-translation-library-for-settings-menu' into 'main'

614 Use translation library for settings menu

See merge request bloodyhealth/drip!529

components/cycle-day/symptom-box.js

@@ -20,7 +20,7 @@ const SymptomBox = ({
   editedSymptom,
   setEditedSymptom,
 }) => {
-  const { t } = useTranslation()
+  const { t } = useTranslation(null, { keyPrefix: 'cycleDay.symptomBox' })
   const isSymptomEdited = editedSymptom === symptom
   const isSymptomDisabled = isDateInFuture(date) && symptom !== 'note'
   const isExcluded = symptomData !== null ? symptomData.exclude : false
@@ -62,9 +62,7 @@ const SymptomBox = ({
           size={Sizes.icon}
         />
         <View style={styles.textContainer}>
-          <AppText style={symptomNameStyle}>
-            {t(`cycleDay.symptomBox.${symptom}`)}
-          </AppText>
+          <AppText style={symptomNameStyle}>{t(symptom)}</AppText>
           {symptomDataToDisplay && (
             <AppText style={textStyle} numberOfLines={4}>
               {symptomDataToDisplay}

components/header/hamburger-menu.js

@@ -7,28 +7,28 @@ import {
   View,
 } from 'react-native'
 import PropTypes from 'prop-types'
+import AppText from '../common/app-text'
 
 import AppIcon from '../common/app-icon'
 import CloseIcon from '../common/close-icon'
-import MenuItem from './menu-item'
 
-import { Colors, Sizes } from '../../styles'
-import settingsLabels from '../../i18n/en/settings'
+import { Colors, Sizes, Typography } from '../../styles'
 import { HIT_SLOP } from '../../config'
-
-const { menuItems } = settingsLabels
+import { useTranslation } from 'react-i18next'
 
 const settingsMenuItems = [
-  { name: menuItems.settings, component: 'SettingsMenu' },
-  { name: menuItems.about, component: 'About' },
-  { name: menuItems.license, component: 'License' },
-  { name: menuItems.privacyPolicy, component: 'PrivacyPolicy' },
+  { labelKey: 'settings', componentName: 'SettingsMenu' },
+  { labelKey: 'about', componentName: 'About' },
+  { labelKey: 'license', componentName: 'License' },
+  { labelKey: 'privacyPolicy', componentName: 'PrivacyPolicy' },
 ]
 
 const HamburgerMenu = ({ navigate }) => {
   const [isOpen, setIsOpen] = useState(false)
   const closeMenu = () => setIsOpen(false)
 
+  const { t } = useTranslation(null, { keyPrefix: 'hamburgerMenu.menuMain' })
+
   if (!isOpen)
     return (
       <TouchableOpacity onPress={() => setIsOpen(true)} hitSlop={HIT_SLOP}>
@@ -36,23 +36,25 @@ const HamburgerMenu = ({ navigate }) => {
       </TouchableOpacity>
     )
 
+  function onPress(componentName) {
+    closeMenu()
+    navigate(componentName)
+  }
+
   return (
-    <Modal animationType="fade" onRequestClose={closeMenu} transparent={true}>
-      <TouchableOpacity
-        onPress={closeMenu}
-        style={styles.blackBackground}
-      ></TouchableOpacity>
+    <Modal animationType="fade" onRequestClose={closeMenu} transparent>
+      <TouchableOpacity onPress={closeMenu} style={styles.blackBackground} />
       <View style={styles.menu}>
         <View style={styles.iconContainer}>
           <CloseIcon color={'black'} onClose={closeMenu} />
         </View>
-        {settingsMenuItems.map((item) => (
-          <MenuItem
-            item={item}
-            key={item.name}
-            closeMenu={closeMenu}
-            navigate={navigate}
-          />
+        {settingsMenuItems.map(({ labelKey, componentName }) => (
+          <TouchableOpacity
+            onPress={() => onPress(componentName)}
+            key={labelKey}
+          >
+            <AppText style={styles.menuItem}>{t(labelKey)}</AppText>
+          </TouchableOpacity>
         ))}
       </View>
     </Modal>
@@ -84,4 +86,5 @@ const styles = StyleSheet.create({
     position: 'absolute',
     width: '60%',
   },
+  menuItem: Typography.subtitle,
 })

components/header/menu-item.js

@@ -1,35 +0,0 @@
-import React from 'react'
-import { StyleSheet, TouchableOpacity } from 'react-native'
-import PropTypes from 'prop-types'
-
-import AppText from '../common/app-text'
-
-import { Typography } from '../../styles'
-
-const MenuItem = ({ item, navigate, closeMenu }) => {
-  const { component, name } = item
-  const onPress = () => {
-    closeMenu()
-    navigate(component)
-  }
-
-  return (
-    <TouchableOpacity onPress={onPress}>
-      <AppText style={styles.text}>{name}</AppText>
-    </TouchableOpacity>
-  )
-}
-
-MenuItem.propTypes = {
-  item: PropTypes.object.isRequired,
-  navigate: PropTypes.func.isRequired,
-  closeMenu: PropTypes.func.isRequired,
-}
-
-const styles = StyleSheet.create({
-  text: {
-    ...Typography.subtitle,
-  },
-})
-
-export default MenuItem

components/settings/About.js

@@ -12,7 +12,7 @@ import links from '../../i18n/en/links'
 import { useTranslation } from 'react-i18next'
 
 const AboutSection = () => {
-  const { t } = useTranslation(null, { keyPrefix: 'settings.about' })
+  const { t } = useTranslation(null, { keyPrefix: 'hamburgerMenu.about' })
 
   return (
     <AppPage title={t('title')}>

components/settings/License.js

@@ -8,7 +8,7 @@ import AppLink from '../common/AppLink'
 import Segment from '../common/segment'
 
 const License = ({ children }) => {
-  const { t } = useTranslation(null, { keyPrefix: 'settings.license' })
+  const { t } = useTranslation(null, { keyPrefix: 'hamburgerMenu.license' })
   const currentYear = new Date().getFullYear()
   const link = 'https://www.gnu.org/licenses/gpl-3.0.html'
   return (

components/settings/menu-item.js

@@ -7,18 +7,22 @@ import AppText from '../common/app-text'
 import Segment from '../common/segment'
 
 import { Colors, Containers, Sizes } from '../../styles'
+import { useTranslation } from 'react-i18next'
 
 const MenuItem = ({ item, last, navigate }) => {
+  const { t } = useTranslation(null, {
+    keyPrefix: 'hamburgerMenu.settings.menuItem',
+  })
   return (
     <Segment last={last}>
       <TouchableOpacity
         style={styles.container}
-        key={item.name}
-        onPress={() => navigate(item.component)}
+        key={item.label}
+        onPress={() => navigate(item.componentName)}
       >
         <View>
-          <AppText style={styles.title}>{item.name}</AppText>
-          {item.text.length > 0 && <AppText>{item.text}</AppText>}
+          <AppText style={styles.title}>{t(`${item.label}.name`)}</AppText>
+          {!!item.label && <AppText>{t(`${item.label}.text`)}</AppText>}
         </View>
         <AppIcon name="chevron-right" color={Colors.orange} />
       </TouchableOpacity>

components/settings/privacy-policy.js

@@ -9,7 +9,9 @@ import Segment from '../common/segment'
 import { Colors, Sizes } from '../../styles'
 
 const PrivacyPolicy = () => {
-  const { t } = useTranslation(null, { keyPrefix: 'settings.privacyPolicy' })
+  const { t } = useTranslation(null, {
+    keyPrefix: 'hamburgerMenu.privacyPolicy',
+  })
   const sections = ['intro', 'dataUse', 'permissions', 'transparency']
 
   return (

components/settings/settings-menu.js

@@ -4,21 +4,21 @@ import PropTypes from 'prop-types'
 import AppPage from '../common/app-page'
 import MenuItem from './menu-item'
 
-import settingsLabels from '../../i18n/en/settings'
+import { useTranslation } from 'react-i18next'
 
-const { menuItems } = settingsLabels
-const menu = [
-  { ...menuItems.reminders, component: 'Reminders' },
-  { ...menuItems.nfpSettings, component: 'NfpSettings' },
-  { ...menuItems.dataManagement, component: 'DataManagement' },
-  { ...menuItems.password, component: 'Password' },
+const menuItems = [
+  { label: 'reminders', componentName: 'Reminders' },
+  { label: 'nfpSettings', componentName: 'NfpSettings' },
+  { label: 'dataManagement', componentName: 'DataManagement' },
+  { label: 'password', componentName: 'Password' },
 ]
 
 const SettingsMenu = ({ navigate }) => {
+  const { t } = useTranslation()
   return (
-    <AppPage title={settingsLabels.title}>
-      {menu.map((menuItem, i) => {
-        const last = menu.length === i + 1
+    <AppPage title={t('hamburgerMenu.settings.title')}>
+      {menuItems.map((menuItem, i) => {
+        const last = menuItems.length === i + 1
 
         return (
           <MenuItem item={menuItem} key={i} last={last} navigate={navigate} />