Merge branch '29-edit-bleeding-screen' into 'master'

Resolve "edit bleeding screen"

See merge request bloodyhealth/drip!6

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,78 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Button,
+  Text,
+  Picker,
+  Switch
+} from 'react-native'
+import styles from './styles'
+import { saveBleeding } from './db'
+import { formatDateForViewHeader } from './format'
+import { bleeding as labels } from './labels'
+import getCycleDay from './get-cycle-day'
+
+export default class Bleeding extends Component {
+  constructor(props) {
+    super(props)
+    const cycleDay = props.navigation.state.params.cycleDay
+    this.state = {
+      cycleDay,
+      currentValue: Number((cycleDay.bleeding && cycleDay.bleeding.value) || 0).toString(),
+      exclude: cycleDay.bleeding ? cycleDay.bleeding.exclude : false
+    }
+  }
+
+  // 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>
+        <Text>Cycle day {getCycleDay()}</Text>
+        <Text>Bleeding</Text>
+        <Picker
+          selectedValue={this.state.currentValue}
+          style={{ height: 50, width: 150 }}
+          onValueChange={(itemValue) => {
+            this.setState({ currentValue: itemValue })
+          }}>
+          <Picker.Item label={labels[0]} value="0" />
+          <Picker.Item label={labels[1]} value="1" />
+          <Picker.Item label={labels[2]} value="2" />
+          <Picker.Item label={labels[3]} value="3" />
+        </Picker>
+        <Text>Exclude</Text>
+        <Switch
+          onValueChange={(val) => {
+            this.setState({ exclude: val })
+          }}
+          value={this.state.exclude} />
+        <Button
+          onPress={() => {
+            navigate('dayView', { cycleDay: day })
+          }}
+          title="Cancel">
+        </Button>
+        <Button
+          onPress={() => {
+            saveBleeding(day)
+            navigate('dayView', { cycleDay: day })
+          }}
+          title="Delete entry">
+        </Button>
+        <Button
+          onPress={() => {
+            saveBleeding(day, {
+              value: Number(this.state.currentValue),
+              exclude: this.state.exclude
+            })
+            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,43 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Button,
+  Text
+} from 'react-native'
+import styles from './styles'
+import { formatDateForViewHeader } from './format'
+import { bleeding as labels} from './labels'
+import getCycleDay from './get-cycle-day'
+
+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
+    const bleedingValue = day.bleeding && day.bleeding.value
+    let bleedingLabel
+    if (typeof bleedingValue === 'number') {
+      bleedingLabel = `Bleeding: ${labels[bleedingValue]}`
+    } else {
+      bleedingLabel = ''
+    }
+
+    return (
+      <View style={styles.container}>
+        <Text style={styles.welcome}>{formatDateForViewHeader(day.date)}</Text>
+        <Text>Cycle day {getCycleDay()}</Text>
+        <Text style={styles.welcome}>{bleedingLabel}</Text>
+        <Button
+          onPress={() => navigate('bleeding', { cycleDay: day })}
+          title="Edit bleeding">
+        </Button>
+      </View >
+    )
+  }
+}

db.js

@@ -3,6 +3,7 @@ import { v4 as uuid } from 'uuid'
 
 let db
 let cycleDaysSortedbyTempValueView = []
+let cycleDaysSortedbyDate = []
 
 const TemperatureSchema = {
   name: 'Temperature',
@@ -12,6 +13,14 @@ const TemperatureSchema = {
   }
 }
 
+const BleedingSchema = {
+  name: 'Bleeding',
+  properties: {
+    value: 'int',
+    exclude: 'bool'
+  }
+}
+
 const CycleDaySchema = {
   name: 'CycleDay',
   primaryKey: 'key',
@@ -21,6 +30,10 @@ const CycleDaySchema = {
     temperature: {
       type: 'Temperature',
       optional: true
+    },
+    bleeding: {
+      type: 'Bleeding',
+      optional: true
     }
   }
 }
@@ -29,17 +42,19 @@ async function openDatabase() {
   db = await realm.open({
     schema: [
       CycleDaySchema,
-      TemperatureSchema
+      TemperatureSchema,
+      BleedingSchema
     ],
     // we only want this in dev mode
     deleteRealmIfMigrationNeeded: true
   })
   // 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)
+  cycleDaysSortedbyTempValueView = db.objects('CycleDay').filtered('temperature != null').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 +65,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('MMMM Do YYYY')
+}

get-cycle-day.js

@@ -0,0 +1 @@
+export default () => 6

home.js

@@ -5,6 +5,7 @@ import {
   Text
 } from 'react-native'
 import styles from './styles'
+import getCycleDay from './get-cycle-day'
 
 export default class Home extends Component {
   constructor(props) {
@@ -15,7 +16,7 @@ export default class Home extends Component {
     const navigate = this.props.navigation.navigate
     return (
       <View style={styles.container}>
-        <Text style={styles.welcome}>Welcome! Today is day 6 of your current cycle</Text>
+        <Text style={styles.welcome}>Welcome! Today is day {getCycleDay()} of your current cycle</Text>
         <Button
           onPress={() => navigate('temperatureList')}
           title="Edit symptoms for today">

labels.js

@@ -0,0 +1,5 @@
+const bleeding = ['spotting', 'light', 'medium', 'heavy']
+
+export {
+  bleeding
+}

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