Add note symptom view

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

@@ -44,53 +44,7 @@ export default class DayView extends Component {
   }
 
   render() {
-    let bleedingLabel
-    if (this.cycleDay.bleeding) {
-      const bleeding = this.cycleDay.bleeding
-      if (typeof bleeding.value === 'number') {
-        bleedingLabel = `${bleedingLabels[bleeding.value]}`
-        if (bleeding.exclude) bleedingLabel = "( " + bleedingLabel + " )"
-      }
-    } else {
-      bleedingLabel = 'edit'
-    }
-
-    let temperatureLabel
-    if (this.cycleDay.temperature) {
-      const temperature = this.cycleDay.temperature
-      if (typeof temperature.value === 'number') {
-        temperatureLabel = `${temperature.value} °C - ${temperature.time}`
-        if (temperature.exclude) {
-          temperatureLabel = "( " + temperatureLabel + " )"
-        }
-      }
-    } else {
-      temperatureLabel = 'edit'
-    }
-
-    let mucusLabel
-    if (this.cycleDay.mucus) {
-      const mucus = this.cycleDay.mucus
-      if (typeof mucus.feeling === 'number' && typeof mucus.texture === 'number') {
-        mucusLabel = `${feelingLabels[mucus.feeling]} + ${textureLabels[mucus.texture]} ( ${computeSensiplanMucusLabels[mucus.value]} )`
-        if (mucus.exclude) mucusLabel = "( " + mucusLabel + " )"
-      }
-    } else {
-      mucusLabel = 'edit'
-    }
-
-    let cervixLabel
-    if (this.cycleDay.cervix) {
-      const cervix = this.cycleDay.cervix
-      if (cervix.opening > -1 && cervix.firmness > -1) {
-        cervixLabel = `${openingLabels[cervix.opening]} + ${firmnessLabels[cervix.firmness]}`
-        if (cervix.position > -1) cervixLabel += `+ ${positionLabels[cervix.position]}`
-        if (cervix.exclude) cervixLabel = "( " + cervixLabel + " )"
-      }
-    } else {
-      cervixLabel = 'edit'
-    }
-
+    const cycleDay = this.cycleDay
     return (
       <View style={styles.symptomEditView}>
         <View style={styles.symptomViewRowInline}>
@@ -98,7 +52,7 @@ export default class DayView extends Component {
           <View style={styles.symptomEditButton}>
             <Button
               onPress={() => this.showView('bleedingEditView')}
-              title={bleedingLabel}>
+              title={getLabel('bleeding', cycleDay.bleeding)}>
             </Button>
           </View>
         </View>
@@ -107,7 +61,7 @@ export default class DayView extends Component {
           <View style={styles.symptomEditButton}>
             <Button
               onPress={() => this.showView('temperatureEditView')}
-              title={temperatureLabel}>
+              title={getLabel('temperature', cycleDay.temperature)}>
             </Button>
           </View>
         </View>
@@ -116,7 +70,7 @@ export default class DayView extends Component {
           <View style={styles.symptomEditButton}>
             <Button
               onPress={() => this.showView('mucusEditView')}
-              title={mucusLabel}>
+              title={getLabel('mucus', cycleDay.mucus)}>
             </Button>
           </View>
         </View>
@@ -125,7 +79,17 @@ export default class DayView extends Component {
           <View style={styles.symptomEditButton}>
             <Button
               onPress={() => this.showView('cervixEditView')}
-              title={cervixLabel}>
+              title={getLabel('cervix', cycleDay.cervix)}>
+            </Button>
+          </View>
+        </View>
+        <View style={styles.symptomViewRowInline}>
+          <Text style={styles.symptomDayView}>Note</Text>
+          <View style={styles.symptomEditButton}>
+            <Button
+              onPress={() => this.showView('noteEditView')}
+              title={getLabel('note', cycleDay.note)}
+            >
             </Button>
           </View>
         </View>
@@ -133,3 +97,45 @@ export default class DayView extends Component {
     )
   }
 }
+
+function getLabel(symptomName, symptom) {
+  const labels = {
+    bleeding: bleeding => {
+      if (typeof bleeding.value === 'number') {
+        let bleedingLabel = `${bleedingLabels[bleeding.value]}`
+        if (bleeding.exclude) bleedingLabel = "( " + bleedingLabel + " )"
+        return bleedingLabel
+      }
+    },
+    temperature: temperature => {
+      if (typeof temperature.value === 'number') {
+        let temperatureLabel = `${temperature.value} °C - ${temperature.time}`
+        if (temperature.exclude) {
+          temperatureLabel = "( " + temperatureLabel + " )"
+        }
+        return temperatureLabel
+      }
+    },
+    mucus: mucus => {
+      if (typeof mucus.feeling === 'number' && typeof mucus.texture === 'number') {
+        let mucusLabel = `${feelingLabels[mucus.feeling]} + ${textureLabels[mucus.texture]} ( ${computeSensiplanMucusLabels[mucus.computedNfp]} )`
+        if (mucus.exclude) mucusLabel = "( " + mucusLabel + " )"
+        return mucusLabel
+      }
+    },
+    cervix: cervix => {
+      if (cervix.opening > -1 && cervix.firmness > -1) {
+        let cervixLabel = `${openingLabels[cervix.opening]} + ${firmnessLabels[cervix.firmness]}`
+        if (cervix.position > -1) cervixLabel += `+ ${positionLabels[cervix.position]}`
+        if (cervix.exclude) cervixLabel = "( " + cervixLabel + " )"
+        return cervixLabel
+      }
+    },
+    note: note => {
+      return note.value.slice(0, 12) + '...'
+    }
+  }
+
+  if (!symptom) return 'edit'
+  return labels[symptomName](symptom) || 'edit'
+}

components/cycle-day/index.js

@@ -10,8 +10,9 @@ 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 CervixEditView from './symptoms/cervix'
+import NoteEditView from './symptoms/note'
+import { formatDateForViewHeader } from './labels/format'
 import styles from '../../styles'
 import actionButtonModule from './action-buttons'
 
@@ -59,7 +60,8 @@ export default class Day extends Component {
               bleedingEditView: <BleedingEditView cycleDay={this.cycleDay} makeActionButtons={this.makeActionButtons}/>,
               temperatureEditView: <TemperatureEditView cycleDay={this.cycleDay} makeActionButtons={this.makeActionButtons}/>,
               mucusEditView: <MucusEditView cycleDay={this.cycleDay} makeActionButtons={this.makeActionButtons}/>,
-              cervixEditView: <CervixEditView cycleDay={this.cycleDay} makeActionButtons={this.makeActionButtons} />
+              cervixEditView: <CervixEditView cycleDay={this.cycleDay} makeActionButtons={this.makeActionButtons} />,
+              noteEditView: <NoteEditView cycleDay={this.cycleDay} makeActionButtons={this.makeActionButtons} />
             }[this.state.visibleComponent]
           }
         </View >

components/cycle-day/symptoms/note.js

@@ -0,0 +1,53 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Text,
+  TextInput,
+} from 'react-native'
+
+import styles from '../../../styles'
+import { saveSymptom } from '../../../db'
+
+export default class Temp extends Component {
+  constructor(props) {
+    super(props)
+    this.cycleDay = props.cycleDay
+    const note = this.cycleDay.note
+    this.makeActionButtons = props.makeActionButtons
+
+    this.state = {
+      currentValue: note && note.value || ''
+    }
+  }
+
+  render() {
+    console.log(this.cycleDay.note)
+    return (
+      <View style={styles.symptomEditView}>
+        <View style={styles.symptomViewRow}>
+          <Text style={styles.symptomDayView}>Note</Text>
+          <TextInput
+            multiline={true}
+            placeholder="Enter"
+            onChangeText={(val) => {
+              this.setState({ currentValue: val })
+            }}
+            value={this.state.currentValue}
+          />
+        </View>
+        <View style={styles.actionButtonRow}>
+          {this.makeActionButtons({
+            symptom: 'note',
+            cycleDay: this.cycleDay,
+            saveAction: () => {
+              saveSymptom('note', this.cycleDay, {
+                value: this.state.currentValue
+              })
+            },
+            saveDisabled: !this.state.currentValue
+          })}
+        </View>
+      </View>
+    )
+  }
+}