Center temp label in yAxis

.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/app-wrapper.js

@@ -7,7 +7,7 @@ import App from './app'
 import AppLoadingView from './common/app-loading'
 import AppStatusBar from './common/app-status-bar'
 import AcceptLicense from './AcceptLicense'
-import PasswordPrompt from './PasswordPrompt'
+import PasswordPrompt from './password-prompt'
 
 export default function AppWrapper() {
   const [isLoading, setIsLoading] = useState(true)

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/tick.js

@@ -8,13 +8,15 @@ import { Sizes } from '../../styles'
 import { CHART_TICK_WIDTH } from '../../config'
 
 const Tick = ({ yPosition, height, isBold, shouldShowLabel, label }) => {
-  const top = yPosition - height / 2
+  const top = yPosition - height / 2 - 4
   const containerStyle = [styles.container, { flexBasis: height, height, top }]
   const textStyle = isBold ? styles.textBold : styles.textNormal
 
+  if (!shouldShowLabel) return null
+
   return (
     <View style={containerStyle}>
-      <AppText style={textStyle}>{shouldShowLabel && label}</AppText>
+      <AppText style={textStyle}>{label}</AppText>
     </View>
   )
 }
@@ -36,6 +38,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     right: 0,
     width: CHART_TICK_WIDTH,
+    minHeight: Sizes.base + 2,
   },
   textBold: {
     fontSize: Sizes.base,

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/helpers/chart.js

@@ -3,6 +3,7 @@ import { LocalDate } from '@js-joda/core'
 import { scaleObservable, unitObservable } from '../../local-storage'
 import { getCycleStatusForDay } from '../../lib/sympto-adapter'
 import { getCycleDay, getAmountOfCycleDays } from '../../db'
+import { Sizes } from '../../styles'
 
 //YAxis helpers
 
@@ -50,15 +51,19 @@ export function getTickList(columnHeight) {
     const label = tick.toFixed(1)
     let shouldShowLabel
 
-    // when temp range <= 2, units === 0.1 we show temp values with step 0.2
-    // when temp range > 2, units === 0.5 we show temp values with step 0.5
+    // when units === 0.1 and tick height is big enough, we show temp values with step 0.2
+    // when units === 0.5 and tick height is not big enough, we show temp values with step 1
+    // otherwise we show temp values with step 0.5
 
-    if (unit === 0.1) {
-      // show label with step 0.2
-      shouldShowLabel = !((label * 10) % 2)
-    } else {
-      // show label with step 0.5
-      shouldShowLabel = !((label * 10) % 5)
+    switch (true) {
+      case unit === 0.1 && tickHeight > Sizes.base + 2:
+        shouldShowLabel = !((label * 10) % 2)
+        break
+      case unit === 0.5 && tickHeight <= Sizes.base + 2:
+        shouldShowLabel = !((label * 10) % 10)
+        break
+      default:
+        shouldShowLabel = !((label * 10) % 5)
     }
 
     // don't show label, if first or last tick

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/password-prompt.js

@@ -10,34 +10,26 @@ import Header from './header'
 
 import { saveEncryptionFlag } from '../local-storage'
 import { deleteDbAndOpenNew, openDb } from '../db'
+import { passwordPrompt as labels, shared } from '../i18n/en/labels'
 import { Containers, Spacing } from '../styles'
-import { useTranslation } from 'react-i18next'
+
+const cancelButton = { text: shared.cancel, style: 'cancel' }
 
 const PasswordPrompt = ({ enableShowApp }) => {
   const [password, setPassword] = useState(null)
-
-  const { t } = useTranslation(null, { keyPrefix: 'password' })
-
-  const cancelButton = {
-    text: t('forgotPasswordDialog.cancel'),
-    style: 'cancel',
-  }
+  const isPasswordEntered = Boolean(password)
 
   const unlockApp = async () => {
     const hash = new SHA512().hex(password)
     const connected = await openDb(hash)
 
     if (!connected) {
-      Alert.alert(
-        t('incorrectPasswordDialog.incorrectPassword'),
-        t('incorrectPasswordDialog.incorrectPasswordMessage'),
-        [
-          {
-            text: t('incorrectPasswordDialog.tryAgain'),
-            onPress: () => setPassword(null),
-          },
-        ]
-      )
+      Alert.alert(shared.incorrectPassword, shared.incorrectPasswordMessage, [
+        {
+          text: shared.tryAgain,
+          onPress: () => setPassword(null),
+        },
+      ])
       return
     }
     enableShowApp()
@@ -50,22 +42,19 @@ const PasswordPrompt = ({ enableShowApp }) => {
   }
 
   const onDeleteData = () => {
-    Alert.alert(t('confirmationDialog.title'), t('confirmationDialog.text'), [
+    Alert.alert(labels.areYouSureTitle, labels.areYouSure, [
       cancelButton,
       {
-        text: t('confirmationDialog.confirm'),
+        text: labels.reallyDeleteData,
         onPress: onDeleteDataConfirmation,
       },
     ])
   }
 
   const onConfirmDeletion = async () => {
-    Alert.alert(t('forgotPassword'), t('forgotPasswordDialog.text'), [
+    Alert.alert(labels.deleteDatabaseTitle, labels.deleteDatabaseExplainer, [
       cancelButton,
-      {
-        text: t('forgotPasswordDialog.confirm'),
-        onPress: onDeleteData,
-      },
+      { text: labels.deleteData, onPress: onDeleteData },
     ])
   }
 
@@ -76,13 +65,17 @@ const PasswordPrompt = ({ enableShowApp }) => {
         <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={150}>
           <AppTextInput
             onChangeText={setPassword}
-            secureTextEntry
-            placeholder={t('enterPassword')}
+            secureTextEntry={true}
+            placeholder={labels.enterPassword}
           />
           <View style={styles.containerButtons}>
-            <Button onPress={onConfirmDeletion}>{t('forgotPassword')}</Button>
-            <Button disabled={!password} isCTA={!!password} onPress={unlockApp}>
-              {t('unlockApp')}
+            <Button onPress={onConfirmDeletion}>{labels.forgotPassword}</Button>
+            <Button
+              disabled={!isPasswordEntered}
+              isCTA={isPasswordEntered}
+              onPress={unlockApp}
+            >
+              {labels.title}
             </Button>
           </View>
         </KeyboardAvoidingView>

components/settings/data-management/ImportData.js

@@ -1,97 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Alert } from 'react-native'
-import DocumentPicker from 'react-native-document-picker'
-import rnfs from 'react-native-fs'
-import importCsv from '../../../lib/import-export/import-from-csv'
-import alertError from '../common/alert-error'
-import Segment from '../../common/segment'
-import AppText from '../../common/app-text'
-import Button from '../../common/button'
-import { useTranslation } from 'react-i18next'
-
-export default function ImportData({ resetIsDeletingData, setIsLoading }) {
-  const { t } = useTranslation(null, {
-    keyPrefix: 'hamburgerMenu.settings.data.import',
-  })
-
-  async function startImport(shouldDeleteExistingData) {
-    setIsLoading(true)
-    await importData(shouldDeleteExistingData)
-    setIsLoading(false)
-  }
-
-  async function getFileInfo() {
-    try {
-      const fileInfo = await DocumentPicker.pickSingle({
-        type: [DocumentPicker.types.csv, 'text/comma-separated-values'],
-      })
-      return fileInfo
-    } catch (error) {
-      if (DocumentPicker.isCancel(error)) return // User cancelled the picker, exit any dialogs or menus and move on
-      showImportErrorAlert(error)
-    }
-  }
-
-  async function getFileContent() {
-    const fileInfo = await getFileInfo()
-    if (!fileInfo) return null
-
-    try {
-      const fileContent = await rnfs.readFile(fileInfo.uri, 'utf8')
-      return fileContent
-    } catch (err) {
-      return showImportErrorAlert(t('error.couldNotOpenFile'))
-    }
-  }
-
-  async function importData(shouldDeleteExistingData) {
-    const fileContent = await getFileContent()
-    if (!fileContent) return
-
-    try {
-      await importCsv(fileContent, shouldDeleteExistingData)
-      Alert.alert(t('success.title'), t('success.message'))
-    } catch (err) {
-      showImportErrorAlert(err.message)
-    }
-  }
-
-  function openImportDialog() {
-    resetIsDeletingData()
-    Alert.alert(t('dialog.title'), t('dialog.message'), [
-      {
-        text: t('dialog.cancel'),
-        style: 'cancel',
-        onPress: () => {},
-      },
-      {
-        text: t('dialog.replace'),
-        onPress: () => startImport(false),
-      },
-      {
-        text: t('dialog.delete'),
-        onPress: () => startImport(true),
-      },
-    ])
-  }
-
-  function showImportErrorAlert(message) {
-    const errorMessage = t('error.noDataImported', { message })
-    alertError(errorMessage)
-  }
-
-  return (
-    <Segment title={t('button')}>
-      <AppText>{t('segmentExplainer')}</AppText>
-      <Button isCTA onPress={openImportDialog}>
-        {t('button')}
-      </Button>
-    </Segment>
-  )
-}
-
-ImportData.propTypes = {
-  resetIsDeletingData: PropTypes.func.isRequired,
-  setIsLoading: PropTypes.func.isRequired,
-}

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

@@ -0,0 +1,64 @@
+import { Alert } from 'react-native'
+import DocumentPicker from 'react-native-document-picker'
+import rnfs from 'react-native-fs'
+import importCsv from '../../../lib/import-export/import-from-csv'
+import { shared as sharedLabels } from '../../../i18n/en/labels'
+import labels from '../../../i18n/en/settings'
+import alertError from '../common/alert-error'
+
+export function openImportDialog(onImportData) {
+  Alert.alert(labels.import.title, labels.import.message, [
+    {
+      text: sharedLabels.cancel,
+      style: 'cancel',
+      onPress: () => {},
+    },
+    {
+      text: labels.import.replaceOption,
+      onPress: () => onImportData(false),
+    },
+    {
+      text: labels.import.deleteOption,
+      onPress: () => onImportData(true),
+    },
+  ])
+}
+
+export async function getFileContent() {
+  let fileInfo
+  try {
+    fileInfo = await DocumentPicker.pickSingle({
+      type: [DocumentPicker.types.csv, 'text/comma-separated-values'],
+    })
+  } catch (error) {
+    if (DocumentPicker.isCancel(error)) {
+      // User cancelled the picker, exit any dialogs or menus and move on
+      return
+    } else {
+      importError(error)
+    }
+  }
+
+  let fileContent
+  try {
+    fileContent = await rnfs.readFile(fileInfo.uri, 'utf8')
+  } catch (err) {
+    return importError(labels.import.errors.couldNotOpenFile)
+  }
+
+  return fileContent
+}
+
+export async function importData(shouldDeleteExistingData, fileContent) {
+  try {
+    await importCsv(fileContent, shouldDeleteExistingData)
+    Alert.alert(sharedLabels.successTitle, labels.import.success.message)
+  } catch (err) {
+    importError(err.message)
+  }
+}
+
+function importError(msg) {
+  const postFixed = `${msg}\n\n${labels.import.errors.postFix}`
+  alertError(postFixed)
+}

components/settings/data-management/index.js

@@ -6,23 +6,40 @@ import AppText from '../../common/app-text'
 import Button from '../../common/button'
 import Segment from '../../common/segment'
 
+import { openImportDialog, getFileContent, importData } from './import-dialog'
 import openShareDialogAndExport from './export-dialog'
 import DeleteData from './delete-data'
 
 import labels from '../../../i18n/en/settings'
-import ImportData from './ImportData'
+import { ACTION_DELETE, ACTION_EXPORT, ACTION_IMPORT } from '../../../config'
 
 const DataManagement = () => {
   const [isLoading, setIsLoading] = useState(false)
-  const [isDeletingData, setIsDeletingData] = useState(false)
+  const [currentAction, setCurrentAction] = useState(null)
+
+  const startImportFlow = async (shouldDeleteExistingData) => {
+    setIsLoading(true)
+    const fileContent = await getFileContent()
+    if (fileContent) {
+      await importData(shouldDeleteExistingData, fileContent)
+    }
+    setIsLoading(false)
+  }
 
   const startExport = () => {
-    setIsDeletingData(false)
+    setCurrentAction(ACTION_EXPORT)
     openShareDialogAndExport()
   }
 
+  const startImport = () => {
+    setCurrentAction(ACTION_IMPORT)
+    openImportDialog(startImportFlow)
+  }
+
   if (isLoading) return <AppLoadingView />
 
+  const isDeletingData = currentAction === ACTION_DELETE
+
   return (
     <AppPage>
       <Segment title={labels.export.button}>
@@ -31,15 +48,17 @@ const DataManagement = () => {
           {labels.export.button}
         </Button>
       </Segment>
-      <ImportData
-        resetIsDeletingData={() => setIsDeletingData(false)}
-        setIsLoading={setIsLoading}
-      />
+      <Segment title={labels.import.button}>
+        <AppText>{labels.import.segmentExplainer}</AppText>
+        <Button isCTA onPress={startImport}>
+          {labels.import.button}
+        </Button>
+      </Segment>
       <Segment title={labels.deleteSegment.title} last>
         <AppText>{labels.deleteSegment.explainer}</AppText>
         <DeleteData
           isDeletingData={isDeletingData}
-          onStartDeletion={() => setIsDeletingData(true)}
+          onStartDeletion={() => setCurrentAction(ACTION_DELETE)}
         />
       </Segment>
     </AppPage>

components/settings/index.js

@@ -1,6 +1,6 @@
 import Reminders from './reminders/reminders'
 import NfpSettings from './nfp-settings'
-import DataManagement from './data-management/DataManagement'
+import DataManagement from './data-management'
 import Password from './password'
 import About from './About'
 import License from './License'

config.js

@@ -1,6 +1,10 @@
 import { PixelRatio, StatusBar } from 'react-native'
 import { scale, verticalScale } from 'react-native-size-matters'
 
+export const ACTION_DELETE = 'delete'
+export const ACTION_EXPORT = 'export'
+export const ACTION_IMPORT = 'import'
+
 export const SYMPTOMS = [
   'bleeding',
   'temperature',
@@ -36,7 +40,7 @@ export const HIT_SLOP = {
   top: verticalScale(20),
   bottom: verticalScale(20),
   left: scale(20),
-  right: scale(20),
+  right: scale(20)
 }
 
 export const STATUSBAR_HEIGHT = StatusBar.currentHeight

i18n/de.json

@@ -0,0 +1 @@
+{}

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",
@@ -88,29 +80,6 @@
       }
     },
     "settings": {
-      "data": {
-        "import": {
-          "button": "Import data",
-          "dialog": {
-            "cancel": "Cancel",
-            "delete": "Import and delete existing",
-            "message": "There are two options for the import:\n\n1. Keep existing cycle days and replace only the ones in the import file.\n\n2. Delete all existing cycle days and import cycle days from file",
-            "replace": "Import and replace",
-            "title": "Keep existing data?"
-          },
-          "error": {
-            "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",
-          "success": {
-            "message": "Data successfully imported",
-            "title": "Success"
-          }
-        }
-      },
       "menuItem": {
         "dataManagement": {
           "name": "Data",
@@ -132,26 +101,6 @@
       "title": "Settings"
     }
   },
-  "password": {
-    "confirmationDialog": {
-      "confirm": "Yes, I am sure",
-      "text": "Are you absolutely sure you want to permanently delete all your data?",
-      "title": "Are you sure?"
-    },
-    "enterPassword": "Enter password here",
-    "forgotPassword": "Forgot your password?",
-    "forgotPasswordDialog": {
-      "cancel": "Cancel",
-      "confirm": "Yes, delete all my data",
-      "text": "If you've forgotten your password, unfortunately, there is nothing we can do to recover your data, because it is encrypted with the password only you know. You can, however, delete all your encrypted data and start fresh. Once all data has been erased, you can set a new password in the settings, if you like."
-    },
-    "incorrectPasswordDialog": {
-      "incorrectPassword": "Password incorrect",
-      "incorrectPasswordMessage": "That password is incorrect.",
-      "tryAgain": "Try again"
-    },
-    "unlockApp": "Unlock app"
-  },
   "stats": {
     "noData": "At least one completed cycle is needed to display stats.",
     "intro": "Basic statistics about the length of your cycles.",

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',
@@ -26,6 +30,17 @@ export const shared = {
   learnMore: 'Learn more',
 }
 
+export const stats = {
+  cycleLengthExplainer: 'Basic statistics about the length of your cycles.',
+  emptyStats: 'At least one completed cycle is needed to display stats.',
+  daysLabel: 'days',
+  basisOfStatsEnd: 'completed\ncycles',
+  averageLabel: 'Average cycle',
+  minLabel: `Shortest`,
+  maxLabel: `Longest`,
+  stdLabel: `Standard\ndeviation`,
+}
+
 export const bleedingPrediction = {
   predictionInFuture: (startDays, endDays) =>
     `Your next period is likely to start in ${startDays} to ${endDays} days.`,
@@ -38,6 +53,20 @@ export const bleedingPrediction = {
     `Based on your documented data, your period was likely to start between ${startDate} and ${endDate}.`,
 }
 
+export const passwordPrompt = {
+  title: 'Unlock app',
+  enterPassword: 'Enter password here',
+  deleteDatabaseExplainer:
+    "If you've forgotten your password, unfortunately, there is nothing we can do to recover your data, because it is encrypted with the password only you know. You can, however, delete all your encrypted data and start fresh. Once all data has been erased, you can set a new password in the settings, if you like.",
+  forgotPassword: 'Forgot your password?',
+  deleteDatabaseTitle: 'Forgot your password?',
+  deleteData: 'Yes, delete all my data',
+  areYouSureTitle: 'Are you sure?',
+  areYouSure:
+    'Are you absolutely sure you want to permanently delete all your data?',
+  reallyDeleteData: 'Yes, I am sure',
+}
+
 export const fertilityStatus = {
   fertile: 'fertile',
   infertile: 'infertile',

i18n/en/settings.js

@@ -1,6 +1,24 @@
 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',
@@ -13,6 +31,24 @@ export default {
     segmentExplainer:
       'Export data in CSV format for backup or so you can use it elsewhere',
   },
+  import: {
+    button: 'Import data',
+    title: 'Keep existing data?',
+    message: `There are two options for the import:
+1. Keep existing cycle days and replace only the ones in the import file.
+2. Delete all existing cycle days and import cycle days from file.`,
+    replaceOption: 'Import and replace',
+    deleteOption: 'Import and delete existing',
+    errors: {
+      couldNotOpenFile: 'Could not open file',
+      postFix: 'No data was imported or changed',
+      futureEdit: 'Future dates may only contain a note, no other symptoms',
+    },
+    success: {
+      message: 'Data successfully imported',
+    },
+    segmentExplainer: 'Import data in CSV format',
+  },
   deleteSegment: {
     title: 'Delete app data',
     explainer: 'Delete app data from this phone',

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]

local-storage.js

@@ -12,10 +12,16 @@ export const unitObservable = Observable()
 unitObservable.set(TEMP_SCALE_UNITS)
 scaleObservable((scale) => {
   const scaleRange = scale.max - scale.min
-  if (scaleRange <= 1.5) {
-    unitObservable.set(0.1)
-  } else {
-    unitObservable.set(0.5)
+
+  switch (true) {
+    case scaleRange <= 1:
+      unitObservable.set(0.1)
+      break
+    case scaleRange > 1 && scaleRange <= 2:
+      unitObservable.set(0.2)
+      break
+    default:
+      unitObservable.set(0.5)
   }
 })
 

package.json

@@ -36,14 +36,14 @@
     "@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) 2022 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 }