621 Use translation library for data export

.gitlab/dependabot.yml

@@ -14,4 +14,3 @@ updates:
       - dependency-name: 'react'
       - dependency-name: 'react-native'
       - dependency-name: 'react-native-push-notifications'
-      - dependency-name: '@babel/core'

README.md

@@ -201,3 +201,7 @@ More information about how the app calculates fertility status and bleeding pred
         react-native link
 
 5.  You should be able to use the icon now within drip, e.g. in Cycle Day Overview and on the chart.
+
+## Translation
+
+We are using [Weblate](https://weblate.org/) as translation software.

components/chart/chart.js

@@ -9,7 +9,7 @@ import HorizontalGrid from './horizontal-grid'
 import MainGrid from './main-grid'
 import NoData from './no-data'
 import NoTemperature from './no-temperature'
-import Tutorial from './Tutorial'
+import Tutorial from './tutorial'
 import YAxis from './y-axis'
 
 import { getCycleDaysSortedByDate } from '../../db'

components/chart/tutorial.js

@@ -6,17 +6,16 @@ import AppText from '../common/app-text'
 import CloseIcon from '../common/close-icon'
 
 import { Containers, Spacing } from '../../styles'
-import { useTranslation } from 'react-i18next'
+import { chart } from '../../i18n/en/labels'
 
 const image = require('../../assets/swipe.png')
 
 const Tutorial = ({ onClose }) => {
-  const { t } = useTranslation()
   return (
     <View style={styles.container}>
       <Image resizeMode="contain" source={image} style={styles.image} />
       <View style={styles.textContainer}>
-        <AppText>{t('chart.tutorial')}</AppText>
+        <AppText>{chart.tutorial}</AppText>
       </View>
       <CloseIcon onClose={onClose} />
     </View>

components/menu/index.js

@@ -6,23 +6,20 @@ 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, labelKey, component }) => {
+      {menuItems.map(({ icon, label, component }) => {
         return (
           <MenuItem
             isActive={component === currentPage}
             onPress={() => navigate(component)}
             icon={icon}
-            key={labelKey}
-            label={t(labelKey)}
+            key={label}
+            label={label}
           />
         )
       })}

components/pages.js

@@ -1,63 +1,75 @@
 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,
-    labelKey: 'calendar',
+    label: 'Calendar',
     parent: 'Home',
   },
   {
     component: 'Chart',
     icon: 'chart',
     isInMenu: true,
-    labelKey: 'chart',
+    label: 'Chart',
     parent: 'Home',
   },
   {
     component: 'Stats',
     icon: 'statistics',
     isInMenu: true,
-    labelKey: 'stats',
+    label: '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',
   },
   {

components/settings/data-management/DataManagement.js

@@ -3,34 +3,26 @@ import React, { useState } from 'react'
 import AppLoadingView from '../../common/app-loading'
 import AppPage from '../../common/app-page'
 import AppText from '../../common/app-text'
-import Button from '../../common/button'
 import Segment from '../../common/segment'
 
-import openShareDialogAndExport from './export-dialog'
 import DeleteData from './delete-data'
 
 import labels from '../../../i18n/en/settings'
 import ImportData from './ImportData'
+import ExportData from './ExportData'
 
 const DataManagement = () => {
   const [isLoading, setIsLoading] = useState(false)
   const [isDeletingData, setIsDeletingData] = useState(false)
 
-  const startExport = () => {
-    setIsDeletingData(false)
-    openShareDialogAndExport()
-  }
-
   if (isLoading) return <AppLoadingView />
 
   return (
     <AppPage>
-      <Segment title={labels.export.button}>
-        <AppText>{labels.export.segmentExplainer}</AppText>
-        <Button isCTA onPress={startExport}>
-          {labels.export.button}
-        </Button>
-      </Segment>
+      <ExportData
+        resetIsDeletingData={() => setIsDeletingData(false)}
+        setIsLoading={setIsLoading}
+      />
       <ImportData
         resetIsDeletingData={() => setIsDeletingData(false)}
         setIsLoading={setIsLoading}

components/settings/data-management/ExportData.js

@@ -0,0 +1,77 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { getCycleDaysSortedByDate, mapRealmObjToJsObj } from '../../../db'
+import getDataAsCsvDataUri from '../../../lib/import-export/export-to-csv'
+import alertError from '../common/alert-error'
+import { EXPORT_FILE_NAME } from './constants'
+import RNFS from 'react-native-fs'
+import { useTranslation } from 'react-i18next'
+
+import AppText from '../../common/app-text'
+import Button from '../../common/button'
+import Segment from '../../common/segment'
+import Share from 'react-native-share'
+
+export default function ExportData({ setIsLoading, resetIsDeletingData }) {
+  const { t } = useTranslation(null, {
+    keyPrefix: 'hamburgerMenu.settings.data.export',
+  })
+
+  async function startExport() {
+    resetIsDeletingData()
+    setIsLoading(true)
+    await exportData()
+    setIsLoading(false)
+  }
+
+  async function getData() {
+    const cycleDaysByDate = mapRealmObjToJsObj(getCycleDaysSortedByDate())
+
+    try {
+      return cycleDaysByDate.length
+        ? getDataAsCsvDataUri(cycleDaysByDate)
+        : null
+    } catch (err) {
+      alertError(t('error.convert'))
+      return null
+    }
+  }
+
+  async function exportData() {
+    const data = await getData()
+    if (!data) {
+      alertError(t('error.data'))
+      return
+    }
+
+    try {
+      const path = `${RNFS.DocumentDirectoryPath}/${EXPORT_FILE_NAME}`
+      await RNFS.writeFile(path, data)
+
+      await Share.open({
+        title: t('title'),
+        url: `file://${path}`,
+        subject: t('title'),
+        type: 'text/csv',
+        showAppsToView: true,
+        failOnCancel: false,
+      })
+    } catch (err) {
+      return alertError(t('error.share'))
+    }
+  }
+
+  return (
+    <Segment title={t('button')}>
+      <AppText>{t('text')}</AppText>
+      <Button isCTA onPress={startExport}>
+        {t('button')}
+      </Button>
+    </Segment>
+  )
+}
+
+ExportData.propTypes = {
+  resetIsDeletingData: PropTypes.func.isRequired,
+  setIsLoading: PropTypes.func.isRequired,
+}

components/settings/data-management/ImportData.js

@@ -41,7 +41,7 @@ export default function ImportData({ resetIsDeletingData, setIsLoading }) {
       const fileContent = await rnfs.readFile(fileInfo.uri, 'utf8')
       return fileContent
     } catch (err) {
-      return showImportErrorAlert(t('error.couldNotOpenFile'))
+      return showImportErrorAlert(t('errors.couldNotOpenFile'))
     }
   }
 
@@ -77,7 +77,7 @@ export default function ImportData({ resetIsDeletingData, setIsLoading }) {
   }
 
   function showImportErrorAlert(message) {
-    const errorMessage = t('error.noDataImported', { message })
+    const errorMessage = t('errors.noDataImported', { message })
     alertError(errorMessage)
   }
 

components/settings/data-management/export-dialog.js

@@ -1,43 +0,0 @@
-import Share from 'react-native-share'
-
-import { getCycleDaysSortedByDate, mapRealmObjToJsObj } from '../../../db'
-import getDataAsCsvDataUri from '../../../lib/import-export/export-to-csv'
-import alertError from '../common/alert-error'
-import settings from '../../../i18n/en/settings'
-import { EXPORT_FILE_NAME } from './constants'
-import RNFS from 'react-native-fs'
-
-export default async function exportData() {
-  let data
-  const labels = settings.export
-  const cycleDaysByDate = mapRealmObjToJsObj(getCycleDaysSortedByDate())
-
-  if (!cycleDaysByDate.length) return alertError(labels.errors.noData)
-
-  try {
-    data = getDataAsCsvDataUri(cycleDaysByDate)
-    if (!data) {
-      return alertError(labels.errors.noData)
-    }
-  } catch (err) {
-    console.error(err)
-    return alertError(labels.errors.couldNotConvert)
-  }
-
-  try {
-    const path = `${RNFS.DocumentDirectoryPath}/${EXPORT_FILE_NAME}`
-    await RNFS.writeFile(path, data)
-
-    await Share.open({
-      title: labels.title,
-      url: `file://${path}`,
-      subject: labels.subject,
-      type: 'text/csv',
-      showAppsToView: true,
-      failOnCancel: false,
-    })
-  } catch (err) {
-    console.error(err)
-    return alertError(labels.errors.problemSharing)
-  }
-}

i18n/en.json

@@ -1,12 +1,4 @@
 {
-  "bottomMenu": {
-    "calendar": "Calendar",
-    "chart": "Chart",
-    "stats": "Stats"
-  },
-  "chart": {
-    "tutorial": "You can swipe the chart to view more dates."
-  },
   "cycleDay": {
     "symptomBox": {
       "bleeding": "Bleeding",
@@ -89,6 +81,16 @@
     },
     "settings": {
       "data": {
+        "export": {
+          "button": "Export data",
+          "error": {
+            "convert": "Could not convert data to CSV",
+            "data": "There is no data to export",
+            "share": "There was a problem sharing the data export file"
+          },
+          "text": "Export data in CSV format for backup or so you can use it elsewhere",
+          "title": "My drip. data export"
+        },
         "import": {
           "button": "Import data",
           "dialog": {
@@ -98,10 +100,9 @@
             "replace": "Import and replace",
             "title": "Keep existing data?"
           },
-          "error": {
+          "errors": {
             "couldNotOpenFile": "Could not open file",
             "futureEdit": "Future dates may only contain a note, no other symptoms",
-            "incorrectColumns": "Expected CSV column titles to be {{incorrectColumns}}",
             "noDataImported": "{{message}}\n\nNo data was imported or changed"
           },
           "segmentExplainer": "Import data in CSV format",

i18n/en/labels.js

@@ -3,6 +3,10 @@ export const home = {
   phase: (n) => `${['1st', '2nd', '3rd'][n - 1]} cycle phase`,
 }
 
+export const chart = {
+  tutorial: 'You can swipe the chart to view more dates.',
+}
+
 export const shared = {
   cancel: 'Cancel',
   save: 'Save',

i18n/en/settings.js

@@ -1,17 +1,23 @@
 import links from './links'
 
 export default {
-  export: {
-    errors: {
-      noData: 'There is no data to export',
-      couldNotConvert: 'Could not convert data to CSV',
-      problemSharing: 'There was a problem sharing the data export file',
+  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: '',
     },
-    title: 'My drip. data export',
-    subject: 'My drip. data export',
-    button: 'Export data',
-    segmentExplainer:
-      'Export data in CSV format for backup or so you can use it elsewhere',
   },
   deleteSegment: {
     title: 'Delete app data',

i18n/i18n.js

@@ -17,6 +17,7 @@ i18n
     compatibilityJSON: 'v3', // TODO: migrate json to v4 and afterwards remove it
     resources,
     fallbackLng: 'en',
+    debug: true,
 
     interpolation: {
       escapeValue: false, // not needed for react as it escapes by default

jest.config.js

@@ -5,8 +5,4 @@ module.exports = {
   transformIgnorePatterns: [
     'node_modules/(?!((jest-)?react-native(-.*)?|@react-native(-community)?)/)',
   ],
-  watchPlugins: [
-    'jest-watch-typeahead/filename',
-    'jest-watch-typeahead/testname',
-  ],
 }

lib/import-export/import-from-csv.js

@@ -8,7 +8,7 @@ import {
 import getColumnNamesForCsv from './get-csv-column-names'
 import replaceWithNullIfAllPropertiesAreNull from './replace-with-null'
 import { LocalDate } from '@js-joda/core'
-import i18next from 'i18next'
+import labels from '../../i18n/en/settings'
 
 export default async function importCsv(csv, deleteFirst) {
   const parseFuncs = {
@@ -46,10 +46,7 @@ export default async function importCsv(csv, deleteFirst) {
 
   const cycleDays = await csvParser(config)
     .fromString(csv)
-    .on('header', (headers) => validateHeaders(headers))
-    .on('error', (error) => {
-      throw error
-    })
+    .on('header', validateHeaders)
 
   //remove symptoms where all fields are null
   putNullForEmptySymptoms(cycleDays)
@@ -70,11 +67,8 @@ function validateHeaders(headers) {
       return expectedHeaders.indexOf(header) > -1
     })
   ) {
-    throw new Error(
-      i18next.t('hamburgerMenu.settings.data.import.error.incorrectColumns', {
-        incorrectColumns: expectedHeaders.join(),
-      })
-    )
+    const msg = `Expected CSV column titles to be ${expectedHeaders.join()}`
+    throw new Error(msg)
   }
 }
 
@@ -98,9 +92,7 @@ function throwIfFutureData(cycleDays) {
       day.date > today &&
       Object.keys(day).some((symptom) => symptom != 'date' && symptom != 'note')
     ) {
-      throw new Error(
-        i18next.t('hamburgerMenu.settings.data.import.error.futureEdit')
-      )
+      throw new Error(labels.import.errors.futureEdit)
     }
   }
 }

lib/nfp-mucus.js

@@ -1,16 +1,17 @@
-export default function getSensiplanMucus(feeling, texture) {
+export default function (feeling, texture) {
+
   if (typeof feeling != 'number' || typeof texture != 'number') return null
 
   const feelingMapping = {
     0: 0,
     1: 1,
     2: 2,
-    3: 4,
+    3: 4
   }
   const textureMapping = {
     0: 0,
     1: 3,
-    2: 4,
+    2: 4
   }
   const nfpFeelingValue = feelingMapping[feeling]
   const nfpTextureValue = textureMapping[texture]

package.json

@@ -29,21 +29,21 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@js-joda/core": "^5.5.3",
+    "@js-joda/core": "^5.3.0",
     "@ptomasroos/react-native-multi-slider": "^2.2.0",
     "@react-native-async-storage/async-storage": "^1.17.9",
     "@react-native-community/art": "^1.2.0",
     "@react-native-community/datetimepicker": "^6.3.1",
     "@react-native-community/push-notification-ios": "^1.8.0",
     "csvtojson": "^2.0.8",
-    "i18next": "^22.0.2",
+    "i18next": "^21.9.0",
     "jshashes": "^1.0.8",
     "moment": "^2.29.4",
     "object-path": "^0.11.4",
     "obv": "0.0.1",
     "prop-types": "^15.8.1",
     "react": "17.0.2",
-    "react-i18next": "^12.0.0",
+    "react-i18next": "^11.18.3",
     "react-native": "0.67.4",
     "react-native-calendars": "^1.1287.0",
     "react-native-document-picker": "^8.1.1",
@@ -58,18 +58,17 @@
     "sympto": "3.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.12.9",
     "@babel/eslint-parser": "^7.19.1",
-    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-react": "^7.16.0",
     "@babel/runtime": "^7.12.5",
     "@testing-library/jest-native": "^4.0.12",
     "@testing-library/react-native": "^11.1.0",
     "basic-changelog": "gitlab:bloodyhealth/basic-changelog",
-    "eslint": "^7.32.0",
-    "eslint-plugin-react": "^7.31.10",
+    "eslint": "7.14.0",
+    "eslint-plugin-react": "^7.8.2",
     "husky": "^8.0.0",
-    "jest": "^29.1.2",
-    "jest-watch-typeahead": "^2.2.0",
+    "jest": "^28.1.3",
     "jetifier": "^1.6.6",
     "metro-react-native-babel-preset": "^0.66.2",
     "prettier": "2.4.0",

test/AcceptLicense.spec.js

@@ -1,19 +1,27 @@
 import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react-native'
 import AcceptLicense from '../components/AcceptLicense'
 
 import { saveLicenseFlag } from '../local-storage'
-import { render, screen, fireEvent } from './test-utils'
 
 jest.mock('../local-storage', () => ({
   saveLicenseFlag: jest.fn(() => Promise.resolve()),
 }))
 
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (str, options) => {
+      return str + (options ? JSON.stringify(options) : '')
+    },
+  }),
+}))
+
 describe('AcceptLicense', () => {
-  test('should accept license when clicking ok button', async () => {
+  test('On clicking OK button, the license is accepted', async () => {
     const mockedSetLicense = jest.fn()
     render(<AcceptLicense setLicense={mockedSetLicense} />)
 
-    const okButton = screen.getByText('OK')
+    const okButton = screen.getByText('ok', { exact: false })
 
     fireEvent(okButton, 'click')
 
@@ -21,9 +29,9 @@ describe('AcceptLicense', () => {
     expect(mockedSetLicense).toHaveBeenCalled()
   })
 
-  test('should render cancel button', async () => {
+  test('There is a Cancel button', async () => {
     render(<AcceptLicense setLicense={jest.fn()} />)
 
-    screen.getByText('Cancel')
+    screen.getByText('cancel', { exact: false })
   })
 })

test/License.spec.js

@@ -1,16 +1,24 @@
 import React from 'react'
+import { render, screen } from '@testing-library/react-native'
 import License from '../components/settings/License'
-import { render, screen } from './test-utils'
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (str, options) => {
+      return str + (options ? JSON.stringify(options) : '')
+    },
+  }),
+}))
 
 describe('License screen', () => {
-  test('should display license text with correct year', async () => {
+  test('It should have a correct year', async () => {
     render(<License />)
     const year = new Date().getFullYear().toString()
 
     screen.getByText(year, { exact: false })
   })
 
-  test('should match the snapshot', async () => {
+  test('It should match the snapshot', async () => {
     const licenseScreen = render(<License />)
 
     expect(licenseScreen).toMatchSnapshot()

test/__snapshots__/License.spec.js.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`License screen should match the snapshot 1`] = `
+exports[`License screen It should match the snapshot 1`] = `
 <View
   style={
-    {
+    Object {
       "backgroundColor": "#E9F2ED",
       "flex": 1,
     }
@@ -11,8 +11,8 @@ exports[`License screen should match the snapshot 1`] = `
 >
   <RCTScrollView
     contentContainerStyle={
-      [
-        {
+      Array [
+        Object {
           "backgroundColor": "#E9F2ED",
           "flexGrow": 1,
         },
@@ -23,13 +23,13 @@ exports[`License screen should match the snapshot 1`] = `
     <View>
       <Text
         style={
-          [
-            {
+          Array [
+            Object {
               "color": "#555",
               "fontFamily": "Jost-Book",
               "fontSize": 34.285714285714285,
             },
-            {
+            Object {
               "alignSelf": "center",
               "color": "#3A2671",
               "fontFamily": "Jost-Bold",
@@ -41,11 +41,11 @@ exports[`License screen should match the snapshot 1`] = `
           ]
         }
       >
-        drip. an open-source cycle tracking app
+        title
       </Text>
       <View
         style={
-          {
+          Object {
             "marginBottom": 34.285714285714285,
             "marginHorizontal": 34.285714285714285,
           }
@@ -53,8 +53,8 @@ exports[`License screen should match the snapshot 1`] = `
       >
         <Text
           style={
-            [
-              {
+            Array [
+              Object {
                 "color": "#555",
                 "fontFamily": "Jost-Book",
                 "fontSize": 34.285714285714285,
@@ -63,14 +63,12 @@ exports[`License screen should match the snapshot 1`] = `
             ]
           }
         >
-          Copyright (C) 2023 Heart of Code e.V.
-
-This 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:
+          text{"currentYear":2022}
         </Text>
         <Text
           onPress={[Function]}
           style={
-            {
+            Object {
               "color": "#3A2671",
               "fontFamily": "Jost-Book",
               "fontSize": 34.285714285714285,

test/components/common/__snapshots__/Footnote.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`Footnote component when children are present, renders them 1`] = `
 <View
   style={
-    {
+    Object {
       "alignContent": "flex-start",
       "flexDirection": "row",
       "marginBottom": 8.571428571428571,
@@ -13,13 +13,13 @@ exports[`Footnote component when children are present, renders them 1`] = `
 >
   <Text
     style={
-      [
-        {
+      Array [
+        Object {
           "color": "#555",
           "fontFamily": "Jost-Book",
           "fontSize": 34.285714285714285,
         },
-        {
+        Object {
           "color": "#F38337",
         },
       ]
@@ -29,18 +29,18 @@ exports[`Footnote component when children are present, renders them 1`] = `
   </Text>
   <Text
     linkStyle={
-      {
+      Object {
         "color": "white",
       }
     }
     style={
-      [
-        {
+      Array [
+        Object {
           "color": "#555",
           "fontFamily": "Jost-Book",
           "fontSize": 34.285714285714285,
         },
-        {
+        Object {
           "color": "#555",
           "paddingLeft": 21.428571428571427,
         },

test/test-utils.js

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react-native'
-import '../i18n/i18n'
-
-const customRender = (ui, options) => render(ui, { ...options })
-
-// re-export everything
-export * from '@testing-library/react-native'
-
-// override render method
-export { customRender as render }