Use the date from context

Chore: add translations to stats

See merge request bloodyhealth/drip!545

components/Home.js

@@ -4,7 +4,9 @@ import PropTypes from 'prop-types'
 import moment from 'moment'
 
 import AppText from './common/app-text'
+import Asterisk from './common/Asterisk'
 import Button from './common/button'
+import Footnote from './common/Footnote'
 
 import cycleModule from '../lib/cycle'
 import { getFertilityStatusForDay } from '../lib/sympto-adapter'
@@ -16,9 +18,11 @@ import {
 import { Colors, Fonts, Sizes, Spacing } from '../styles'
 import { LocalDate } from '@js-joda/core'
 import { useTranslation } from 'react-i18next'
+import { useDate } from '../hooks/useDate'
 
-const Home = ({ navigate, setDate }) => {
+const Home = ({ navigate }) => {
   const { t } = useTranslation()
+  const { setDate } = useDate()
 
   function navigateToCycleDayView() {
     setDate(todayDateString)
@@ -69,26 +73,12 @@ const Home = ({ navigate, setDate }) => {
       <Button isCTA isSmall={false} onPress={navigateToCycleDayView}>
         {t('labels.home.addDataForToday')}
       </Button>
-      {phase && (
-        <View style={styles.asteriskLine}>
-          <Asterisk />
-          <AppText linkStyle={styles.whiteText} style={styles.greyText}>
-            {statusText}
-          </AppText>
-        </View>
-      )}
+      {phase && <Footnote>{statusText}</Footnote>}
     </ScrollView>
   )
 }
 
-const Asterisk = () => {
-  return <AppText style={styles.asterisk}>*</AppText>
-}
-
 const styles = StyleSheet.create({
-  asterisk: {
-    color: Colors.orange,
-  },
   container: {
     backgroundColor: Colors.purple,
     flex: 1,
@@ -104,12 +94,6 @@ const styles = StyleSheet.create({
     marginBottom: Spacing.tiny,
     marginTop: Spacing.small,
   },
-  asteriskLine: {
-    flexDirection: 'row',
-    alignContent: 'flex-start',
-    marginBottom: Spacing.tiny,
-    marginTop: Spacing.small,
-  },
   title: {
     color: Colors.purpleLight,
     fontFamily: Fonts.bold,
@@ -124,18 +108,10 @@ const styles = StyleSheet.create({
     color: 'white',
     fontSize: Sizes.subtitle,
   },
-  whiteText: {
-    color: 'white',
-  },
-  greyText: {
-    color: Colors.greyLight,
-    paddingLeft: Spacing.base,
-  },
 })
 
 Home.propTypes = {
   navigate: PropTypes.func,
-  setDate: PropTypes.func,
 }
 
 export default Home

components/app-wrapper.js

@@ -10,6 +10,8 @@ import AppStatusBar from './common/app-status-bar'
 import AcceptLicense from './AcceptLicense'
 import PasswordPrompt from './password-prompt'
 
+import { DateProvider } from '../hooks/useDate'
+
 export default function AppWrapper() {
   const [isLoading, setIsLoading] = useState(true)
   const [isLicenseAccepted, setIsLicenseAccepted] = useState(false)
@@ -47,7 +49,9 @@ export default function AppWrapper() {
       {isDbEncrypted ? (
         <PasswordPrompt enableShowApp={() => setIsDbEncrypted(false)} />
       ) : (
-        <App restartApp={() => checkIsDbEncrypted()} />
+        <DateProvider>
+          <App restartApp={() => checkIsDbEncrypted()} />
+        </DateProvider>
       )}
     </>
   )

components/app.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { BackHandler, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 
-import { LocalDate } from '@js-joda/core'
+import { useDate } from '../hooks/useDate'
 
 import Header from './header'
 import Menu from './menu'
@@ -13,7 +13,8 @@ import setupNotifications from '../lib/notifications'
 import { closeDb } from '../db'
 
 const App = ({ restartApp }) => {
-  const [date, setDate] = useState(LocalDate.now().toString())
+  const { setDate } = useDate()
+
   const [currentPage, setCurrentPage] = useState('Home')
   const goBack = () => {
     if (currentPage === 'Home') {
@@ -43,8 +44,6 @@ const App = ({ restartApp }) => {
   const isTemperatureEditView = currentPage === 'TemperatureEditView'
   const headerProps = { navigate: setCurrentPage }
   const pageProps = {
-    date,
-    setDate,
     isTemperatureEditView,
     navigate: setCurrentPage,
   }

components/calendar.js

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types'
 import { StyleSheet, View } from 'react-native'
 import { CalendarList } from 'react-native-calendars'
 
+import { useDate } from '../hooks/useDate'
+
 import { getBleedingDaysSortedByDate } from '../db'
 import cycleModule from '../lib/cycle'
 import {
@@ -12,7 +14,8 @@ import {
   todayToCalFormat,
 } from './helpers/calendar'
 
-const CalendarView = ({ setDate, navigate }) => {
+const CalendarView = ({ navigate }) => {
+  const { setDate } = useDate()
   const bleedingDays = getBleedingDaysSortedByDate()
   const predictedMenses = cycleModule().getPredictedMenses()
 
@@ -49,7 +52,6 @@ const styles = StyleSheet.create({
 })
 
 CalendarView.propTypes = {
-  setDate: PropTypes.func.isRequired,
   navigate: PropTypes.func.isRequired,
 }
 

components/chart/chart.js

@@ -28,12 +28,24 @@ import { Spacing } from '../../styles'
 const getSymptomsFromCycleDays = (cycleDays) =>
   SYMPTOMS.filter((symptom) => cycleDays.some((cycleDay) => cycleDay[symptom]))
 
-const CycleChart = ({ navigate, setDate }) => {
+const CycleChart = ({ navigate }) => {
   const [shouldShowHint, setShouldShowHint] = useState(true)
 
-  useEffect(async () => {
-    const flag = await getChartFlag()
-    setShouldShowHint(flag === 'true')
+  useEffect(() => {
+    let isMounted = true
+
+    async function checkShouldShowHint() {
+      const flag = await getChartFlag()
+      if (isMounted) {
+        setShouldShowHint(flag === 'true')
+      }
+    }
+
+    checkShouldShowHint()
+
+    return () => {
+      isMounted = false
+    }
   }, [])
 
   const hideHint = () => {
@@ -72,7 +84,6 @@ const CycleChart = ({ navigate, setDate }) => {
   const renderColumn = ({ item }) => {
     return (
       <DayColumn
-        setDate={setDate}
         dateString={item}
         navigate={navigate}
         symptomHeight={symptomHeight}
@@ -124,7 +135,6 @@ const CycleChart = ({ navigate, setDate }) => {
 
 CycleChart.propTypes = {
   navigate: PropTypes.func,
-  setDate: PropTypes.func,
 }
 
 const styles = StyleSheet.create({

components/chart/day-column.js

@@ -8,6 +8,8 @@ import SymptomCell from './symptom-cell'
 import TemperatureColumn from './temperature-column'
 import CycleDayLabel from './cycle-day-label'
 
+import { useDate } from '../../hooks/useDate'
+
 import {
   symptomColorMethods,
   getTemperatureProps,
@@ -19,13 +21,13 @@ const DayColumn = ({
   dateString,
   chartSymptoms,
   columnHeight,
-  setDate,
   navigate,
   shouldShowTemperatureColumn,
   symptomHeight,
   symptomRowSymptoms,
   xAxisHeight,
 }) => {
+  const { setDate } = useDate()
   const cycleDayData = getCycleDay(dateString)
   let data = {}
 
@@ -105,7 +107,6 @@ DayColumn.propTypes = {
   chartSymptoms: PropTypes.array,
   columnHeight: PropTypes.number.isRequired,
   navigate: PropTypes.func.isRequired,
-  setDate: PropTypes.func.isRequired,
   shouldShowTemperatureColumn: PropTypes.bool,
   symptomHeight: PropTypes.number.isRequired,
   symptomRowSymptoms: PropTypes.array,

components/common/AppHelp.js

@@ -1,32 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { StyleSheet, View } from 'react-native'
-
-import AppText from '../common/app-text'
-
-import { Containers, Spacing, Typography } from '../../styles'
-
-const AppHelp = ({ text }) => (
-  <View style={styles.container}>
-    <AppText style={styles.accentPurple}>*</AppText>
-    <AppText>{text}</AppText>
-  </View>
-)
-
-AppHelp.propTypes = {
-  text: PropTypes.string.isRequired,
-}
-
-const styles = StyleSheet.create({
-  accentPurple: {
-    ...Typography.accentPurple,
-    alignSelf: 'flex-start',
-    paddingRight: Spacing.base,
-  },
-  container: {
-    ...Containers.rowContainer,
-    padding: Spacing.base,
-  },
-})
-
-export default AppHelp

components/common/Asterisk.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { StyleSheet } from 'react-native'
+
+import AppText from './app-text'
+
+import { Colors } from '../../styles'
+
+const Asterisk = () => <AppText style={styles.asterisk}>*</AppText>
+
+const styles = StyleSheet.create({
+  asterisk: {
+    color: Colors.orange,
+  },
+})
+
+export default Asterisk

components/common/Footnote.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, View } from 'react-native'
+
+import AppText from '../common/app-text'
+import Asterisk from '../common/Asterisk'
+
+import { Colors, Spacing } from '../../styles'
+
+const Footnote = ({ children }) => {
+  if (!children) return false
+
+  return (
+    <View style={styles.container}>
+      <Asterisk />
+      <AppText linkStyle={styles.link} style={styles.text}>
+        {children}
+      </AppText>
+    </View>
+  )
+}
+
+Footnote.propTypes = {
+  children: PropTypes.node,
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignContent: 'flex-start',
+    marginBottom: Spacing.tiny,
+    marginTop: Spacing.small,
+  },
+  link: {
+    color: 'white',
+  },
+  text: {
+    color: Colors.greyLight,
+    paddingLeft: Spacing.base,
+  },
+})
+
+export default Footnote

components/cycle-day/cycle-day-overview.js

@@ -9,10 +9,13 @@ import SymptomPageTitle from './symptom-page-title'
 import { getCycleDay } from '../../db'
 import { getData, nextDate, prevDate } from '../helpers/cycle-day'
 
+import { useDate } from '../../hooks/useDate'
+
 import { Spacing } from '../../styles'
 import { SYMPTOMS } from '../../config'
 
-const CycleDayOverView = ({ date, setDate, isTemperatureEditView }) => {
+const CycleDayOverView = ({ isTemperatureEditView }) => {
+  const { date, setDate } = useDate()
   const cycleDay = getCycleDay(date)
 
   const [editedSymptom, setEditedSymptom] = useState(
@@ -58,8 +61,6 @@ const CycleDayOverView = ({ date, setDate, isTemperatureEditView }) => {
 
 CycleDayOverView.propTypes = {
   cycleDay: PropTypes.object,
-  date: PropTypes.string,
-  setDate: PropTypes.func,
   isTemperatureEditView: PropTypes.bool,
 }
 

components/stats.js

@@ -1,137 +0,0 @@
-import React, { useState } from 'react'
-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'
-
-import cycleModule from '../lib/cycle'
-import { getCycleLengthStats as getCycleInfo } from '../lib/cycle-length'
-
-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
-  const cycleData = hasAtLeastOneCycle
-    ? getCycleInfo(cycleLengths)
-    : { minimum: '—', maximum: '—', stdDeviation: '—' }
-  const statsData = [
-    [cycleData.minimum, t('min')],
-    [cycleData.maximum, t('max')],
-    [
-      cycleData.stdDeviation ? cycleData.stdDeviation : '—',
-      t('standard_deviation'),
-    ],
-    [numberOfCycles, t('completed_cycles')],
-  ]
-
-  return (
-    <SafeAreaView style={styles.pageContainer}>
-      <ScrollView contentContainerStyle={styles.overviewContainer}>
-        <AppText>{t('cycle_length_explainer')}</AppText>
-        {!hasAtLeastOneCycle && <AppText>{t('no_data')}</AppText>}
-        {hasAtLeastOneCycle && (
-          <>
-            <View style={styles.container}>
-              <View style={styles.columnLeft}>
-                <ImageBackground
-                  source={image}
-                  imageStyle={styles.image}
-                  style={styles.imageContainter}
-                >
-                  <AppText
-                    numberOfLines={1}
-                    ellipsizeMode="clip"
-                    style={styles.accentPurpleGiant}
-                  >
-                    {cycleData.mean}
-                  </AppText>
-                  <AppText style={styles.accentPurpleHuge}>{t('days')}</AppText>
-                </ImageBackground>
-                <AppText style={styles.accentOrange}>{t('average')}</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')} />
-          </>
-        )}
-      </ScrollView>
-
-      {isStatsVisible && (
-        <AppModal onClose={() => setIsStatsVisible(false)}>
-          <StatsTable
-            onClose={() => setIsStatsVisible(false)}
-            testID="statsTable"
-          />
-        </AppModal>
-      )}
-    </SafeAreaView>
-  )
-}
-
-const column = {
-  flexDirection: 'column',
-}
-
-const styles = ScaledSheet.create({
-  accentOrange: {
-    ...Typography.accentOrange,
-    fontSize: Sizes.small,
-  },
-  accentPurpleGiant: {
-    ...Typography.accentPurpleGiant,
-    marginTop: Spacing.base * -2,
-  },
-  accentPurpleHuge: {
-    ...Typography.accentPurpleHuge,
-    marginTop: Spacing.base * -1,
-  },
-  container: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  columnLeft: {
-    ...column,
-    flex: 3,
-  },
-  columnRight: {
-    ...column,
-    flex: 5,
-    paddingTop: Spacing.small,
-  },
-  image: {
-    resizeMode: 'contain',
-  },
-  imageContainter: {
-    paddingTop: Spacing.large * 2.5,
-    marginBottom: Spacing.large,
-  },
-  overviewContainer: {
-    paddingHorizontal: Spacing.base,
-    paddingTop: Spacing.base,
-  },
-  pageContainer: {
-    ...Containers.pageContainer,
-  },
-})
-
-export default 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'
 
@@ -15,12 +15,10 @@ StatsOverview.propTypes = {
 }
 
 const Row = ({ rowContent }) => {
-  const showHelp = rowContent[1].includes('deviation') ? true : false
-
   return (
     <View style={styles.row}>
       <Cell content={rowContent[0]} isLeft />
-      <Cell content={rowContent[1]} showHelp={showHelp} />
+      <Cell content={rowContent[1]} />
     </View>
   )
 }
@@ -29,7 +27,7 @@ Row.propTypes = {
   rowContent: PropTypes.array.isRequired,
 }
 
-const Cell = ({ content, isLeft, showHelp }) => {
+const Cell = ({ content, isLeft }) => {
   const styleContainer = isLeft ? styles.cellLeft : styles.cellRight
   const styleText = isLeft ? styles.accentPurpleBig : styles.accentOrange
   const numberOfLines = isLeft ? 1 : 2
@@ -44,7 +42,6 @@ const Cell = ({ content, isLeft, showHelp }) => {
       >
         {content}
       </AppText>
-      {showHelp && <AppText style={styles.accentPurpleBig}>*</AppText>}
     </View>
   )
 }
@@ -52,7 +49,6 @@ const Cell = ({ content, isLeft, showHelp }) => {
 Cell.propTypes = {
   content: PropTypes.node.isRequired,
   isLeft: PropTypes.bool,
-  showHelp: PropTypes.bool,
 }
 
 const styles = StyleSheet.create({
@@ -70,10 +66,7 @@ const styles = StyleSheet.create({
     flex: 3,
     justifyContent: 'center',
   },
-  cellRight: {
-    flex: 5,
-    flexDirection: 'row',
-  },
+  cellRight: { flex: 5 },
   row: { flexDirection: 'row' },
 })
 

components/stats/StatsTable.js

@@ -1,13 +1,12 @@
 import React from 'react'
-import { Dimensions, FlatList, StyleSheet, View } from 'react-native'
+import { FlatList, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 
-import AppText from './app-text'
-import CloseIcon from './close-icon'
+import AppText from '../common/app-text'
 
 import cycleModule from '../../lib/cycle'
-import { Sizes, Spacing, Typography, Colors } from '../../styles'
+import { Spacing, Typography, Colors } from '../../styles'
 import { humanizeDate } from '../helpers/format-date'
 
 const Item = ({ data }) => {
@@ -36,67 +35,43 @@ Item.propTypes = {
   data: PropTypes.object.isRequired,
 }
 
-const StatsTable = ({ onClose }) => {
+const StatsTable = () => {
   const renderItem = ({ item }) => <Item data={item} />
   const data = cycleModule().getStats()
 
   if (!data || data.length === 0) return false
 
   return (
-    <View style={styles.modalContainer}>
-      <View style={styles.headerContainer}>
-        <CloseIcon onClose={onClose} />
-      </View>
-      <FlatList
-        data={data}
-        renderItem={renderItem}
-        keyExtractor={(item) => item.date}
-        ItemSeparatorComponent={ItemDivider}
-        ListHeaderComponent={FlatListHeader}
-        ListHeaderComponentStyle={styles.headerDivider}
-        stickyHeaderIndices={[0]}
-        contentContainerStyle={styles.container}
-      />
-    </View>
+    <FlatList
+      data={data}
+      renderItem={renderItem}
+      keyExtractor={(item) => item.date}
+      ItemSeparatorComponent={ItemDivider}
+      ListHeaderComponent={FlatListHeader}
+      ListHeaderComponentStyle={styles.headerDivider}
+      stickyHeaderIndices={[0]}
+      contentContainerStyle={styles.container}
+    />
   )
 }
 
-StatsTable.propTypes = {
-  onClose: PropTypes.func,
-}
-
 const ItemDivider = () => <View style={styles.divider} />
 
-const FlatListHeader = () => {
-  const { t } = useTranslation(null, { keyPrefix: 'stats' })
-
-  return (
-    <View style={styles.row}>
-      <View style={styles.accentCell}>
-        <AppText style={styles.header}>{t('cycle_start')}</AppText>
-      </View>
-      <View style={styles.cell}>
-        <AppText style={styles.header}>{t('cycle_length')}</AppText>
-      </View>
-      <View style={styles.cell}>
-        <AppText style={styles.header}>{t('bleeding')}</AppText>
-      </View>
+const FlatListHeader = () => (
+  <View style={styles.row}>
+    <View style={styles.accentCell}>
+      <AppText style={styles.header}>{'Cycle Start'}</AppText>
     </View>
-  )
-}
+    <View style={styles.cell}>
+      <AppText style={styles.header}>{'Cycle Length'}</AppText>
+    </View>
+    <View style={styles.cell}>
+      <AppText style={styles.header}>{'Bleeding'}</AppText>
+    </View>
+  </View>
+)
 
 const styles = StyleSheet.create({
-  accentCell: {
-    flex: 3,
-    justifyContent: 'center',
-  },
-  cell: {
-    flex: 2,
-    justifyContent: 'center',
-  },
-  container: {
-    paddingHorizontal: Spacing.base,
-  },
   divider: {
     height: 1,
     width: '100%',
@@ -106,31 +81,27 @@ const styles = StyleSheet.create({
     ...Typography.accentOrange,
     paddingVertical: Spacing.small,
   },
-  headerContainer: {
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    paddingTop: Spacing.base,
-    paddingRight: Spacing.base,
-  },
   headerDivider: {
     borderBottomColor: Colors.purple,
     borderBottomWidth: 2,
   },
-  modalContainer: {
-    alignSelf: 'center',
-    backgroundColor: Colors.turquoiseLight,
-    marginTop: Sizes.huge * 2,
-    maxHeight: Dimensions.get('window').height * 0.7,
-    minHeight: '40%',
-    position: 'absolute',
-    width: '100%',
-  },
   row: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     paddingVertical: Spacing.tiny,
     backgroundColor: Colors.turquoiseLight,
   },
+  cell: {
+    flex: 2,
+    justifyContent: 'center',
+  },
+  accentCell: {
+    flex: 3,
+    justifyContent: 'center',
+  },
+  container: {
+    paddingHorizontal: Spacing.base,
+  },
 })
 
 export default StatsTable

components/stats/index.js

@@ -0,0 +1,123 @@
+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 './StatsOverview'
+import StatsTable from './StatsTable'
+
+import cycleModule from '../../lib/cycle'
+import { getCycleLengthStats as getCycleInfo } from '../../lib/cycle-length'
+
+import { Containers, Sizes, Spacing, Typography } from '../../styles'
+
+const image = require('../../assets/cycle-icon.png')
+
+const Stats = () => {
+  const { t } = useTranslation(null, { keyPrefix: 'stats' })
+
+  const cycleLengths = cycleModule().getAllCycleLengths()
+  const numberOfCycles = cycleLengths.length
+  const cycleData =
+    numberOfCycles > 0
+      ? getCycleInfo(cycleLengths)
+      : { minimum: '—', maximum: '—', stdDeviation: '—' }
+  const standardDeviation = cycleData.stdDeviation
+    ? cycleData.stdDeviation
+    : '—'
+  const statsData = [
+    [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>{t('intro')}</AppText>
+        {numberOfCycles === 0 ? (
+          <AppText>{t('noData')}</AppText>
+        ) : (
+          <View style={styles.container}>
+            <View style={styles.columnLeft}>
+              <ImageBackground
+                source={image}
+                imageStyle={styles.image}
+                style={styles.imageContainter}
+              >
+                <AppText
+                  numberOfLines={1}
+                  ellipsizeMode="clip"
+                  style={styles.accentPurpleGiant}
+                >
+                  {cycleData.mean}
+                </AppText>
+                <AppText style={styles.accentPurpleHuge}>
+                  {t('overview.days')}
+                </AppText>
+              </ImageBackground>
+              <AppText style={styles.accentOrange}>
+                {t('overview.average')}
+              </AppText>
+            </View>
+            <View style={styles.columnRight}>
+              <StatsOverview data={statsData} />
+            </View>
+          </View>
+        )}
+      </View>
+      <StatsTable />
+    </View>
+  )
+}
+
+const column = {
+  flexDirection: 'column',
+}
+
+const styles = ScaledSheet.create({
+  accentOrange: {
+    ...Typography.accentOrange,
+    fontSize: Sizes.small,
+  },
+  accentPurpleGiant: {
+    ...Typography.accentPurpleGiant,
+    marginTop: Spacing.base * -2,
+  },
+  accentPurpleHuge: {
+    ...Typography.accentPurpleHuge,
+    marginTop: Spacing.base * -1,
+  },
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  columnLeft: {
+    ...column,
+    flex: 3,
+  },
+  columnRight: {
+    ...column,
+    flex: 5,
+    paddingTop: Spacing.small,
+  },
+  image: {
+    resizeMode: 'contain',
+  },
+  imageContainter: {
+    paddingTop: Spacing.large * 2.5,
+    marginBottom: Spacing.large,
+  },
+  overviewContainer: {
+    paddingHorizontal: Spacing.base,
+    paddingTop: Spacing.base,
+  },
+  pageContainer: {
+    ...Containers.pageContainer,
+  },
+})
+
+export default Stats

hooks/useDate.js

@@ -0,0 +1,24 @@
+import React, { createContext, useContext, useState } from 'react'
+import PropTypes from 'prop-types'
+import { LocalDate } from '@js-joda/core'
+
+const DateContext = createContext()
+
+export const DateProvider = ({ children }) => {
+  const [date, setDate] = useState(LocalDate.now().toString())
+
+  return (
+    <DateContext.Provider value={{ date, setDate }}>
+      {children}
+    </DateContext.Provider>
+  )
+}
+
+DateProvider.propTypes = {
+  children: PropTypes.node,
+}
+
+export const useDate = () => {
+  const { date, setDate } = useContext(DateContext)
+  return { date, setDate }
+}

i18n/en.json

@@ -61,23 +61,27 @@
       }
     }
   },
+  "stats": {
+    "noData": "At least one completed cycle is needed to display stats.",
+    "intro": "Basic statistics about the length of your cycles.",
+    "overview": {
+      "average": "Average cycle",
+      "days": "days",
+      "min": "Shortest",
+      "max": "Longest",
+      "standardDeviation": "Standard\ndeviation",
+      "completedCycles": "completed\ncycles"
+    },
+    "showStats": "Show period details",
+    "details": {
+      "cycleStart": "Cycle start",
+      "cycleLength": "Cycle length",
+      "bleedingDays": "Bleeding"
+    },
+    "footnote": "Based on the standard deviation of all your tracked periods drip. calculates a range for the starting day of the upcoming 3 periods. The range will be 3 days if your standard deviation is smaller than 1.5 and 5 days if the value is bigger.\n\nThe standard deviation tells you how much the length of your periods vary, 0 means all your periods are exactly the same length and the bigger the value the more the period length varies."
+  },
   "plurals": {
     "day": "{{count}} day",
     "day_plural": "{{count}} days"
-  },
-  "stats": {
-    "show_stats": "Show period details",
-    "cycle_start": "Cycle start",
-    "cycle_length": "Cycle length",
-    "bleeding": "Bleeding",
-    "cycle_length_explainer": "Basic statistics about the length of your cycles.",
-    "no_data": "At least one completed cycle is needed to display stats.",
-    "days": "days",
-    "completed_cycles": "completed\ncycles",
-    "average": "Average cycle",
-    "min": "Shortest",
-    "max": "Longest",
-    "standard_deviation": "Standard\ndeviation",
-    "standard_deviation_help": "Based on the standard deviation of all your tracked periods drip. calculates a range for the starting day of the upcoming 3 periods. The range will be 3 days if your standard deviation is smaller than 1.5 and 5 days if the value is bigger.\n\nThe standard deviation tells you how much the length of your periods vary, 0 means all your periods are exactly the same length and the bigger the value the more the period length varies."
   }
 }

jest-setup.js

@@ -0,0 +1,2 @@
+// Import Jest Native matchers
+import '@testing-library/jest-native/extend-expect'

jest.config.js

@@ -1,10 +1,7 @@
 module.exports = {
   preset: '@testing-library/react-native',
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
-  moduleNameMapper: {
-    '\\.(png)$': require.resolve('./test/file-mock.js'),
-  },
-  setupFilesAfterEnv: ['./test/jest-setup.js'],
+  setupFilesAfterEnv: ['./jest-setup.js'],
   transformIgnorePatterns: [
     'node_modules/(?!((jest-)?react-native(-.*)?|@react-native(-community)?)/)',
   ],

styles/typography.js

@@ -6,7 +6,7 @@ import Spacing from './spacing'
 
 export const fonts = {
   main: Platform.OS === 'ios' ? 'Jost-Book' : 'Jost-400-Book',
-  bold: Platform.OS === 'ios' ? 'Jost-Bold' : 'Jost-700-Bold',
+  bold : Platform.OS === 'ios' ? 'Jost-Bold' : 'Jost-700-Bold',
 }
 
 export const sizes = {
@@ -23,7 +23,7 @@ export const sizes = {
 const accentText = {
   fontFamily: fonts.bold,
   textAlignVertical: 'center',
-  textTransform: 'uppercase',
+  textTransform: 'uppercase'
 }
 
 const accentTextBig = {
@@ -43,51 +43,47 @@ const accentTextHuge = {
 
 const accentTextSmall = {
   ...accentText,
-  fontSize: sizes.small,
+  fontSize: sizes.small
 }
 
 const title = {
   color: Colors.purple,
-  marginVertical: Spacing.large,
+  marginVertical: Spacing.large
 }
 
 const label = {
   fontSize: sizes.small,
-  textTransform: 'uppercase',
+  textTransform: 'uppercase'
 }
 
 export default {
   accentOrange: {
     ...accentTextSmall,
-    color: Colors.orange,
-  },
-  accentPurple: {
-    ...accentTextSmall,
-    color: Colors.purple,
+    color: Colors.orange
   },
   accentPurpleBig: {
     ...accentTextBig,
-    color: Colors.purple,
+    color: Colors.purple
   },
   accentPurpleGiant: {
     ...accentTextGiant,
-    color: Colors.purple,
+    color: Colors.purple
   },
   accentPurpleHuge: {
     ...accentTextHuge,
-    color: Colors.purple,
+    color: Colors.purple
   },
   mainText: {
     fontFamily: fonts.main,
-    fontSize: sizes.base,
+    fontSize: sizes.base
   },
   label: {
-    ...label,
+    ...label
   },
   labelBold: {
     color: Colors.greyDark,
     fontWeight: 'bold',
-    ...label,
+    ...label
   },
   labelLight: {
     color: Colors.grey,
@@ -95,7 +91,7 @@ export default {
   },
   subtitle: {
     fontSize: sizes.subtitle,
-    ...title,
+    ...title
   },
   title: {
     alignSelf: 'center',
@@ -103,7 +99,7 @@ export default {
     fontWeight: '700',
     fontSize: sizes.title,
     marginHorizontal: Spacing.base,
-    ...title,
+    ...title
   },
   titleWithoutMargin: {
     alignSelf: 'center',
@@ -111,5 +107,5 @@ export default {
     fontFamily: fonts.bold,
     fontWeight: '700',
     fontSize: sizes.title,
-  },
+  }
 }

test/AcceptLicense.spec.js

@@ -1,14 +1,21 @@
 import React from 'react'
 import { render, screen, fireEvent } from '@testing-library/react-native'
+import AcceptLicense from '../components/AcceptLicense'
 
-import AcceptLicense from '../../components/AcceptLicense'
+import { saveLicenseFlag } from '../local-storage'
 
-import { saveLicenseFlag } from '../../local-storage'
-
-jest.mock('../../local-storage', () => ({
+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('On clicking OK button, the license is accepted', async () => {
     const mockedSetLicense = jest.fn()

test/License.spec.js

@@ -1,7 +1,14 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react-native'
+import License from '../components/settings/License'
 
-import License from '../../../components/settings/License'
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (str, options) => {
+      return str + (options ? JSON.stringify(options) : '')
+    },
+  }),
+}))
 
 describe('License screen', () => {
   test('It should have a correct year', async () => {

test/components/__snapshots__/stats.spec.js.snap

@@ -1,395 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Stats screen when provided data, renders stats 1`] = `
-<RCTSafeAreaView
-  emulateUnlessSupported={true}
-  style={
-    Object {
-      "backgroundColor": "#E9F2ED",
-      "flex": 1,
-    }
-  }
->
-  <RCTScrollView
-    contentContainerStyle={
-      Object {
-        "paddingHorizontal": 34.285714285714285,
-        "paddingTop": 34.285714285714285,
-      }
-    }
-  >
-    <View>
-      <Text
-        style={
-          Array [
-            Object {
-              "color": "#555",
-              "fontFamily": "Jost-Book",
-              "fontSize": 34.285714285714285,
-            },
-            undefined,
-          ]
-        }
-      >
-        cycle_length_explainer
-      </Text>
-      <View
-        style={
-          Object {
-            "alignItems": "center",
-            "flexDirection": "row",
-            "justifyContent": "space-between",
-          }
-        }
-      >
-        <View
-          style={
-            Object {
-              "flex": 3,
-              "flexDirection": "column",
-            }
-          }
-        >
-          <View
-            accessibilityIgnoresInvertColors={true}
-            style={
-              Object {
-                "marginBottom": 42.857142857142854,
-                "paddingTop": 107.14285714285714,
-              }
-            }
-          >
-            <Image
-              source={123}
-              style={
-                Array [
-                  Object {
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "right": 0,
-                    "top": 0,
-                  },
-                  Object {
-                    "height": undefined,
-                    "width": undefined,
-                  },
-                  Object {
-                    "resizeMode": "contain",
-                  },
-                ]
-              }
-            />
-            <Text
-              ellipsizeMode="clip"
-              numberOfLines={1}
-              style={
-                Array [
-                  Object {
-                    "color": "#555",
-                    "fontFamily": "Jost-Book",
-                    "fontSize": 34.285714285714285,
-                  },
-                  Object {
-                    "color": "#3A2671",
-                    "fontFamily": "Jost-Bold",
-                    "fontSize": 85.71428571428571,
-                    "marginTop": -68.57142857142857,
-                    "textAlignVertical": "center",
-                    "textTransform": "uppercase",
-                  },
-                ]
-              }
-            >
-              30.33
-            </Text>
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#555",
-                    "fontFamily": "Jost-Book",
-                    "fontSize": 34.285714285714285,
-                  },
-                  Object {
-                    "color": "#3A2671",
-                    "fontFamily": "Jost-Bold",
-                    "fontSize": 68.57142857142857,
-                    "marginTop": -34.285714285714285,
-                    "textAlignVertical": "center",
-                    "textTransform": "uppercase",
-                  },
-                ]
-              }
-            >
-              days
-            </Text>
-          </View>
-          <Text
-            style={
-              Array [
-                Object {
-                  "color": "#555",
-                  "fontFamily": "Jost-Book",
-                  "fontSize": 34.285714285714285,
-                },
-                Object {
-                  "color": "#F38337",
-                  "fontFamily": "Jost-Bold",
-                  "fontSize": 27.857142857142858,
-                  "textAlignVertical": "center",
-                  "textTransform": "uppercase",
-                },
-              ]
-            }
-          >
-            average
-          </Text>
-        </View>
-        <View
-          style={
-            Object {
-              "flex": 5,
-              "flexDirection": "column",
-              "paddingTop": 21.428571428571427,
-            }
-          }
-        >
-          <StatsOverview
-            data={
-              Array [
-                Array [
-                  30,
-                  "min",
-                ],
-                Array [
-                  31,
-                  "max",
-                ],
-                Array [
-                  0.58,
-                  "standard_deviation",
-                ],
-                Array [
-                  3,
-                  "completed_cycles",
-                ],
-              ]
-            }
-          />
-        </View>
-      </View>
-      <View
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        onClick={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Object {
-            "alignItems": "center",
-            "alignSelf": "center",
-            "backgroundColor": "#F38337",
-            "borderRadius": 25,
-            "flexDirection": "row",
-            "justifyContent": "center",
-            "marginTop": 34.285714285714285,
-            "minWidth": "15%",
-            "opacity": 1,
-            "paddingHorizontal": 8.571428571428571,
-          }
-        }
-      >
-        <Text
-          style={
-            Array [
-              Object {
-                "color": "#555",
-                "fontFamily": "Jost-Book",
-                "fontSize": 34.285714285714285,
-              },
-              Array [
-                Object {
-                  "color": "white",
-                  "fontFamily": "Jost-Bold",
-                },
-                Object {
-                  "fontSize": 27.857142857142858,
-                  "padding": 21.428571428571427,
-                  "textTransform": "uppercase",
-                },
-              ],
-            ]
-          }
-        >
-          show_stats
-        </Text>
-      </View>
-      <AppHelp
-        text="standard_deviation_help"
-      />
-    </View>
-  </RCTScrollView>
-</RCTSafeAreaView>
-`;
-
-exports[`Stats screen when provided no data, renders no_data text 1`] = `
-<RCTSafeAreaView
-  emulateUnlessSupported={true}
-  style={
-    Object {
-      "backgroundColor": "#E9F2ED",
-      "flex": 1,
-    }
-  }
->
-  <RCTScrollView
-    contentContainerStyle={
-      Object {
-        "paddingHorizontal": 34.285714285714285,
-        "paddingTop": 34.285714285714285,
-      }
-    }
-  >
-    <View>
-      <Text
-        style={
-          Array [
-            Object {
-              "color": "#555",
-              "fontFamily": "Jost-Book",
-              "fontSize": 34.285714285714285,
-            },
-            undefined,
-          ]
-        }
-      >
-        cycle_length_explainer
-      </Text>
-      <Text
-        style={
-          Array [
-            Object {
-              "color": "#555",
-              "fontFamily": "Jost-Book",
-              "fontSize": 34.285714285714285,
-            },
-            undefined,
-          ]
-        }
-      >
-        no_data
-      </Text>
-    </View>
-  </RCTScrollView>
-</RCTSafeAreaView>
-`;
-
-exports[`Stats screen when provided null, renders no_data text 1`] = `
-<RCTSafeAreaView
-  emulateUnlessSupported={true}
-  style={
-    Object {
-      "backgroundColor": "#E9F2ED",
-      "flex": 1,
-    }
-  }
->
-  <RCTScrollView
-    contentContainerStyle={
-      Object {
-        "paddingHorizontal": 34.285714285714285,
-        "paddingTop": 34.285714285714285,
-      }
-    }
-  >
-    <View>
-      <Text
-        style={
-          Array [
-            Object {
-              "color": "#555",
-              "fontFamily": "Jost-Book",
-              "fontSize": 34.285714285714285,
-            },
-            undefined,
-          ]
-        }
-      >
-        cycle_length_explainer
-      </Text>
-      <Text
-        style={
-          Array [
-            Object {
-              "color": "#555",
-              "fontFamily": "Jost-Book",
-              "fontSize": 34.285714285714285,
-            },
-            undefined,
-          ]
-        }
-      >
-        no_data
-      </Text>
-    </View>
-  </RCTScrollView>
-</RCTSafeAreaView>
-`;
-
-exports[`Stats screen when provided undefined, renders no_data text 1`] = `
-<RCTSafeAreaView
-  emulateUnlessSupported={true}
-  style={
-    Object {
-      "backgroundColor": "#E9F2ED",
-      "flex": 1,
-    }
-  }
->
-  <RCTScrollView
-    contentContainerStyle={
-      Object {
-        "paddingHorizontal": 34.285714285714285,
-        "paddingTop": 34.285714285714285,
-      }
-    }
-  >
-    <View>
-      <Text
-        style={
-          Array [
-            Object {
-              "color": "#555",
-              "fontFamily": "Jost-Book",
-              "fontSize": 34.285714285714285,
-            },
-            undefined,
-          ]
-        }
-      >
-        cycle_length_explainer
-      </Text>
-      <Text
-        style={
-          Array [
-            Object {
-              "color": "#555",
-              "fontFamily": "Jost-Book",
-              "fontSize": 34.285714285714285,
-            },
-            undefined,
-          ]
-        }
-      >
-        no_data
-      </Text>
-    </View>
-  </RCTScrollView>
-</RCTSafeAreaView>
-`;

test/components/common/AppHelp.spec.js

@@ -1,13 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-
-import AppHelp from '../../../components/common/AppHelp'
-
-describe('AppHelp screen', () => {
-  test('when provided text, should render it', async () => {
-    const text = 'Some help test'
-    const { toJSON } = render(<AppHelp text={text} />)
-
-    expect(toJSON()).toMatchSnapshot()
-  })
-})

test/components/common/Footnote.spec.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { render } from '@testing-library/react-native'
+
+import Footnote from '../../../components/common/Footnote'
+
+describe('Footnote component', () => {
+  test('when children are present, renders them', () => {
+    const text = 'Some footnote text'
+    const { toJSON } = render(<Footnote>{text}</Footnote>)
+
+    expect(toJSON()).toMatchSnapshot()
+  })
+
+  test('when no children, renders nothing', () => {
+    const { toJSON } = render(<Footnote></Footnote>)
+
+    expect(toJSON()).toMatchSnapshot()
+  })
+})

test/components/common/StatsOverview.spec.js

@@ -1,25 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-
-import StatsOverview from '../../../components/common/StatsOverview'
-
-describe('StatsOverview screen', () => {
-  test('when provided correct, renders it', async () => {
-    const data = [
-      [21, 'shortest'],
-      [21, 'longest'],
-      [0, 'standard deviation'],
-      [2, 'completed cycles'],
-    ]
-    const { toJSON } = render(<StatsOverview data={data} />)
-
-    expect(toJSON()).toMatchSnapshot()
-  })
-
-  test('when provided empty data, renders nothing (does not break)', async () => {
-    const data = []
-    const { toJSON } = render(<StatsOverview data={data} />)
-
-    expect(toJSON()).toMatchSnapshot()
-  })
-})

test/components/common/StatsTable.spec.js

@@ -1,47 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-
-import StatsTable from '../../../components/common/StatsTable'
-
-const mockGetStats = jest
-  .fn()
-  .mockImplementationOnce(() => [
-    { date: '2022-07-01', cycleLength: 31, bleedingLength: 5 },
-    { date: '2022-06-01', cycleLength: 31, bleedingLength: 5 },
-  ])
-  .mockImplementationOnce(() => [])
-  .mockImplementationOnce(() => null)
-  .mockImplementationOnce(() => undefined)
-
-jest.mock('../../../lib/cycle', () => ({
-  __esModule: true,
-  default: () => ({
-    getStats: mockGetStats,
-  }),
-}))
-
-describe('StatsTable screen', () => {
-  test('when provided correct data set, renders it', async () => {
-    const { toJSON } = render(<StatsTable onClose={jest.fn()} />)
-
-    expect(toJSON()).toMatchSnapshot()
-  })
-
-  test('when provided no data, renders nothing', async () => {
-    const { toJSON } = render(<StatsTable onClose={jest.fn()} />)
-
-    expect(toJSON()).toMatchSnapshot()
-  })
-
-  test('when provided null, renders nothing', async () => {
-    const { toJSON } = render(<StatsTable onClose={jest.fn()} />)
-
-    expect(toJSON()).toMatchSnapshot()
-  })
-
-  test('when provided undefined, renders nothing', async () => {
-    const { toJSON } = render(<StatsTable onClose={jest.fn()} />)
-
-    expect(toJSON()).toMatchSnapshot()
-  })
-})

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

@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`AppHelp screen when provided text, should render it 1`] = `
+exports[`Footnote component when children are present, renders them 1`] = `
 <View
   style={
     Object {
-      "alignItems": "center",
+      "alignContent": "flex-start",
       "flexDirection": "row",
-      "justifyContent": "space-between",
-      "padding": 34.285714285714285,
+      "marginBottom": 8.571428571428571,
+      "marginTop": 21.428571428571427,
     }
   }
 >
@@ -20,13 +20,7 @@ exports[`AppHelp screen when provided text, should render it 1`] = `
           "fontSize": 34.285714285714285,
         },
         Object {
-          "alignSelf": "flex-start",
-          "color": "#3A2671",
-          "fontFamily": "Jost-Bold",
-          "fontSize": 27.857142857142858,
-          "paddingRight": 34.285714285714285,
-          "textAlignVertical": "center",
-          "textTransform": "uppercase",
+          "color": "#F38337",
         },
       ]
     }
@@ -34,6 +28,11 @@ exports[`AppHelp screen when provided text, should render it 1`] = `
     *
   </Text>
   <Text
+    linkStyle={
+      Object {
+        "color": "white",
+      }
+    }
     style={
       Array [
         Object {
@@ -41,11 +40,16 @@ exports[`AppHelp screen when provided text, should render it 1`] = `
           "fontFamily": "Jost-Book",
           "fontSize": 34.285714285714285,
         },
-        undefined,
+        Object {
+          "color": "#CCC",
+          "paddingLeft": 34.285714285714285,
+        },
       ]
     }
   >
-    Some help test
+    Some footnote text
   </Text>
 </View>
 `;
+
+exports[`Footnote component when no children, renders nothing 1`] = `null`;

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

@@ -1,321 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StatsOverview screen when provided correct, renders it 1`] = `
-Array [
-  <View
-    style={
-      Object {
-        "flexDirection": "row",
-      }
-    }
-  >
-    <View
-      style={
-        Object {
-          "alignItems": "flex-end",
-          "flex": 3,
-          "justifyContent": "center",
-        }
-      }
-    >
-      <Text
-        ellipsizeMode="clip"
-        numberOfLines={1}
-        style={
-          Array [
-            Object {
-              "color": "#555",
-              "fontFamily": "Jost-Book",
-              "fontSize": 34.285714285714285,
-            },
-            Object {
-              "color": "#3A2671",
-              "fontFamily": "Jost-Bold",
-              "fontSize": 64.28571428571428,
-              "marginRight": 8.571428571428571,
-              "textAlignVertical": "center",
-              "textTransform": "uppercase",
-            },
-          ]
-        }
-      >
-        21
-      </Text>
-    </View>
-    <View
-      style={
-        Object {
-          "flex": 5,
-          "flexDirection": "row",
-        }
-      }
-    >
-      <Text
-        ellipsizeMode="tail"
-        numberOfLines={2}
-        style={
-          Array [
-            Object {
-              "color": "#555",
-              "fontFamily": "Jost-Book",
-              "fontSize": 34.285714285714285,
-            },
-            Object {
-              "color": "#F38337",
-              "fontFamily": "Jost-Bold",
-              "fontSize": 27.857142857142858,
-              "margin": 15,
-              "textAlignVertical": "center",
-              "textTransform": "uppercase",
-            },
-          ]
-        }
-      >
-        shortest
-      </Text>
-    </View>
-  </View>,
-  <View
-    style={
-      Object {
-        "flexDirection": "row",
-      }
-    }
-  >
-    <View
-      style={
-        Object {
-          "alignItems": "flex-end",
-          "flex": 3,
-          "justifyContent": "center",
-        }
-      }
-    >
-      <Text
-        ellipsizeMode="clip"
-        numberOfLines={1}
-        style={
-          Array [
-            Object {
-              "color": "#555",
-              "fontFamily": "Jost-Book",
-              "fontSize": 34.285714285714285,
-            },
-            Object {
-              "color": "#3A2671",
-              "fontFamily": "Jost-Bold",
-              "fontSize": 64.28571428571428,
-              "marginRight": 8.571428571428571,
-              "textAlignVertical": "center",
-              "textTransform": "uppercase",
-            },
-          ]
-        }
-      >
-        21
-      </Text>
-    </View>
-    <View
-      style={
-        Object {
-          "flex": 5,
-          "flexDirection": "row",
-        }
-      }
-    >
-      <Text
-        ellipsizeMode="tail"
-        numberOfLines={2}
-        style={
-          Array [
-            Object {
-              "color": "#555",
-              "fontFamily": "Jost-Book",
-              "fontSize": 34.285714285714285,
-            },
-            Object {
-              "color": "#F38337",
-              "fontFamily": "Jost-Bold",
-              "fontSize": 27.857142857142858,
-              "margin": 15,
-              "textAlignVertical": "center",
-              "textTransform": "uppercase",
-            },
-          ]
-        }
-      >
-        longest
-      </Text>
-    </View>
-  </View>,
-  <View
-    style={
-      Object {
-        "flexDirection": "row",
-      }
-    }
-  >
-    <View
-      style={
-        Object {
-          "alignItems": "flex-end",
-          "flex": 3,
-          "justifyContent": "center",
-        }
-      }
-    >
-      <Text
-        ellipsizeMode="clip"
-        numberOfLines={1}
-        style={
-          Array [
-            Object {
-              "color": "#555",
-              "fontFamily": "Jost-Book",
-              "fontSize": 34.285714285714285,
-            },
-            Object {
-              "color": "#3A2671",
-              "fontFamily": "Jost-Bold",
-              "fontSize": 64.28571428571428,
-              "marginRight": 8.571428571428571,
-              "textAlignVertical": "center",
-              "textTransform": "uppercase",
-            },
-          ]
-        }
-      >
-        0
-      </Text>
-    </View>
-    <View
-      style={
-        Object {
-          "flex": 5,
-          "flexDirection": "row",
-        }
-      }
-    >
-      <Text
-        ellipsizeMode="tail"
-        numberOfLines={2}
-        style={
-          Array [
-            Object {
-              "color": "#555",
-              "fontFamily": "Jost-Book",
-              "fontSize": 34.285714285714285,
-            },
-            Object {
-              "color": "#F38337",
-              "fontFamily": "Jost-Bold",
-              "fontSize": 27.857142857142858,
-              "margin": 15,
-              "textAlignVertical": "center",
-              "textTransform": "uppercase",
-            },
-          ]
-        }
-      >
-        standard deviation
-      </Text>
-      <Text
-        style={
-          Array [
-            Object {
-              "color": "#555",
-              "fontFamily": "Jost-Book",
-              "fontSize": 34.285714285714285,
-            },
-            Object {
-              "color": "#3A2671",
-              "fontFamily": "Jost-Bold",
-              "fontSize": 64.28571428571428,
-              "marginRight": 8.571428571428571,
-              "textAlignVertical": "center",
-              "textTransform": "uppercase",
-            },
-          ]
-        }
-      >
-        *
-      </Text>
-    </View>
-  </View>,
-  <View
-    style={
-      Object {
-        "flexDirection": "row",
-      }
-    }
-  >
-    <View
-      style={
-        Object {
-          "alignItems": "flex-end",
-          "flex": 3,
-          "justifyContent": "center",
-        }
-      }
-    >
-      <Text
-        ellipsizeMode="clip"
-        numberOfLines={1}
-        style={
-          Array [
-            Object {
-              "color": "#555",
-              "fontFamily": "Jost-Book",
-              "fontSize": 34.285714285714285,
-            },
-            Object {
-              "color": "#3A2671",
-              "fontFamily": "Jost-Bold",
-              "fontSize": 64.28571428571428,
-              "marginRight": 8.571428571428571,
-              "textAlignVertical": "center",
-              "textTransform": "uppercase",
-            },
-          ]
-        }
-      >
-        2
-      </Text>
-    </View>
-    <View
-      style={
-        Object {
-          "flex": 5,
-          "flexDirection": "row",
-        }
-      }
-    >
-      <Text
-        ellipsizeMode="tail"
-        numberOfLines={2}
-        style={
-          Array [
-            Object {
-              "color": "#555",
-              "fontFamily": "Jost-Book",
-              "fontSize": 34.285714285714285,
-            },
-            Object {
-              "color": "#F38337",
-              "fontFamily": "Jost-Bold",
-              "fontSize": 27.857142857142858,
-              "margin": 15,
-              "textAlignVertical": "center",
-              "textTransform": "uppercase",
-            },
-          ]
-        }
-      >
-        completed cycles
-      </Text>
-    </View>
-  </View>,
-]
-`;
-
-exports[`StatsOverview screen when provided empty data, renders nothing (does not break) 1`] = `null`;

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

@@ -1,433 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StatsTable screen when provided correct data set, renders it 1`] = `
-<View
-  style={
-    Object {
-      "alignSelf": "center",
-      "backgroundColor": "#E9F2ED",
-      "marginTop": 137.14285714285714,
-      "maxHeight": 933.8,
-      "minHeight": "40%",
-      "position": "absolute",
-      "width": "100%",
-    }
-  }
->
-  <View
-    style={
-      Object {
-        "flexDirection": "row",
-        "justifyContent": "flex-end",
-        "paddingRight": 34.285714285714285,
-        "paddingTop": 34.285714285714285,
-      }
-    }
-  >
-    <View
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      hitSlop={
-        Object {
-          "bottom": 39.23529411764706,
-          "left": 42.857142857142854,
-          "right": 42.857142857142854,
-          "top": 39.23529411764706,
-        }
-      }
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        Object {
-          "alignSelf": "flex-start",
-          "marginBottom": 34.285714285714285,
-          "opacity": 1,
-        }
-      }
-    >
-      <Text
-        allowFontScaling={false}
-        selectable={false}
-        style={
-          Array [
-            Object {
-              "color": undefined,
-              "fontSize": 12,
-            },
-            Array [
-              Object {
-                "fontSize": 47.14285714285714,
-              },
-              undefined,
-              Object {
-                "color": "#F38337",
-              },
-            ],
-            Object {
-              "fontFamily": "Entypo",
-              "fontStyle": "normal",
-              "fontWeight": "normal",
-            },
-            Object {},
-          ]
-        }
-      >
-        
-      </Text>
-    </View>
-  </View>
-  <RCTScrollView
-    ItemSeparatorComponent={[Function]}
-    ListHeaderComponent={[Function]}
-    ListHeaderComponentStyle={
-      Object {
-        "borderBottomColor": "#3A2671",
-        "borderBottomWidth": 2,
-      }
-    }
-    contentContainerStyle={
-      Object {
-        "paddingHorizontal": 34.285714285714285,
-      }
-    }
-    data={
-      Array [
-        Object {
-          "bleedingLength": 5,
-          "cycleLength": 31,
-          "date": "2022-07-01",
-        },
-        Object {
-          "bleedingLength": 5,
-          "cycleLength": 31,
-          "date": "2022-06-01",
-        },
-      ]
-    }
-    getItem={[Function]}
-    getItemCount={[Function]}
-    keyExtractor={[Function]}
-    onContentSizeChange={[Function]}
-    onLayout={[Function]}
-    onMomentumScrollBegin={[Function]}
-    onMomentumScrollEnd={[Function]}
-    onScroll={[Function]}
-    onScrollBeginDrag={[Function]}
-    onScrollEndDrag={[Function]}
-    removeClippedSubviews={false}
-    renderItem={[Function]}
-    scrollEventThrottle={50}
-    stickyHeaderIndices={
-      Array [
-        0,
-      ]
-    }
-    viewabilityConfigCallbackPairs={Array []}
-  >
-    <View>
-      <View
-        onLayout={[Function]}
-        style={
-          Object {
-            "borderBottomColor": "#3A2671",
-            "borderBottomWidth": 2,
-          }
-        }
-      >
-        <View
-          style={
-            Object {
-              "backgroundColor": "#E9F2ED",
-              "flexDirection": "row",
-              "justifyContent": "space-between",
-              "paddingVertical": 8.571428571428571,
-            }
-          }
-        >
-          <View
-            style={
-              Object {
-                "flex": 3,
-                "justifyContent": "center",
-              }
-            }
-          >
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#555",
-                    "fontFamily": "Jost-Book",
-                    "fontSize": 34.285714285714285,
-                  },
-                  Object {
-                    "color": "#F38337",
-                    "fontFamily": "Jost-Bold",
-                    "fontSize": 27.857142857142858,
-                    "paddingVertical": 21.428571428571427,
-                    "textAlignVertical": "center",
-                    "textTransform": "uppercase",
-                  },
-                ]
-              }
-            >
-              cycle_start
-            </Text>
-          </View>
-          <View
-            style={
-              Object {
-                "flex": 2,
-                "justifyContent": "center",
-              }
-            }
-          >
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#555",
-                    "fontFamily": "Jost-Book",
-                    "fontSize": 34.285714285714285,
-                  },
-                  Object {
-                    "color": "#F38337",
-                    "fontFamily": "Jost-Bold",
-                    "fontSize": 27.857142857142858,
-                    "paddingVertical": 21.428571428571427,
-                    "textAlignVertical": "center",
-                    "textTransform": "uppercase",
-                  },
-                ]
-              }
-            >
-              cycle_length
-            </Text>
-          </View>
-          <View
-            style={
-              Object {
-                "flex": 2,
-                "justifyContent": "center",
-              }
-            }
-          >
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#555",
-                    "fontFamily": "Jost-Book",
-                    "fontSize": 34.285714285714285,
-                  },
-                  Object {
-                    "color": "#F38337",
-                    "fontFamily": "Jost-Bold",
-                    "fontSize": 27.857142857142858,
-                    "paddingVertical": 21.428571428571427,
-                    "textAlignVertical": "center",
-                    "textTransform": "uppercase",
-                  },
-                ]
-              }
-            >
-              bleeding
-            </Text>
-          </View>
-        </View>
-      </View>
-      <View
-        onLayout={[Function]}
-        style={null}
-      >
-        <View
-          style={
-            Object {
-              "backgroundColor": "#E9F2ED",
-              "flexDirection": "row",
-              "justifyContent": "space-between",
-              "paddingVertical": 8.571428571428571,
-            }
-          }
-        >
-          <View
-            style={
-              Object {
-                "flex": 3,
-                "justifyContent": "center",
-              }
-            }
-          >
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#555",
-                    "fontFamily": "Jost-Book",
-                    "fontSize": 34.285714285714285,
-                  },
-                  undefined,
-                ]
-              }
-            >
-              01. Jul 22
-            </Text>
-          </View>
-          <View
-            style={
-              Object {
-                "flex": 2,
-                "justifyContent": "center",
-              }
-            }
-          >
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#555",
-                    "fontFamily": "Jost-Book",
-                    "fontSize": 34.285714285714285,
-                  },
-                  undefined,
-                ]
-              }
-            >
-              day{"count":31}
-            </Text>
-          </View>
-          <View
-            style={
-              Object {
-                "flex": 2,
-                "justifyContent": "center",
-              }
-            }
-          >
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#555",
-                    "fontFamily": "Jost-Book",
-                    "fontSize": 34.285714285714285,
-                  },
-                  undefined,
-                ]
-              }
-            >
-              day{"count":5}
-            </Text>
-          </View>
-        </View>
-        <View
-          style={
-            Object {
-              "backgroundColor": "#888",
-              "height": 1,
-              "width": "100%",
-            }
-          }
-        />
-      </View>
-      <View
-        onLayout={[Function]}
-        style={null}
-      >
-        <View
-          style={
-            Object {
-              "backgroundColor": "#E9F2ED",
-              "flexDirection": "row",
-              "justifyContent": "space-between",
-              "paddingVertical": 8.571428571428571,
-            }
-          }
-        >
-          <View
-            style={
-              Object {
-                "flex": 3,
-                "justifyContent": "center",
-              }
-            }
-          >
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#555",
-                    "fontFamily": "Jost-Book",
-                    "fontSize": 34.285714285714285,
-                  },
-                  undefined,
-                ]
-              }
-            >
-              01. Jun 22
-            </Text>
-          </View>
-          <View
-            style={
-              Object {
-                "flex": 2,
-                "justifyContent": "center",
-              }
-            }
-          >
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#555",
-                    "fontFamily": "Jost-Book",
-                    "fontSize": 34.285714285714285,
-                  },
-                  undefined,
-                ]
-              }
-            >
-              day{"count":31}
-            </Text>
-          </View>
-          <View
-            style={
-              Object {
-                "flex": 2,
-                "justifyContent": "center",
-              }
-            }
-          >
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#555",
-                    "fontFamily": "Jost-Book",
-                    "fontSize": 34.285714285714285,
-                  },
-                  undefined,
-                ]
-              }
-            >
-              day{"count":5}
-            </Text>
-          </View>
-        </View>
-      </View>
-    </View>
-  </RCTScrollView>
-</View>
-`;
-
-exports[`StatsTable screen when provided no data, renders nothing 1`] = `null`;
-
-exports[`StatsTable screen when provided null, renders nothing 1`] = `null`;
-
-exports[`StatsTable screen when provided undefined, renders nothing 1`] = `null`;

test/components/stats.spec.js

@@ -1,58 +0,0 @@
-import React from 'react'
-import { fireEvent, render } from '@testing-library/react-native'
-
-import Stats from '../../components/stats'
-
-jest.mock('../../components/common/AppHelp', () => 'AppHelp')
-jest.mock('../../components/common/StatsOverview', () => 'StatsOverview')
-jest.mock('../../components/common/StatsTable', () => 'StatsTable')
-
-const mockGetAllCycleLengths = jest
-  .fn()
-  .mockImplementationOnce(() => [])
-  .mockImplementationOnce(() => [30, 31, 30])
-  .mockImplementationOnce(() => null)
-  .mockImplementationOnce(() => undefined)
-  .mockImplementationOnce(() => [30, 31, 30])
-
-jest.mock('../../lib/cycle', () => ({
-  __esModule: true,
-  default: () => ({
-    getAllCycleLengths: mockGetAllCycleLengths,
-  }),
-}))
-
-describe('Stats screen', () => {
-  test('when provided no data, renders no_data text', async () => {
-    const { toJSON } = render(<Stats />)
-
-    expect(toJSON()).toMatchSnapshot()
-  })
-
-  test('when provided data, renders stats', async () => {
-    const { toJSON } = render(<Stats />)
-
-    expect(toJSON()).toMatchSnapshot()
-  })
-
-  test('when provided null, renders no_data text', async () => {
-    const { toJSON } = render(<Stats />)
-
-    expect(toJSON()).toMatchSnapshot()
-  })
-
-  test('when provided undefined, renders no_data text', async () => {
-    const { toJSON } = render(<Stats />)
-
-    expect(toJSON()).toMatchSnapshot()
-  })
-
-  test('when button is clicked, StatsTable is rendered', async () => {
-    const { getByText, findByTestId } = render(<Stats />)
-    const button = getByText('show_stats')
-
-    fireEvent(button, 'click')
-
-    await expect(findByTestId('statsTable')).toBeTruthy()
-  })
-})

test/file-mock.js

@@ -1 +0,0 @@
-module.exports = 123

test/jest-setup.js

@@ -1,8 +0,0 @@
-// Import Jest Native matchers
-import '@testing-library/jest-native/extend-expect'
-
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (str, options) => str + (options ? JSON.stringify(options) : ''),
-  }),
-}))