From b7d97f0589e9b108af1e651d396f67844efa947e Mon Sep 17 00:00:00 2001 From: Lisa Date: Tue, 27 Sep 2022 16:24:40 +0000 Subject: [PATCH] 614 Use translation library for settings menu --- components/cycle-day/symptom-box.js | 6 ++-- components/header/hamburger-menu.js | 45 ++++++++++++++------------- components/header/menu-item.js | 35 --------------------- components/settings/About.js | 2 +- components/settings/License.js | 2 +- components/settings/menu-item.js | 12 ++++--- components/settings/privacy-policy.js | 4 ++- components/settings/settings-menu.js | 20 ++++++------ i18n/en.json | 29 ++++++++++++++++- i18n/en/settings.js | 5 --- 10 files changed, 77 insertions(+), 83 deletions(-) delete mode 100644 components/header/menu-item.js diff --git a/components/cycle-day/symptom-box.js b/components/cycle-day/symptom-box.js index 79b0704..f9fcd0c 100644 --- a/components/cycle-day/symptom-box.js +++ b/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} /> - - {t(`cycleDay.symptomBox.${symptom}`)} - + {t(symptom)} {symptomDataToDisplay && ( {symptomDataToDisplay} diff --git a/components/header/hamburger-menu.js b/components/header/hamburger-menu.js index de97cfb..5bd74db 100644 --- a/components/header/hamburger-menu.js +++ b/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 ( setIsOpen(true)} hitSlop={HIT_SLOP}> @@ -36,23 +36,25 @@ const HamburgerMenu = ({ navigate }) => { ) + function onPress(componentName) { + closeMenu() + navigate(componentName) + } + return ( - - + + - {settingsMenuItems.map((item) => ( - + {settingsMenuItems.map(({ labelKey, componentName }) => ( + onPress(componentName)} + key={labelKey} + > + {t(labelKey)} + ))} @@ -84,4 +86,5 @@ const styles = StyleSheet.create({ position: 'absolute', width: '60%', }, + menuItem: Typography.subtitle, }) diff --git a/components/header/menu-item.js b/components/header/menu-item.js deleted file mode 100644 index fa5de23..0000000 --- a/components/header/menu-item.js +++ /dev/null @@ -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 ( - - {name} - - ) -} - -MenuItem.propTypes = { - item: PropTypes.object.isRequired, - navigate: PropTypes.func.isRequired, - closeMenu: PropTypes.func.isRequired, -} - -const styles = StyleSheet.create({ - text: { - ...Typography.subtitle, - }, -}) - -export default MenuItem diff --git a/components/settings/About.js b/components/settings/About.js index 1917edc..0fbdf59 100644 --- a/components/settings/About.js +++ b/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 ( diff --git a/components/settings/License.js b/components/settings/License.js index db5a980..8e47147 100644 --- a/components/settings/License.js +++ b/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 ( diff --git a/components/settings/menu-item.js b/components/settings/menu-item.js index c862375..8c8df7e 100644 --- a/components/settings/menu-item.js +++ b/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 ( navigate(item.component)} + key={item.label} + onPress={() => navigate(item.componentName)} > - {item.name} - {item.text.length > 0 && {item.text}} + {t(`${item.label}.name`)} + {!!item.label && {t(`${item.label}.text`)}} diff --git a/components/settings/privacy-policy.js b/components/settings/privacy-policy.js index c06a4aa..a118a4f 100644 --- a/components/settings/privacy-policy.js +++ b/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 ( diff --git a/components/settings/settings-menu.js b/components/settings/settings-menu.js index cfe1919..fa2a65d 100644 --- a/components/settings/settings-menu.js +++ b/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 ( - - {menu.map((menuItem, i) => { - const last = menu.length === i + 1 + + {menuItems.map((menuItem, i) => { + const last = menuItems.length === i + 1 return ( diff --git a/i18n/en.json b/i18n/en.json index 4b5d424..7102896 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -26,7 +26,7 @@ "ok": "OK" } }, - "settings": { + "hamburgerMenu": { "about": { "credits": { "title": "Credits", @@ -54,6 +54,12 @@ "title": "drip. an open-source cycle tracking app", "text": "Copyright (C) {{currentYear}} Heart of Code e.V.\n\nThis program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details:" }, + "menuMain": { + "about": "About", + "license": "License", + "settings": "Settings", + "privacyPolicy": "Privacy Policy" + }, "privacyPolicy": { "title": "Privacy Policy", "intro": { @@ -72,6 +78,27 @@ "title": "Transparency", "text": "You can read through the source code of drip. to ensure the given information is correct. The source code is like a recipe: It tells you how much and what kind of ingredients you need and how you prepare them to cook a tasty meal or program a funky app.\n\nBuon appetito!" } + }, + "settings": { + "menuItem": { + "dataManagement": { + "name": "Data", + "text": "import, export or delete your data" + }, + "nfpSettings": { + "name": "NFP settings", + "text": "define how you want to use NFP" + }, + "password": { + "name": "Password", + "text": "" + }, + "reminders": { + "name": "Reminders", + "text": "turn on/off reminders" + } + }, + "title": "Settings" } }, "stats": { diff --git a/i18n/en/settings.js b/i18n/en/settings.js index ca32138..bb5117c 100644 --- a/i18n/en/settings.js +++ b/i18n/en/settings.js @@ -1,7 +1,6 @@ import links from './links' export default { - title: 'Settings', menuItems: { reminders: { name: 'Reminders', @@ -19,10 +18,6 @@ export default { name: 'Password', text: '', }, - about: 'About', - license: 'License', - settings: 'Settings', - privacyPolicy: 'Privacy Policy', }, export: { errors: {