Merge branch '67-implement-mucus' into 'master'

Resolve "implement mucus"

Closes #67

See merge request bloodyhealth/drip!22

components/cycle-day/action-buttons.js

@@ -24,7 +24,7 @@ export default function (showView) {
           saveAction()
           showView('dayView')
         },
-        disabled: saveDisabled
+        disabledCondition: saveDisabled
       }
     ]
 

components/cycle-day/cycle-day-overview.js

@@ -5,7 +5,12 @@ import {
   Text
 } from 'react-native'
 import styles from '../../styles'
-import { bleeding as labels} from './labels/labels'
+import {
+  bleeding as bleedingLabels,
+  mucusFeeling as feelingLabels,
+  mucusTexture as textureLabels,
+  mucusNFP as computeSensiplanMucusLabels,
+} from './labels/labels'
 import cycleDayModule from '../../lib/get-cycle-day-number'
 import { bleedingDaysSortedByDate } from '../../db'
 
@@ -39,7 +44,7 @@ export default class DayView extends Component {
     const bleedingValue = this.cycleDay.bleeding && this.cycleDay.bleeding.value
     let bleedingLabel
     if (typeof bleedingValue === 'number') {
-      bleedingLabel = `${labels[bleedingValue]}`
+      bleedingLabel = `${bleedingLabels[bleedingValue]}`
       if (this.cycleDay.bleeding.exclude) bleedingLabel = "( " + bleedingLabel + " )"
     } else {
       bleedingLabel = 'edit'
@@ -55,6 +60,17 @@ export default class DayView extends Component {
       temperatureLabel = 'edit'
     }
 
+    const mucusFeelingValue = this.cycleDay.mucus && this.cycleDay.mucus.feeling
+    const mucusTextureValue = this.cycleDay.mucus && this.cycleDay.mucus.texture
+    const mucusComputedValue = this.cycleDay.mucus && this.cycleDay.mucus.computedNfp
+    let mucusLabel
+    if (typeof mucusFeelingValue === 'number' && typeof mucusTextureValue === 'number') {
+      mucusLabel = `${feelingLabels[mucusFeelingValue]} + ${textureLabels[mucusTextureValue]} ( ${computeSensiplanMucusLabels[mucusComputedValue]} )`
+      if (this.cycleDay.mucus.exclude) mucusLabel = "( " + mucusLabel + " )"
+    } else {
+      mucusLabel = 'edit'
+    }
+
     return (
       <View style={styles.symptomEditView}>
         <View style={styles.symptomViewRowInline}>
@@ -75,7 +91,16 @@ export default class DayView extends Component {
             </Button>
           </View>
         </View>
+        <View style={ styles.symptomViewRowInline }>
+          <Text style={styles.symptomDayView}>Mucus</Text>
+          <View style={ styles.symptomEditButton }>
+            <Button
+              onPress={() => this.showView('mucusEditView')}
+              title={mucusLabel}>
+            </Button>
+          </View>
+        </View>
       </View >
     )
   }
-}
+}

components/cycle-day/index.js

@@ -7,6 +7,7 @@ import cycleDayModule from '../../lib/get-cycle-day-number'
 import DayView from './cycle-day-overview'
 import BleedingEditView from './symptoms/bleeding'
 import TemperatureEditView from './symptoms/temperature'
+import MucusEditView from './symptoms/mucus'
 import { formatDateForViewHeader } from './labels/format'
 import styles from '../../styles'
 import actionButtonModule from './action-buttons'
@@ -45,11 +46,12 @@ export default class Day extends Component {
           {
             { dayView: <DayView cycleDay={this.cycleDay} showView={this.showView} />,
               bleedingEditView: <BleedingEditView cycleDay={this.cycleDay} makeActionButtons={this.makeActionButtons}/>,
-              temperatureEditView: <TemperatureEditView cycleDay={this.cycleDay} makeActionButtons={this.makeActionButtons}/>
+              temperatureEditView: <TemperatureEditView cycleDay={this.cycleDay} makeActionButtons={this.makeActionButtons}/>,
+              mucusEditView: <MucusEditView cycleDay={this.cycleDay} makeActionButtons={this.makeActionButtons}/>
             }[this.state.visibleComponent]
           }
         </View >
       </View >
     )
   }
-}
+}

components/cycle-day/labels/labels.js

