Putting all the labels of selected pain keys in the cycle day overview

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

@@ -20,7 +20,8 @@ import {
   cervixOpening as openingLabels,
   cervixFirmness as firmnessLabels,
   cervixPosition as positionLabels,
-  intensity as intensityLabels
+  intensity as intensityLabels,
+  pain as painLabels
 } from './labels/labels'
 
 export default class CycleDayOverView extends Component {
@@ -138,7 +139,10 @@ function getLabel(symptomName, symptom) {
     cervix: cervix => {
       let cervixLabel = []
       if (cervix.opening > -1 && cervix.firmness > -1) {
-        cervixLabel.push(openingLabels[cervix.opening], firmnessLabels[cervix.firmness])
+        cervixLabel.push(
+          openingLabels[cervix.opening],
+          firmnessLabels[cervix.firmness]
+        )
         if (cervix.position > -1) {
           cervixLabel.push(positionLabels[cervix.position])
         }
@@ -168,14 +172,17 @@ function getLabel(symptomName, symptom) {
       return sexLabel.join(', ')
     },
     pain: pain => {
-      let painLabel = ''
-      if (pain.cramps || pain.ovulationPain || pain.headache ||
-        pain.backache || pain.nausea || pain.tenderBreasts ||
-        pain.migraine || pain.other
-      ) {
-        painLabel += 'Pain'
+      let painLabel = []
+      if (pain && Object.values(pain).some(val => val)){
+        Object.keys(pain).forEach(key => {
+          if(pain[key]) {
+            painLabel.push(painLabels[key])
+          }
+        })
+        painLabel = painLabel.join(', ')
+        if (pain.exclude) painLabel = `(${painLabel})`
       }
-      return painLabel ? painLabel : 'edit'
+      return painLabel
     }
   }
 

components/cycle-day/symptoms/pain.js

@@ -3,13 +3,15 @@ import {
   CheckBox,
   Text,
   TextInput,
-  View
+  View,
+  ScrollView
 } from 'react-native'
 import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
 import {
   pain as painLabels
 } from '../labels/labels'
+import ActionButtonFooter from './action-button-footer'
 
 export default class Pain extends Component {
   constructor(props) {
@@ -18,119 +20,128 @@ export default class Pain extends Component {
     this.state = {}
     if (this.cycleDay.pain !== null ) {
       Object.assign(this.state, this.cycleDay.pain)
+      if (this.cycleDay.pain && this.cycleDay.pain.note) {
+        this.state.other = true
+      }
     }
   }
 
   render() {
 
     return (
-      <View style={styles.symptomEditView}>
-        <Text style={styles.symptomDayView}>PAIN</Text>
-        <View style={styles.symptomViewRowInline}>
-          <Text style={styles.symptomDayView}>{painLabels.cramps}</Text>
-          <CheckBox
-            value={this.state.cramps}
-            onValueChange={(val) => {
-              this.setState({cramps: val})
-            }}
-          />
-          <Text style={styles.symptomDayView}>{painLabels.ovulationPain}</Text>
-          <CheckBox
-            value={this.state.ovulationPain}
-            onValueChange={(val) => {
-              this.setState({ovulationPain: val})
-            }}
-          />
-        </View>
-        <View style={styles.symptomViewRowInline}>
-          <Text style={styles.symptomDayView}>
-            {painLabels.headache}
-          </Text>
-          <CheckBox
-            value={this.state.headache}
-            onValueChange={(val) => {
-              this.setState({headache: val})
-            }}
-          />
-          <Text style={styles.symptomDayView}>
-            {painLabels.backache}
-          </Text>
-          <CheckBox
-            value={this.state.backache}
-            onValueChange={(val) => {
-              this.setState({backache: val})
-            }}
-          />
-        </View>
-        <View style={styles.symptomViewRowInline}>
-          <Text style={styles.symptomDayView}>
-            {painLabels.nausea}
-          </Text>
-          <CheckBox
-            value={this.state.nausea}
-            onValueChange={(val) => {
-              this.setState({nausea: val})
-            }}
-          />
-          <Text style={styles.symptomDayView}>
-            {painLabels.tenderBreasts}
-          </Text>
-          <CheckBox
-            value={this.state.tenderBreasts}
-            onValueChange={(val) => {
-              this.setState({tenderBreasts: val})
-            }}
-          />
-        </View>
-        <View style={styles.symptomViewRowInline}>
-          <Text style={styles.symptomDayView}>
-            {painLabels.migraine}
-          </Text>
-          <CheckBox
-            value={this.state.migraine}
-            onValueChange={(val) => {
-              this.setState({migraine: val})
-            }}
-          />
-          <Text style={styles.symptomDayView}>
-            {painLabels.other}
-          </Text>
-          <CheckBox
-            value={this.state.other}
-            onValueChange={(val) => {
-              this.setState({
-                other: val,
-                focusTextArea: true
-              })
-            }}
-          />
-        </View>
-        <View style={styles.symptomViewRowInline}>
-          { this.state.other &&
-            <TextInput
-              autoFocus={this.state.focusTextArea}
-              multiline={true}
-              placeholder="Enter"
-              value={this.state.note}
-              onChangeText={(val) => {
-                this.setState({note: val})
-              }}
-            />
-          }
-        </View>
-        <View style={styles.actionButtonRow}>
-          {this.props.makeActionButtons(
-            {
-              symptom: 'pain',
-              cycleDay: this.cycleDay,
-              saveAction: () => {
-                const copyOfState = Object.assign({}, this.state)
-                saveSymptom('pain', this.cycleDay, copyOfState)
-              },
-              saveDisabled: Object.values(this.state).every(value => !value)
+      <View style={{ flex: 1 }}>
+        <ScrollView>
+          <View>
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>PAIN</Text>
+              <Text style={styles.symptomDayView}>{painLabels.cramps}</Text>
+              <CheckBox
+                value={this.state.cramps}
+                onValueChange={(val) => {
+                  this.setState({cramps: val})
+                }}
+              />
+              <Text style={styles.symptomDayView}>
+                {painLabels.ovulationPain}
+              </Text>
+              <CheckBox
+                value={this.state.ovulationPain}
+                onValueChange={(val) => {
+                  this.setState({ovulationPain: val})
+                }}
+              />
+            </View>
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>
+                {painLabels.headache}
+              </Text>
+              <CheckBox
+                value={this.state.headache}
+                onValueChange={(val) => {
+                  this.setState({headache: val})
+                }}
+              />
+              <Text style={styles.symptomDayView}>
+                {painLabels.backache}
+              </Text>
+              <CheckBox
+                value={this.state.backache}
+                onValueChange={(val) => {
+                  this.setState({backache: val})
+                }}
+              />
+            </View>
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>
+                {painLabels.nausea}
+              </Text>
+              <CheckBox
+                value={this.state.nausea}
+                onValueChange={(val) => {
+                  this.setState({nausea: val})
+                }}
+              />
+              <Text style={styles.symptomDayView}>
+                {painLabels.tenderBreasts}
+              </Text>
+              <CheckBox
+                value={this.state.tenderBreasts}
+                onValueChange={(val) => {
+                  this.setState({tenderBreasts: val})
+                }}
+              />
+            </View>
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>
+                {painLabels.migraine}
+              </Text>
+              <CheckBox
+                value={this.state.migraine}
+                onValueChange={(val) => {
+                  this.setState({migraine: val})
+                }}
+              />
+              <Text style={styles.symptomDayView}>
+                {painLabels.other}
+              </Text>
+              <CheckBox
+                value={this.state.other}
+                onValueChange={(val) => {
+                  this.setState({
+                    other: val,
+                    focusTextArea: true
+                  })
+                }}
+              />
+            </View>
+            <View style={styles.symptomViewRowInline}>
+              { this.state.other &&
+                <TextInput
+                  autoFocus={this.state.focusTextArea}
+                  multiline={true}
+                  placeholder="Enter"
+                  value={this.state.note}
+                  onChangeText={(val) => {
+                    this.setState({note: val})
+                  }}
+                />
+              }
+            </View>
+          </View>
+        </ScrollView>
+        <ActionButtonFooter
+          symptom='pain'
+          cycleDay={this.cycleDay}
+          saveAction={() => {
+            const copyOfState = Object.assign({}, this.state)
+            if (!copyOfState.other) {
+              copyOfState.note = null
             }
-          )}
-        </View>
+            saveSymptom('pain', this.cycleDay, copyOfState)
+          }}
+          saveDisabled={Object.values(this.state).every(value => !value)}
+          navigate={this.props.navigate}
+        />
       </View>
     )
   }

components/cycle-day/symptoms/sex.js

@@ -43,7 +43,9 @@ export default class Sex extends Component {
                   this.setState({ solo: val })
                 }}
               />
-              <Text style={styles.symptomDayView}>{activityLabels.partner}</Text>
+              <Text style={styles.symptomDayView}>
+                {activityLabels.partner}
+              </Text>
               <CheckBox
                 value={this.state.partner}
                 onValueChange={(val) => {
@@ -155,4 +157,4 @@ export default class Sex extends Component {
       </View>
     )
   }
-}
+}