Add edit bleeding and persist it.

app.js

@@ -2,9 +2,13 @@ import { createStackNavigator } from 'react-navigation'
 import Home from './home'
 import TemperatureList from './list'
 import Datepicker from './datepicker'
+import DayView from './day-view'
+import Bleeding from './bleeding'
 
 export default createStackNavigator({
   home: { screen: Home },
   temperatureList: { screen: TemperatureList },
-  datepicker: { screen: Datepicker }
+  datepicker: { screen: Datepicker },
+  dayView: { screen: DayView },
+  bleeding: { screen: Bleeding }
 })

bleeding.js

@@ -0,0 +1,52 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Button,
+  Text,
+  Picker
+} from 'react-native'
+import styles from './styles'
+import { saveBleeding } from './db'
+import { formatDateForViewHeader } from './format'
+
+export default class Bleeding extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      cycleDay: props.navigation.state.params.cycleDay,
+      currentValue: null
+    }
+  }
+
+  // TODO display cycle day
+  render() {
+    const navigate = this.props.navigation.navigate
+    const day = this.state.cycleDay
+    return (
+      <View style={styles.container}>
+        <Text style={styles.welcome}>{formatDateForViewHeader(day.date)}</Text>
+        <Picker
+          selectedValue={this.state.currentValue}
+          style={{ height: 50, width: 100 }}
+          onValueChange={(itemValue) => {
+            this.setState({ currentValue: itemValue })
+          }}>
+          <Picker.Item label="spotting" value="1" />
+          <Picker.Item label="light" value="2" />
+          <Picker.Item label="medium" value="3" />
+          <Picker.Item label="heavy" value="4" />
+        </Picker>
+        <Button
+          onPress={() => {
+            saveBleeding(day, {
+              value: Number(this.state.currentValue),
+              exclude: false
+            })
+            navigate('dayView', { cycleDay: day })
+          }}
+          title="Save">
+        </Button>
+      </View>
+    )
+  }
+}

datepicker.js

@@ -2,8 +2,8 @@ import React, { Component } from 'react'
 import {
   View, Button, DatePickerAndroid
 } from 'react-native'
-import moment from 'moment'
 import * as styles from './styles'
+import { getOrCreateCycleDay } from './db'
 
 export default class DatePickView extends Component {
   constructor(props) {
@@ -15,12 +15,10 @@ export default class DatePickView extends Component {
       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
-      // continue here and actually make that view
+      navigate('dayView', { cycleDay })
-      navigate(
-        'dayView',
-        { date: moment(new Date(result.year, result.month, result.day)) }
-      )
     }
   }
 

day-view.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Button,
+  Text
+} from 'react-native'
+import styles from './styles'
+import { formatDateForViewHeader } from './format'
+
+export default class DayView extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      cycleDay: props.navigation.state.params.cycleDay
+    }
+  }
+
+  render() {
+    const navigate = this.props.navigation.navigate
+    const day = this.state.cycleDay
+    return (
+      <View style={styles.container}>
+        <Text style={styles.welcome}>{formatDateForViewHeader(day.date)}</Text>
+        <Text style={styles.welcome}>{day.bleeding && day.bleeding.value}</Text>
+        <Button
+          onPress={() => navigate('bleeding', { cycleDay: day })}
+          title="Edit bleeding">
+        </Button>
+      </View >
+    )
+  }
+}

db.js

@@ -1,8 +1,10 @@
 import realm from 'realm'
+import moment from 'moment'
 import { v4 as uuid } from 'uuid'
 
 let db
 let cycleDaysSortedbyTempValueView = []
+let cycleDaysSortedbyDate = []
 
 const TemperatureSchema = {
   name: 'Temperature',
@@ -12,6 +14,14 @@ const TemperatureSchema = {
   }
 }
 
+const BleedingSchema = {
+  name: 'Bleeding',
+  properties: {
+    value: 'int',
+    exclude: 'bool'
+  }
+}
+
 const CycleDaySchema = {
   name: 'CycleDay',
   primaryKey: 'key',
@@ -21,6 +31,10 @@ const CycleDaySchema = {
     temperature: {
       type: 'Temperature',
       optional: true
+    },
+    bleeding: {
+      type: 'Bleeding',
+      optional: true
     }
   }
 }
@@ -29,7 +43,8 @@ async function openDatabase() {
   db = await realm.open({
     schema: [
       CycleDaySchema,
-      TemperatureSchema
+      TemperatureSchema,
+      BleedingSchema
     ],
     // we only want this in dev mode
     deleteRealmIfMigrationNeeded: true
@@ -37,9 +52,10 @@ async function openDatabase() {
   // just for testing purposes, the highest temperature will be topmost
   // because I was too layz to make a scroll view
   cycleDaysSortedbyTempValueView = db.objects('CycleDay').sorted('temperature.value', true)
+  cycleDaysSortedbyDate = db.objects('CycleDay').sorted('date', true)
 }
 
-async function saveTemperature(date, temperature) {
+function saveTemperature(date, temperature) {
   db.write(() => {
     const doc = {
       key: uuid(),
@@ -50,8 +66,29 @@ async function saveTemperature(date, temperature) {
   })
 }
 
+function saveBleeding(cycleDay, bleeding) {
+  db.write(() => {
+    cycleDay.bleeding = bleeding
+  })
+}
+
+function getOrCreateCycleDay(date) {
+  let result = Array.from(cycleDaysSortedbyDate.filtered('date = $0', date))[0]
+  if (!result) {
+    db.write(() => {
+      result = db.create('CycleDay', {
+        key: uuid(),
+        date
+      })
+    })
+  }
+  return result
+}
+
 export {
   cycleDaysSortedbyTempValueView,
   openDatabase,
-  saveTemperature
+  saveTemperature,
+  saveBleeding,
+  getOrCreateCycleDay
 }

format.js

@@ -0,0 +1,5 @@
+import moment from "moment"
+
+export function formatDateForViewHeader(date) {
+  return moment(date).format()
+}

package-lock.json

@@ -1989,9 +1989,9 @@
       }
     },
     "big-integer": {
-      "version": "1.6.28",
+      "version": "1.6.30",
-      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.28.tgz",
+      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.30.tgz",
-      "integrity": "sha512-OJT3rzgtsYca/5WmmEuFJDPMwROVh5SSjoEX9wIrpfbbWJ4KqRzShs8Cj6jWHaatBYAeWngBA+kmmrcHSklT1g=="
+      "integrity": "sha512-LGDF7k/8yjS+GTbfFRGiSdcPnIwcjM6kQ0lmbja3tKJzVMmqHmUFnTuUOm/Lt2KVQ3mAZVupf9KNcsew0QV8Kw=="
     },
     "bl": {
       "version": "1.2.2",