From 2b5e6351f7c29d82f43dd050813b1b1a5eede464 Mon Sep 17 00:00:00 2001
From: emelko <ml.kochsiek@mailbox.org>
Date: Wed, 4 Jul 2018 13:03:23 +0200
Subject: [PATCH] [WIP] first draft implementing mucus
---
components/cycle-day/cycle-day-overview.js | 29 +++++-
components/cycle-day/index.js | 8 +-
components/cycle-day/labels/labels.js | 8 +-
components/cycle-day/symptoms/mucus.js | 107 +++++++++++++++++++++
db.js | 16 ++-
5 files changed, 159 insertions(+), 9 deletions(-)
create mode 100644 components/cycle-day/symptoms/mucus.js
diff --git a/components/cycle-day/cycle-day-overview.js b/components/cycle-day/cycle-day-overview.js
index 67415985..d4ea2cc2 100644
--- a/components/cycle-day/cycle-day-overview.js
+++ b/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 >
)
}
-}
\ No newline at end of file
+}
diff --git a/components/cycle-day/index.js b/components/cycle-day/index.js
index bcd84651..3d634664 100644
--- a/components/cycle-day/index.js
+++ b/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 >
)
}
-}
\ No newline at end of file
+}
diff --git a/components/cycle-day/labels/labels.js b/components/cycle-day/labels/labels.js
index a5ed61a4..83c1afe0 100644
--- a/components/cycle-day/labels/labels.js
+++ b/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
-}
\ No newline at end of file
+ bleeding,
+ mucusFeeling,
+ mucusTexture
+}
diff --git a/components/cycle-day/symptoms/mucus.js b/components/cycle-day/symptoms/mucus.js
new file mode 100644
index 00000000..38489cf8
--- /dev/null
+++ b/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>
+ )
+ }
+}
diff --git a/db.js b/db.js
index 00e1d946..455acd82 100644
--- a/db.js
+++ b/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
--
GitLab