first exploration of place of feature and how to access data

components/stats/SymptomOccurance.js

@@ -0,0 +1,81 @@
+import React from 'react'
+import { FlatList, StyleSheet, View } from 'react-native'
+import PropTypes from 'prop-types'
+// import { useTranslation } from 'react-i18next'
+
+import AppModal from '../common/app-modal'
+import AppText from '../common/app-text'
+
+import symOccModule from '../../lib/sympto-occurance'
+import { Spacing, Typography, Colors } from '../../styles'
+
+// const { t } = useTranslation(null, { keyPrefix: 'stats' })
+
+const SymptomOccurance = ({ onClose }) => {
+  const data = symOccModule().getCycleStartsOfLastYear()
+  if (!data || data.length === 0) return false
+  console.log('cycle starts:', data)
+
+  return (
+    <AppModal onClose={onClose}>
+      <View>
+        <FlatList
+          data={data}
+          ListHeaderComponent={FlatListHeader}
+          contentContainerStyle={styles.container}
+        />
+      </View>
+    </AppModal>
+  )
+}
+
+SymptomOccurance.propTypes = {
+  onClose: PropTypes.func,
+}
+
+const FlatListHeader = () => (
+  <View style={styles.row}>
+    <View style={styles.accentCell}>
+      <AppText style={styles.header}>
+        {'When did you experience headaches in the last year?'}
+      </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: 'white',
+  },
+  cell: {
+    flex: 2,
+    justifyContent: 'center',
+  },
+  accentCell: {
+    flex: 3,
+    justifyContent: 'center',
+  },
+  container: {
+    minHeight: '40%',
+    minWidth: '95%',
+    paddingHorizontal: Spacing.base,
+  },
+})
+
+export default SymptomOccurance

components/stats/index.js

@@ -8,6 +8,7 @@ import Button from '../common/button'
 import Footnote from '../common/Footnote'
 import StatsOverview from './StatsOverview'
 import PeriodDetailsModal from './PeriodDetailsModal'
+import SymptomOccurance from './SymptomOccurance'
 
 import cycleModule from '../../lib/cycle'
 import { getCycleLengthStats as getCycleInfo } from '../../lib/cycle-length'
@@ -19,6 +20,8 @@ const image = require('../../assets/cycle-icon.png')
 
 const Stats = () => {
   const [isStatsVisible, setIsStatsVisible] = useState(false)
+  const [isSymptomOccuranceVisible, setIsSymptomOccuranceVisible] =
+    useState(false)
 
   const { t } = useTranslation(null, { keyPrefix: 'stats' })
 
@@ -83,6 +86,14 @@ const Stats = () => {
             {isStatsVisible && (
               <PeriodDetailsModal onClose={() => setIsStatsVisible(false)} />
             )}
+            <Button isCTA onPress={() => setIsSymptomOccuranceVisible(true)}>
+              {t('showSymptomOccurance')}
+            </Button>
+            {isSymptomOccuranceVisible && (
+              <SymptomOccurance
+                onClose={() => setIsSymptomOccuranceVisible(false)}
+              />
+            )}
             <Footnote>{t('footnote')}</Footnote>
           </>
         )}

i18n/en.json

@@ -156,7 +156,8 @@
       "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."
+    "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.",
+    "showSymptomOccurance": "Show details on headaches"
   },
   "plurals": {
     "day": "{{count}} day",

lib/sympto-occurance.js

@@ -0,0 +1,44 @@
+import * as joda from '@js-joda/core'
+const LocalDate = joda.LocalDate
+// const DAYS = joda.ChronoUnit.DAYS
+
+export default function config(opts) {
+  let cycleStartsSortedByDate
+
+  if (!opts) {
+    // we only want to require (and run) the db module
+    // when not running the tests
+    cycleStartsSortedByDate = require('../db').getCycleStartsSortedByDate()
+    // maxCycleLength = 45
+  } else {
+    cycleStartsSortedByDate = opts.cycleStartsSortedByDate || []
+    // maxCycleLength = opts.maxCycleLength || 99
+  }
+
+  function getCycleStartsOfLastYear() {
+    const today = LocalDate.parse(new Date().toISOString().slice(0, 10))
+    const firstRelevantCycleStart = today.minusYears(1)
+    const relevantCycles = cycleStartsSortedByDate.filter(({ date }) =>
+      LocalDate.parse(date).isAfter(firstRelevantCycleStart)
+    )
+    return relevantCycles.map(({ date }) => date)
+  }
+
+  function getTodayDate() {
+    return new Date().toISOString().slice(0, 10)
+  }
+
+  const getStats = () =>
+    cycleStartsSortedByDate.map((day, i) => {
+      const today = getTodayDate()
+      return {
+        date: today,
+        k: i,
+      }
+    })
+
+  return {
+    getCycleStartsOfLastYear,
+    getStats,
+  }
+}