Merge branch '615-Use-translation-library-for-pages' into 'main'

615 Use translation library for pages

Closes #615

See merge request bloodyhealth/drip!530

components/menu/index.js

@@ -6,20 +6,23 @@ import MenuItem from './menu-item'
 
 import { Containers } from '../../styles'
 import { pages } from '../pages'
+import { useTranslation } from 'react-i18next'
 
 const Menu = ({ currentPage, navigate }) => {
   const menuItems = pages.filter((page) => page.isInMenu)
 
+  const { t } = useTranslation(null, { keyPrefix: 'bottomMenu' })
+
   return (
     <View style={styles.container}>
-      {menuItems.map(({ icon, label, component }) => {
+      {menuItems.map(({ icon, labelKey, component }) => {
         return (
           <MenuItem
             isActive={component === currentPage}
             onPress={() => navigate(component)}
             icon={icon}
-            key={label}
-            label={label}
+            key={labelKey}
+            label={t(labelKey)}
           />
         )
       })}

components/pages.js

@@ -1,75 +1,63 @@
 import settingsViews from './settings'
 
-import settingsLabels from '../i18n/en/settings'
-const labels = settingsLabels.menuItems
-
 export const pages = [
   {
     component: 'Home',
     icon: 'home',
-    label: 'Home',
   },
   {
     component: 'Calendar',
     icon: 'calendar',
     isInMenu: true,
-    label: 'Calendar',
+    labelKey: 'calendar',
     parent: 'Home',
   },
   {
     component: 'Chart',
     icon: 'chart',
     isInMenu: true,
-    label: 'Chart',
+    labelKey: 'chart',
     parent: 'Home',
   },
   {
     component: 'Stats',
     icon: 'statistics',
     isInMenu: true,
-    label: 'Stats',
+    labelKey: 'stats',
     parent: 'Home',
   },
   {
     children: Object.keys(settingsViews),
     component: 'SettingsMenu',
     icon: 'settings',
-    label: 'Settings',
     parent: 'Home',
   },
   {
     component: 'Reminders',
-    label: labels.reminders.name,
     parent: 'SettingsMenu',
   },
   {
     component: 'NfpSettings',
-    label: labels.nfpSettings.name,
     parent: 'SettingsMenu',
   },
   {
     component: 'DataManagement',
-    label: labels.dataManagement.name,
     parent: 'SettingsMenu',
   },
   {
     component: 'Password',
-    label: labels.password.name,
     parent: 'SettingsMenu',
   },
   {
     component: 'About',
-    label: 'About',
     parent: 'SettingsMenu',
   },
   {
     component: 'License',
-    label: 'License',
     parent: 'SettingsMenu',
   },
   {
     component: 'PrivacyPolicy',
-    label: 'PrivacyPolicy',
     parent: 'SettingsMenu',
   },
   {

i18n/en.json

@@ -1,4 +1,9 @@
 {
+  "bottomMenu": {
+    "calendar": "Calendar",
+    "chart": "Chart",
+    "stats": "Stats"
+  },
   "cycleDay": {
     "symptomBox": {
       "bleeding": "Bleeding",

i18n/en/settings.js

@@ -1,24 +1,6 @@
 import links from './links'
 
 export default {
-  menuItems: {
-    reminders: {
-      name: 'Reminders',
-      text: 'turn on/off reminders',
-    },
-    nfpSettings: {
-      name: 'NFP settings',
-      text: 'define how you want to use NFP',
-    },
-    dataManagement: {
-      name: 'Data',
-      text: 'import, export or delete your data',
-    },
-    password: {
-      name: 'Password',
-      text: '',
-    },
-  },
   export: {
     errors: {
       noData: 'There is no data to export',