Replace datepicker with calendar

bleeding.js

@@ -11,6 +11,7 @@ import { saveBleeding } from './db'
 import { formatDateForViewHeader } from './format'
 import { bleeding as labels } from './labels'
 import getCycleDay from './get-cycle-day'
+import { bleedingDaysSortedByDate } from './db'
 
 export default class Bleeding extends Component {
   constructor(props) {

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

db.js

@@ -4,6 +4,7 @@ import { v4 as uuid } from 'uuid'
 let db
 let cycleDaysSortedbyTempValueView = []
 let cycleDaysSortedbyDate = []
+let bleedingDaysSortedByDate = []
 
 const TemperatureSchema = {
   name: 'Temperature',
@@ -52,6 +53,7 @@ async function openDatabase() {
   // because I was too layz to make a scroll view
   cycleDaysSortedbyTempValueView = db.objects('CycleDay').filtered('temperature != null').sorted('temperature.value', true)
   cycleDaysSortedbyDate = db.objects('CycleDay').sorted('date', true)
+  bleedingDaysSortedByDate = db.objects('CycleDay').filtered('bleeding != null').sorted('date', true)
 }
 
 function saveTemperature(date, temperature) {
@@ -89,5 +91,6 @@ export {
   openDatabase,
   saveTemperature,
   saveBleeding,
-  getOrCreateCycleDay
+  getOrCreateCycleDay,
+  bleedingDaysSortedByDate
 }

package.json

@@ -17,6 +17,7 @@
     "moment": "^2.22.1",
     "react": "16.3.1",
     "react-native": "0.55.4",
+    "react-native-calendars": "^1.19.3",
     "react-native-simple-radio-button": "^2.7.1",
     "react-navigation": "^2.0.4",
     "realm": "^2.7.1",