[WIP] first draft implementing mucus

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

@@ -5,7 +5,10 @@ import {
   Text
 } from 'react-native'
 import styles from '../../styles'
-import { bleeding as labels} from './labels/labels'
+import {
+  bleedingLabels as bleedingLabels,
+  mucusFeeling as feelingLabels
+} from './labels/labels'
 import cycleDayModule from '../../lib/get-cycle-day-number'
 import { bleedingDaysSortedByDate } from '../../db'
 
@@ -39,7 +42,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 +58,15 @@ export default class DayView extends Component {
       temperatureLabel = 'edit'
     }
 
+    const mucusFeelingValue = this.cycleDay.mucus && this.cycleDay.mucus.value
+    let mucusFeelingLabel
+    if (typeof mucusFeelingValue === 'number') {
+      mucusFeelingLabel = `${feelingLabels[mucusFeelingValue]}`
+      if (this.cycleDay.mucus.exclude) mucusFeelingLabel = "( " + mucusFeelingLabel + " )"
+    } else {
+      mucusFeelingLabel = 'edit'
+    }
+
     return (
       <View style={styles.symptomEditView}>
         <View style={styles.symptomViewRowInline}>
@@ -75,7 +87,18 @@ export default class DayView extends Component {
             </Button>
           </View>
         </View>
+        <View style={ styles.itemsInRowSeparatedView }>
+          <View style={{flex: 1}}>
+            <Text style={styles.symptomDayView}>Mucus</Text>
+          </View>
+          <View style={ styles.singleButtonView }>
+            <Button
+              onPress={() => this.showView('mucusEditView')}
+              title={mucusFeelingLabel}>
+            </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'
@@ -44,12 +45,13 @@ export default class Day extends Component {
         <View>
           {
             { dayView: <DayView cycleDay={this.cycleDay} showView={this.showView} />,
-              bleedingEditView: <BleedingEditView cycleDay={this.cycleDay} makeActionButtons={this.makeActionButtons}/>,
-              temperatureEditView: <TemperatureEditView cycleDay={this.cycleDay} makeActionButtons={this.makeActionButtons}/>
+              bleedingEditView: <BleedingEditView cycleDay={this.cycleDay} showView={this.showView}/>,
+              temperatureEditView: <TemperatureEditView cycleDay={this.cycleDay} showView={this.showView}/>,
+              mucusEditView: <MucusEditView cycleDay={this.cycleDay} showView={this.showView}/>
             }[this.state.visibleComponent]
           }
         </View >
       </View >
     )
   }
-}
+}

components/cycle-day/labels/labels.js

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

components/cycle-day/symptoms/mucus.js

@@ -0,0 +1,107 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Button,
+  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'
+
+export default class Mucus extends Component {
+  constructor(props) {
+    super(props)
+    this.cycleDay = props.cycleDay
+    this.showView = props.showView
+
+    this.currentFeelingValue = this.cycleDay.mucus && this.cycleDay.mucus.feeling
+    if (typeof this.currentFeelingValue !== 'number') {
+      this.currentFeelingValue = -1
+    }
+
+    this.currentTextureValue = this.cycleDay.mucus && this.cycleDay.mucus.texture
+    if (typeof this.currentTextureValue !== 'number') {
+      this.currentTextureValue = -1
+    }
+    this.state = {
+      exclude: this.cycleDay.mucus ? this.cycleDay.mucus.exclude : false
+    }
+  }
+
+  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.currentValue}
+            formHorizontal={true}
+            labelHorizontal={false}
+            labelStyle={styles.radioButton}
+            onPress={(itemValue) => {
+              this.currentFeelingValue = itemValue
+            }}
+          />
+        </View>
+        <Text style={styles.symptomDayView}>Texture</Text>
+        <View style={styles.radioButtonRow}>
+          <RadioForm
+            radio_props={mucusTextureRadioProps}
+            initial={this.currentTextureValue}
+            formHorizontal={true}
+            labelHorizontal={false}
+            labelStyle={styles.radioButton}
+            onPress={(itemValue) => {
+              this.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.currentFeelingValue,
+                  texture: this.currentTextureValue,
+                  exclude: this.state.exclude
+                })
+              },
+              saveDisabled: this.state.currentFeelingValue === -1 || this.state.currentTextureValue === -1
+            }
+          )}
+        </View>
+
+      </View>
+    )
+  }
+}

db.js

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