Merge branch '12-make-calendar-view' into 'master'

Resolve "Make calendar view"

Closes #12

See merge request bloodyhealth/drip!8

app.js

@@ -1,7 +1,7 @@
 import { createStackNavigator } from 'react-navigation'
 import Home from './home'
 import TemperatureList from './list'
-import Datepicker from './datepicker'
+import Calendar from './calendar'
 import DayView from './day-view'
 import Bleeding from './bleeding'
 
@@ -12,7 +12,7 @@ YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated'])
 export default createStackNavigator({
   home: { screen: Home },
   temperatureList: { screen: TemperatureList },
-  datepicker: { screen: Datepicker },
+  calendar: { screen: Calendar },
   dayView: { screen: DayView },
   bleeding: { screen: Bleeding }
 })

calendar.js

@@ -0,0 +1,51 @@
+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) }
+
+    bleedingDaysSortedByDate.addListener(setStateWithCalendarFormattedDays.bind(this))
+  }
+
+  componentWillUnmount() {
+    bleedingDaysSortedByDate.removeListener(setStateWithCalendarFormattedDays)
+  }
+
+  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) {
+  const shadesOfRed = ['#ffbaba', '#ff7b7b', '#ff5252', '#ff0000']
+  return bleedingDaysSortedByDate.reduce((acc, day) => {
+    const dateString = day.date.toISOString().slice(0, 10)
+    acc[dateString] = { startingDay: true, endingDay: true, color: shadesOfRed[day.bleeding.value] }
+    return acc
+  }, {})
+}
+
+function setStateWithCalendarFormattedDays() {
+  this.setState({ bleedingDaysInCalFormat: getBleedingDaysInCalFormat(bleedingDaysSortedByDate) })
+}

datepicker.js

@@ -1,33 +0,0 @@
-import React, { Component } from 'react'
-import {
-  View, Button, DatePickerAndroid
-} from 'react-native'
-import * as styles from './styles'
-import { getOrCreateCycleDay } 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 })
-    }
-  }
-
-  render() {
-    return (
-      <View style={styles.container}>
-        <Button onPress={ this.pickDate.bind(this) } title="pick a date" />
-      </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
 }

home.js

@@ -22,7 +22,7 @@ export default class Home extends Component {
           title="Edit symptoms for today">
         </Button>
         <Button
-          onPress={() => navigate('datepicker')}
+          onPress={() => navigate('calendar')}
           title="Go to calendar">
         </Button>
       </View>

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",