Add explainer text to stats page and move more stats to modal

components/stats.js

@@ -1,7 +1,11 @@
-import React from 'react'
+import React, { useState } from 'react'
-import { ImageBackground, View } from 'react-native'
+import { ImageBackground, SafeAreaView, ScrollView, View } from 'react-native'
 import { ScaledSheet } from 'react-native-size-matters'
+import { useTranslation } from 'react-i18next'
 
+import Button from './common/button'
+import AppHelp from './common/AppHelp'
+import AppModal from './common/app-modal'
 import AppText from './common/app-text'
 import StatsOverview from './common/StatsOverview'
 import StatsTable from './common/StatsTable'
@@ -15,6 +19,10 @@ import { Containers, Sizes, Spacing, Typography } from '../styles'
 const image = require('../assets/cycle-icon.png')
 
 const Stats = () => {
+  const [isStatsVisible, setIsStatsVisible] = useState(false)
+
+  const { t } = useTranslation(null, { keyPrefix: 'stats' })
+
   const cycleLengths = cycleModule().getAllCycleLengths()
   const numberOfCycles = cycleLengths.length
   const hasAtLeastOneCycle = numberOfCycles >= 1
@@ -22,18 +30,22 @@ const Stats = () => {
     ? getCycleInfo(cycleLengths)
     : { minimum: '—', maximum: '—', stdDeviation: '—' }
   const statsData = [
-    [cycleData.minimum, labels.minLabel],
+    [cycleData.minimum, t('min')],
-    [cycleData.maximum, labels.maxLabel],
+    [cycleData.maximum, t('max')],
-    [cycleData.stdDeviation ? cycleData.stdDeviation : '—', labels.stdLabel],
+    [
-    [numberOfCycles, labels.basisOfStatsEnd],
+      cycleData.stdDeviation ? cycleData.stdDeviation : '—',
+      t('standard_deviation'),
+    ],
+    [numberOfCycles, t('completed_cycles')],
   ]
 
   return (
-    <View style={styles.pageContainer}>
+    <SafeAreaView style={styles.pageContainer}>
-      <View style={styles.overviewContainer}>
+      <ScrollView contentContainerStyle={styles.overviewContainer}>
-        <AppText>{labels.cycleLengthExplainer}</AppText>
+        <AppText>{t('cycle_length_explainer')}</AppText>
-        {!hasAtLeastOneCycle && <AppText>{labels.emptyStats}</AppText>}
+        {!hasAtLeastOneCycle && <AppText>{t('no_data')}</AppText>}
         {hasAtLeastOneCycle && (
+          <>
             <View style={styles.container}>
               <View style={styles.columnLeft}>
                 <ImageBackground
@@ -48,22 +60,28 @@ const Stats = () => {
                   >
                     {cycleData.mean}
                   </AppText>
-                <AppText style={styles.accentPurpleHuge}>
+                  <AppText style={styles.accentPurpleHuge}>{t('days')}</AppText>
-                  {labels.daysLabel}
-                </AppText>
                 </ImageBackground>
-              <AppText style={styles.accentOrange}>
+                <AppText style={styles.accentOrange}>{t('average')}</AppText>
-                {labels.averageLabel}
-              </AppText>
               </View>
               <View style={styles.columnRight}>
                 <StatsOverview data={statsData} />
               </View>
             </View>
+            <Button isCTA onPress={() => setIsStatsVisible(true)}>
+              {t('show_stats')}
+            </Button>
+            <AppHelp text={t('standard_deviation_help')} />
+          </>
         )}
-      </View>
+      </ScrollView>
-      <StatsTable />
+
-    </View>
+      {isStatsVisible && (
+        <AppModal onClose={() => setIsStatsVisible(false)}>
+          <StatsTable onClose={() => setIsStatsVisible(false)} />
+        </AppModal>
+      )}
+    </SafeAreaView>
   )
 }