Replace datepicker with calendar

datepicker.js

@@ -1,33 +1,47 @@
 import React, { Component } from 'react'
-import {
-  View, Button, DatePickerAndroid
-} from 'react-native'
+import { View } from 'react-native'
+import { Calendar } from 'react-native-calendars'
 import * as styles from './styles'
-import { getOrCreateCycleDay } from './db'
+import { getOrCreateCycleDay, bleedingDaysSortedByDate } from './db'
+
+
 
 export default class DatePickView extends Component {
   constructor(props) {
     super(props)
-  }
-
-  async pickDate() {
-    const result = await DatePickerAndroid.open({
-      date: new Date()
-    })
-    if (result.action !== DatePickerAndroid.dismissedAction) {
-      const date = new Date(result.year, result.month, result.day)
-      const cycleDay = getOrCreateCycleDay(date)
-      const navigate = this.props.navigation.navigate
-      navigate('dayView', { cycleDay })
+    this.state = {
+      cycleDays: 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 })
+  }
+
+  rerenderCalendar() {
+
+  }
+
   render() {
+    const bleedingDaysInCalFormat = bleedingDaysSortedByDate.reduce((acc, day) => {
+      const dateString = day.date.toISOString().slice(0, 10)
+      acc[dateString] = { startingDay: true, endingDay: true, color: 'red' }
+      return acc
+    }, {})
     return (
       <View style={styles.container}>
-        <Button onPress={ this.pickDate.bind(this) } title="pick a date" />
+        <Calendar
+          onDayPress={ this.passDateToDayView.bind(this) }
+          markedDates = { bleedingDaysInCalFormat }
+          markingType = {'period'}
+        />
       </View>
     )
   }
 }
 
+