611 Use translation library in about section

components/settings/about.js

@@ -7,14 +7,15 @@ import Segment from '../common/segment'
 import Button from '../common/button'
 import ButtonRow from '../common/button-row'
 
-import labels from '../../i18n/en/settings'
 import links from '../../i18n/en/links'
+import { useTranslation } from 'react-i18next'
 
 const AboutSection = () => {
+  const { t } = useTranslation()
   return (
-    <AppPage title={labels.aboutSection.title}>
+    <AppPage title={t('settings.aboutSection.title')}>
       <Segment>
-        <AppText>{labels.aboutSection.text}</AppText>
+        <AppText>{t('settings.aboutSection.text')}</AppText>
         <ButtonRow>
           {[links.email, links.gitlab, links.website].map((link) => (
             <Button
@@ -28,25 +29,33 @@ const AboutSection = () => {
           ))}
         </ButtonRow>
       </Segment>
-      <Segment title={labels.philosophy.title}>
+      <Segment title={t('settings.philosophy.title')}>
-        <AppText>{labels.philosophy.text}</AppText>
+        <AppText>{t('settings.philosophy.text')}</AppText>
       </Segment>
-      <Segment title={labels.credits.title}>
+      <Segment title={t('settings.credits.title')}>
-        <AppText>{labels.credits.note}</AppText>
+        <AppText>
+          {t('settings.credits.note', {
+            smashicons: links.smashicons.url,
+            pause08: links.pause08.url,
+            kazachek: links.kazachek.url,
+            freepik: links.freepik.url,
+            flaticon: links.flaticon.url,
+          })}
+        </AppText>
       </Segment>
-      <Segment title={labels.donate.title}>
+      <Segment title={t('settings.donate.title')}>
-        <AppText>{labels.donate.note}</AppText>
+        <AppText>{t('settings.donate.note')}</AppText>
         {Platform.OS !== 'ios' && (
           <Button
             isCTA
             isSmall
             onPress={() => Linking.openURL(links.donate.url)}
           >
-            {links.donate.text}
+            {t('settings.donate.text')}
           </Button>
         )}
       </Segment>
-      <Segment title={labels.version.title} last>
+      <Segment title={t('settings.version.title')} last>
         <AppText>{require('../../package.json').version}</AppText>
       </Segment>
     </AppPage>

i18n/en.json

@@ -14,10 +14,27 @@
     }
   },
   "settings": {
+    "aboutSection": {
+      "title": "About",
+      "text": "Please note that your data is stored locally on your phone and not on a server. This means your data cannot be read by anyone else unless they have access to your phone. We want to ensure that you stay in control of your own data. If you are planning to switch or reset your phone, please remember to export your data before doing so. You can reinstall the app afterwards and import your data.\n\nIf you encounter any technical issues, don't hesitate to contact us via email. You can also contribute to the code base on Gitlab and visit our website."
+    },
+    "credits": {
+      "title": "Credits",
+      "note": "We love the drip. team. Thanks and lots of <3 to all of our condriputors. Thanks to Paula Härtel for the symptom tracking icons. All the other icons are made by {{smashicons}}, {{pause08}}, {{kazachek}} & {{freepik}} from {{flaticon}}."
+    },
+    "donate": {
+      "title": "Support us",
+      "note": "The drips are developing this app on a volunteer basis. We are always grateful for support. This could mean condriputing to the code, giving feedback, suggesting improvements or features, testing or donating. It helps and motivates us maintaining this app and developing new features. Thank you for your support!",
+      "text": "Donate here"
+    },
     "license": {
       "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: https://www.gnu.org/licenses/gpl-3.0.html."
     },
+    "philosophy": {
+      "title": "Remember to think for yourself",
+      "text": "drip. makes period predictions for you and helps you apply NFP fertility awareness rules. But please remember that this app is made by humans, and humans make mistakes. Always think for yourself: \"Does this make sense?\" Remember, you don't need an app to understand your cycle! However, drip. wants to support you and make period tracking easier, more transparent and secure."
+    },
     "privacyPolicy": {
       "title": "Privacy Policy",
       "intro": {
@@ -36,6 +53,9 @@
         "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!"
       }
+    },
+    "version": {
+      "title": "Version"
     }
   }
 }

i18n/en/settings.js

@@ -135,17 +135,6 @@ Making any changes to your password setting will keep your data as it was before
       ios: 'After the password is updated the app will automatically close. Please reopen it manually.',
     },
   },
-  aboutSection: {
-    title: 'About',
-    text: `Please note that your data is stored locally on your phone and not on a server. This means your data cannot be read by anyone else unless they have access to your phone. We want to ensure that you stay in control of your own data. If you are planning to switch or reset your phone, please remember to export your data before doing so. You can reinstall the app afterwards and import your data.\n\nIf you encounter any technical issues, don't hesitate to contact us via email. You can also contribute to the code base on Gitlab and visit our website.`,
-  },
-  philosophy: {
-    title: 'Remember to think for yourself',
-    text: `drip. makes period predictions for you and helps you apply NFP fertility awareness rules. But please remember that this app is made by humans, and humans make mistakes. Always think for yourself: "Does this make sense?" Remember, you don't need an app to understand your cycle! However, drip. wants to support you and make period tracking easier, more transparent and secure.`,
-  },
-  version: {
-    title: 'Version',
-  },
   website: {
     title: 'Website',
   },
@@ -153,12 +142,4 @@ Making any changes to your password setting will keep your data as it was before
     title: 'Infertile days at cycle start',
     note: `drip. applies NFP's rules for calculating infertile days at the start of the cycle (see ${links.wiki.url} for more info). However, drip. does not currently apply the so called 20-day-rule, which determines infertile days at the cycle start from past cycle lengths in case no past symptothermal info is available.`,
   },
-  credits: {
-    title: 'Credits',
-    note: `We love the drip. team. Thanks and lots of <3 to all of our condriputors. Thanks to Paula Härtel for the symptom tracking icons. All the other icons are made by ${links.smashicons.url}, ${links.pause08.url}, ${links.kazachek.url} & ${links.freepik.url} from ${links.flaticon.url}.`,
-  },
-  donate: {
-    title: 'Support us',
-    note: `The drips are developing this app on a volunteer basis. We are always grateful for support. This could mean condriputing to the code, giving feedback, suggesting improvements or features, testing or donating. It helps and motivates us maintaining this app and developing new features. Thank you for your support!`,
-  },
 }