Chore: add translations to stats

components/stats/StatsOverview.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 
-import AppText from './app-text'
+import AppText from '../common/app-text'
 
 import { Sizes, Spacing, Typography } from '../../styles'
 

components/stats/StatsTable.js

@@ -3,7 +3,7 @@ import { FlatList, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 
-import AppText from './app-text'
+import AppText from '../common/app-text'
 
 import cycleModule from '../../lib/cycle'
 import { Spacing, Typography, Colors } from '../../styles'

components/stats/index.js

@@ -1,39 +1,45 @@
 import React from 'react'
 import { ImageBackground, View } from 'react-native'
 import { ScaledSheet } from 'react-native-size-matters'
+import { useTranslation } from 'react-i18next'
 
-import AppText from './common/app-text'
-import StatsOverview from './common/StatsOverview'
-import StatsTable from './common/StatsTable'
+import AppText from '../common/app-text'
+import StatsOverview from './StatsOverview'
+import StatsTable from './StatsTable'
 
-import cycleModule from '../lib/cycle'
-import { getCycleLengthStats as getCycleInfo } from '../lib/cycle-length'
-import { stats as labels } from '../i18n/en/labels'
+import cycleModule from '../../lib/cycle'
+import { getCycleLengthStats as getCycleInfo } from '../../lib/cycle-length'
 
-import { Containers, Sizes, Spacing, Typography } from '../styles'
+import { Containers, Sizes, Spacing, Typography } from '../../styles'
 
-const image = require('../assets/cycle-icon.png')
+const image = require('../../assets/cycle-icon.png')
 
 const Stats = () => {
+  const { t } = useTranslation(null, { keyPrefix: 'stats' })
+
   const cycleLengths = cycleModule().getAllCycleLengths()
   const numberOfCycles = cycleLengths.length
-  const hasAtLeastOneCycle = numberOfCycles >= 1
-  const cycleData = hasAtLeastOneCycle
-    ? getCycleInfo(cycleLengths)
-    : { minimum: '—', maximum: '—', stdDeviation: '—' }
+  const cycleData =
+    numberOfCycles > 0
+      ? getCycleInfo(cycleLengths)
+      : { minimum: '—', maximum: '—', stdDeviation: '—' }
+  const standardDeviation = cycleData.stdDeviation
+    ? cycleData.stdDeviation
+    : '—'
   const statsData = [
-    [cycleData.minimum, labels.minLabel],
-    [cycleData.maximum, labels.maxLabel],
-    [cycleData.stdDeviation ? cycleData.stdDeviation : '—', labels.stdLabel],
-    [numberOfCycles, labels.basisOfStatsEnd],
+    [cycleData.minimum, t('overview.min')],
+    [cycleData.maximum, t('overview.max')],
+    [standardDeviation, t('overview.standardDeviation')],
+    [numberOfCycles, t('overview.completedCycles')],
   ]
 
   return (
     <View style={styles.pageContainer}>
       <View style={styles.overviewContainer}>
-        <AppText>{labels.cycleLengthExplainer}</AppText>
-        {!hasAtLeastOneCycle && <AppText>{labels.emptyStats}</AppText>}
-        {hasAtLeastOneCycle && (
+        <AppText>{t('intro')}</AppText>
+        {numberOfCycles === 0 ? (
+          <AppText>{t('noData')}</AppText>
+        ) : (
           <View style={styles.container}>
             <View style={styles.columnLeft}>
               <ImageBackground
@@ -49,11 +55,11 @@ const Stats = () => {
                   {cycleData.mean}
                 </AppText>
                 <AppText style={styles.accentPurpleHuge}>
-                  {labels.daysLabel}
+                  {t('overview.days')}
                 </AppText>
               </ImageBackground>
               <AppText style={styles.accentOrange}>
-                {labels.averageLabel}
+                {t('overview.average')}
               </AppText>
             </View>
             <View style={styles.columnRight}>