Add more data to stats

components/common/StatsOverview.js

@@ -6,14 +6,12 @@ import AppText from './app-text'
 
 import { Sizes, Spacing, Typography } from '../../styles'
 
-const Table = ({ tableContent }) => {
-  return tableContent.map((rowContent, i) => (
-    <Row key={i} rowContent={rowContent} />
-  ))
+const StatsOverview = ({ data }) => {
+  return data.map((rowContent, i) => <Row key={i} rowContent={rowContent} />)
 }
 
-Table.propTypes = {
-  tableContent: PropTypes.array.isRequired,
+StatsOverview.propTypes = {
+  data: PropTypes.array.isRequired,
 }
 
 const Row = ({ rowContent }) => {
@@ -65,18 +63,11 @@ const styles = StyleSheet.create({
   },
   cellLeft: {
     alignItems: 'flex-end',
-    flex: 5,
+    flex: 3,
     justifyContent: 'center',
   },
-  cellRight: {
-    flex: 5,
-    justifyContent: 'center',
-  },
-  row: {
-    flexDirection: 'row',
-    marginBottom: Spacing.tiny,
-    marginLeft: Spacing.tiny,
-  },
+  cellRight: { flex: 5 },
+  row: { flexDirection: 'row' },
 })
 
-export default Table
+export default StatsOverview

components/common/StatsTable.js

@@ -0,0 +1,107 @@
+import React from 'react'
+import { FlatList, StyleSheet, View } from 'react-native'
+import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
+
+import AppText from './app-text'
+
+import cycleModule from '../../lib/cycle'
+import { Spacing, Typography, Colors } from '../../styles'
+import { humanizeDate } from '../helpers/format-date'
+
+const Item = ({ data }) => {
+  const { t } = useTranslation(null, { keyPrefix: 'plurals' })
+
+  if (!data) return false
+
+  const { date, cycleLength, bleedingLength } = data
+
+  return (
+    <View style={styles.row}>
+      <View style={styles.accentCell}>
+        <AppText>{humanizeDate(date)}</AppText>
+      </View>
+      <View style={styles.cell}>
+        <AppText>{t('day', { count: cycleLength })}</AppText>
+      </View>
+      <View style={styles.cell}>
+        <AppText>{t('day', { count: bleedingLength })}</AppText>
+      </View>
+    </View>
+  )
+}
+
+Item.propTypes = {
+  data: PropTypes.object.isRequired,
+}
+
+const StatsTable = () => {
+  const renderItem = ({ item }) => <Item data={item} />
+  const data = cycleModule().getStats()
+
+  if (!data || data.length === 0) return false
+
+  return (
+    <FlatList
+      data={data}
+      renderItem={renderItem}
+      keyExtractor={(item) => item.date}
+      ItemSeparatorComponent={ItemDivider}
+      ListHeaderComponent={FlatListHeader}
+      ListHeaderComponentStyle={styles.headerDivider}
+      stickyHeaderIndices={[0]}
+      contentContainerStyle={styles.container}
+    />
+  )
+}
+
+const ItemDivider = () => <View style={styles.divider} />
+
+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({
+  divider: {
+    height: 1,
+    width: '100%',
+    backgroundColor: Colors.grey,
+  },
+  header: {
+    ...Typography.accentOrange,
+    paddingVertical: Spacing.small,
+  },
+  headerDivider: {
+    borderBottomColor: Colors.purple,
+    borderBottomWidth: 2,
+  },
+  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/common/app-page.js

@@ -4,7 +4,7 @@ import { ScrollView, StyleSheet, View } from 'react-native'
 
 import AppText from '../common/app-text'
 
-import { Colors, Typography } from '../../styles'
+import { Colors, Containers, Typography } from '../../styles'
 
 const AppPage = ({
   children,
@@ -35,10 +35,7 @@ AppPage.propTypes = {
 }
 
 const styles = StyleSheet.create({
-  container: {
-    backgroundColor: Colors.turquoiseLight,
-    flex: 1,
-  },
+  container: { ...Containers.pageContainer },
   scrollView: {
     backgroundColor: Colors.turquoiseLight,
     flexGrow: 1,

components/common/segment.js

@@ -4,7 +4,7 @@ import { StyleSheet, View } from 'react-native'
 
 import AppText from './app-text'
 
-import { Colors, Spacing, Typography } from '../../styles'
+import { Colors, Containers, Spacing, Typography } from '../../styles'
 
 const Segment = ({ children, last, title }) => {
   const containerStyle = last ? styles.containerLast : styles.container
@@ -25,21 +25,16 @@ Segment.propTypes = {
   title: PropTypes.string,
 }
 
-const segmentContainer = {
-  marginHorizontal: Spacing.base,
-  marginBottom: Spacing.base,
-}
-
 const styles = StyleSheet.create({
   container: {
     borderStyle: 'solid',
     borderBottomWidth: 1,
     borderBottomColor: Colors.greyLight,
     paddingBottom: Spacing.base,
-    ...segmentContainer,
+    ...Containers.segmentContainer,
   },
   containerLast: {
-    ...segmentContainer,
+    ...Containers.segmentContainer,
   },
   title: {
     ...Typography.subtitle,