@@ -1,5 +1,11 @@
 const bleeding = ['spotting', 'light', 'medium', 'heavy']
+const mucusFeeling = ['dry', 'nothing', 'wet', 'slippery']
+const mucusTexture = ['nothing', 'creamy', 'egg white']
+const mucusNFP = ['t', 'Ø', 'f', 'S', '+S']
 
 export {
-  bleeding
+  bleeding,
-}
+  mucusFeeling,
+  mucusTexture,
+  mucusNFP
+}

components/cycle-day/symptoms/mucus.js

@@ -0,0 +1,109 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Text,
+  Switch
+} from 'react-native'
+import RadioForm from 'react-native-simple-radio-button'
+import styles from '../../../styles'
+import { saveSymptom } from '../../../db'
+import {
+  mucusFeeling as feelingLabels,
+  mucusTexture as textureLabels
+} from '../labels/labels'
+import computeSensiplanValue from '../../../lib/sensiplan-mucus'
+
+
+export default class Mucus extends Component {
+  constructor(props) {
+    super(props)
+    this.cycleDay = props.cycleDay
+    this.makeActionButtons = props.makeActionButtons
+    this.state = {
+      exclude: this.cycleDay.mucus ? this.cycleDay.mucus.exclude : false
+    }
+
+    this.state.currentFeelingValue = this.cycleDay.mucus && this.cycleDay.mucus.feeling
+    if (typeof this.state.currentFeelingValue !== 'number') {
+      this.state.currentFeelingValue = -1
+    }
+
+    this.state.currentTextureValue = this.cycleDay.mucus && this.cycleDay.mucus.texture
+    if (typeof this.state.currentTextureValue !== 'number') {
+      this.state.currentTextureValue = -1
+    }
+  }
+
+  render() {
+    const mucusFeelingRadioProps = [
+      {label: feelingLabels[0], value: 0 },
+      {label: feelingLabels[1], value: 1 },
+      {label: feelingLabels[2], value: 2 },
+      {label: feelingLabels[3], value: 3 }
+    ]
+    const mucusTextureRadioProps = [
+      {label: textureLabels[0], value: 0 },
+      {label: textureLabels[1], value: 1 },
+      {label: textureLabels[2], value: 2 }
+    ]
+    return(
+      <View style={ styles.symptomEditView }>
+        <Text style={styles.symptomDayView}>Mucus</Text>
+        <Text style={styles.symptomDayView}>Feeling</Text>
+        <View style={styles.radioButtonRow}>
+          <RadioForm
+            radio_props={mucusFeelingRadioProps}
+            initial={this.state.currentFeelingValue}
+            formHorizontal={true}
+            labelHorizontal={false}
+            labelStyle={styles.radioButton}
+            onPress={(itemValue) => {
+              this.setState({ currentFeelingValue: itemValue })
+            }}
+          />
+        </View>
+        <Text style={styles.symptomDayView}>Texture</Text>
+        <View style={styles.radioButtonRow}>
+          <RadioForm
+            radio_props={mucusTextureRadioProps}
+            initial={this.state.currentTextureValue}
+            formHorizontal={true}
+            labelHorizontal={false}
+            labelStyle={styles.radioButton}
+            onPress={(itemValue) => {
+              this.setState({ currentTextureValue: itemValue })
+            }}
+          />
+        </View>
+        <View style={styles.symptomViewRowInline}>
+          <Text style={styles.symptomDayView}>Exclude</Text>
+          <Switch
+            onValueChange={(val) => {
+              this.setState({ exclude: val })
+            }}
+            value={this.state.exclude}
+          />
+        </View>
+
+        <View style={styles.actionButtonRow}>
+          {this.makeActionButtons(
+            {
+              symptom: 'mucus',
+              cycleDay: this.cycleDay,
+              saveAction: () => {
+                saveSymptom('mucus', this.cycleDay, {
+                  feeling: this.state.currentFeelingValue,
+                  texture: this.state.currentTextureValue,
+                  computedNfp: computeSensiplanValue(this.state.currentFeelingValue, this.state.currentTextureValue),
+                  exclude: this.state.exclude
+                })
+              },
+              saveDisabled: this.state.currentFeelingValue === -1 || this.state.currentTextureValue === -1
+            }
+          )}
+        </View>
+
+      </View>
+    )
+  }
+}

