Rename calendar component

calendar.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react'
+import { View } from 'react-native'
+import { Calendar } from 'react-native-calendars'
+import * as styles from './styles'
+import { getOrCreateCycleDay, bleedingDaysSortedByDate } from './db'
+
+export default class DatePickView extends Component {
+  constructor(props) {
+    super(props)
+    this.state = { bleedingDaysInCalFormat: getBleedingDaysInCalFormat(bleedingDaysSortedByDate) }
+
+    // so we rerender the calendar when there are new bleeding days
+    bleedingDaysSortedByDate.addListener(() => {
+      this.setState({ bleedingDaysInCalFormat: getBleedingDaysInCalFormat(bleedingDaysSortedByDate) })
+    })
+  }
+
+  passDateToDayView(result) {
+    // TODO this also has date as a string, perhaps useful for LocalDateFormat
+    const date = new Date(result.year, result.month - 1, result.day)
+    const cycleDay = getOrCreateCycleDay(date)
+    const navigate = this.props.navigation.navigate
+    navigate('dayView', { cycleDay })
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Calendar
+          onDayPress={ this.passDateToDayView.bind(this) }
+          markedDates = { this.state.bleedingDaysInCalFormat }
+          markingType = {'period'}
+        />
+      </View>
+    )
+  }
+}
+
+function getBleedingDaysInCalFormat(bleedingDaysSortedByDate) {
+  return bleedingDaysSortedByDate.reduce((acc, day) => {
+    const dateString = day.date.toISOString().slice(0, 10)
+    acc[dateString] = { startingDay: true, endingDay: true, color: 'red' }
+    return acc
+  }, {})
+}