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>
           </>
         )}