db.js

@@ -18,6 +18,16 @@ const BleedingSchema = {
   }
 }
 
+const MucusSchema = {
+  name: 'Mucus',
+  properties: {
+    feeling: 'int',
+    texture: 'int',
+    computedNfp: 'int',
+    exclude: 'bool'
+  }
+}
+
 const CycleDaySchema = {
   name: 'CycleDay',
   primaryKey: 'date',
@@ -30,6 +40,10 @@ const CycleDaySchema = {
     bleeding: {
       type: 'Bleeding',
       optional: true
+    },
+    mucus: {
+      type: 'Mucus',
+      optional: true
     }
   }
 }
@@ -38,7 +52,8 @@ const db = new Realm({
   schema: [
     CycleDaySchema,
     TemperatureSchema,
-    BleedingSchema
+    BleedingSchema,
+    MucusSchema
   ],
   // we only want this in dev mode
   deleteRealmIfMigrationNeeded: true

lib/sensiplan-mucus.js

@@ -0,0 +1,16 @@
+export default function (feeling, texture) {
+  const feelingMapping = {
+    0: 0,
+    1: 1,
+    2: 2,
+    3: 4
+  }
+  const textureMapping = {
+    0: 0,
+    1: 3,
+    2: 4
+  }
+  const nfpFeelingValue = feelingMapping[feeling]
+  const nfpTextureValue = textureMapping[texture]
+  return Math.max(nfpFeelingValue, nfpTextureValue)
+}

test/sensiplan-mucus.spec.js

@@ -0,0 +1,80 @@
+import chai from 'chai'
+import dirtyChai from 'dirty-chai'
+
+const expect = chai.expect
+chai.use(dirtyChai)
+
+import getSensiplanMucus from '../lib/sensiplan-mucus'
+
+describe.only('getSensiplanMucus', () => {
+
+  describe('results in t for:', () => {
+    it('dry feeling and no texture', function () {
+      const sensiplanValue = getSensiplanMucus(0, 0)
+      expect(sensiplanValue).to.eql(0)
+    })
+  })
+
+  describe('results in Ø for:', () => {
+    it('no feeling and no texture', function () {
+      const sensiplanValue = getSensiplanMucus(1, 0)
+      expect(sensiplanValue).to.eql(1)
+    })
+  })
+
+  describe('results in f for:', () => {
+    it('wet feeling and no texture', function () {
+      const sensiplanValue = getSensiplanMucus(2, 0)
+      expect(sensiplanValue).to.eql(2)
+    })
+  })
+
+  describe('results in S for:', () => {
+    it('dry feeling and creamy texture', function () {
+      const sensiplanValue = getSensiplanMucus(0, 1)
+      expect(sensiplanValue).to.eql(3)
+    })
+
+    it('no feeling and creamy texture', function () {
+      const sensiplanValue = getSensiplanMucus(1, 1)
+      expect(sensiplanValue).to.eql(3)
+    })
+
+    it('wet feeling and creamy texture', function () {
+      const sensiplanValue = getSensiplanMucus(2, 1)
+      expect(sensiplanValue).to.eql(3)
+    })
+  })
+
+  describe('results in +S for:', () => {
+    it('dry feeling and egg white texture', function () {
+      const sensiplanValue = getSensiplanMucus(0, 2)
+      expect(sensiplanValue).to.eql(4)
+    })
+
+    it('no feeling and egg white texture', function () {
+      const sensiplanValue = getSensiplanMucus(1, 2)
+      expect(sensiplanValue).to.eql(4)
+    })
+
+    it('wet feeling and egg white texture', function () {
+      const sensiplanValue = getSensiplanMucus(2, 2)
+      expect(sensiplanValue).to.eql(4)
+    })
+
+    it('slippery feeling and egg white texture', function () {
+      const sensiplanValue = getSensiplanMucus(3, 2)
+      expect(sensiplanValue).to.eql(4)
+    })
+
+    it('slippery feeling and creamy texture', function () {
+      const sensiplanValue = getSensiplanMucus(3, 1)
+      expect(sensiplanValue).to.eql(4)
+    })
+
+    it('slippery feeling and no texture', function () {
+      const sensiplanValue = getSensiplanMucus(3, 0)
+      expect(sensiplanValue).to.eql(4)
+    })
+  })
+})