Add mood component, add mood as tracking category to db schemas, add mood category description, add mood to the cycle-day-overview

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

@@ -24,6 +24,7 @@ const intensityLabels = labels.intensity
 const sexLabels = labels.sex.categories
 const contraceptiveLabels = labels.contraceptives.categories
 const painLabels = labels.pain.categories
+const moodLabels = labels.mood.categories
 
 export default class CycleDayOverView extends Component {
   constructor(props) {
@@ -143,6 +144,25 @@ export default class CycleDayOverView extends Component {
           painLabel = painLabel.join(', ')
           return painLabel
         }
+      },
+      mood: mood => {
+        let moodLabel = []
+        if (mood && Object.values(mood).some(val => val)){
+          Object.keys(mood).forEach(key => {
+            if(mood[key] && key !== 'other' && key !== 'note') {
+              moodLabel.push(moodLabels[key])
+            }
+            if(key === 'other' && mood.other) {
+              let label = moodLabels[key]
+              if(mood.note) {
+                label = `${label} (${mood.note})`
+              }
+              moodLabel.push(label)
+            }
+          })
+          moodLabel = moodLabel.join(', ')
+          return moodLabel
+        }
       }
     }
 
@@ -226,6 +246,14 @@ export default class CycleDayOverView extends Component {
               iconName='drip-icon-pain'
             >
             </SymptomBox>
+            <SymptomBox
+              title='Mood'
+              onPress={() => this.navigate('MoodEditView')}
+              data={this.getLabel('mood')}
+              disabled={dateInFuture}
+              iconName='drip-icon-pain'
+            >
+            </SymptomBox>
             <SymptomBox
               title='Note'
               onPress={() => this.navigate('NoteEditView')}
@@ -236,9 +264,9 @@ export default class CycleDayOverView extends Component {
             {/*  this is just to make the last row adhere to the grid
         (and) because there are no pseudo properties in RN */}
             <FillerBoxes />
-          </View >
-        </ScrollView >
-      </View >
+          </View>
+        </ScrollView>
+      </View>
     )
   }
 }

components/cycle-day/symptoms/index.js

@@ -6,6 +6,7 @@ import NoteEditView from './note'
 import DesireEditView from './desire'
 import SexEditView from './sex'
 import PainEditView from './pain'
+import MoodEditView from './mood'
 
 export default {
   BleedingEditView,
@@ -15,5 +16,6 @@ export default {
   NoteEditView,
   DesireEditView,
   SexEditView,
-  PainEditView
+  PainEditView,
+  MoodEditView
 }

components/cycle-day/symptoms/mood.js

@@ -0,0 +1,78 @@
+import React, { Component } from 'react'
+import {
+  ScrollView,
+  TextInput,
+  View
+} from 'react-native'
+import { saveSymptom } from '../../../db'
+import { mood as labels } from '../../../i18n/en/cycle-day'
+import ActionButtonFooter from './action-button-footer'
+import SelectBoxGroup from '../select-box-group'
+import SymptomSection from './symptom-section'
+import styles from '../../../styles'
+
+export default class Mood extends Component {
+  constructor(props) {
+    super(props)
+    const cycleDay = props.cycleDay
+    if (cycleDay && cycleDay.pain) {
+      this.state = Object.assign({}, cycleDay.pain)
+    } else {
+      this.state = {}
+    }
+    if (this.state.note) {
+      this.state.other = true
+    }
+  }
+
+  toggleState = (key) => {
+    const curr = this.state[key]
+    this.setState({[key]: !curr})
+    if (key === 'other' && !curr) {
+      this.setState({focusTextArea: true})
+    }
+  }
+
+  render() {
+    return (
+      <View style={{ flex: 1 }}>
+        <ScrollView style={styles.page}>
+          <SymptomSection
+            explainer={labels.explainer}
+          >
+            <SelectBoxGroup
+              labels={labels.categories}
+              onSelect={this.toggleState}
+              optionsState={this.state}
+            />
+            { this.state.other &&
+              <TextInput
+                autoFocus={this.state.focusTextArea}
+                multiline={true}
+                placeholder="Enter"
+                value={this.state.note}
+                onChangeText={(val) => {
+                  this.setState({note: val})
+                }}
+              />
+            }
+          </SymptomSection>
+        </ScrollView>
+        <ActionButtonFooter
+          symptom='mood'
+          date={this.props.date}
+          currentSymptomValue={this.state}
+          saveAction={() => {
+            const copyOfState = Object.assign({}, this.state)
+            if (!copyOfState.other) {
+              copyOfState.note = null
+            }
+            saveSymptom('mood', this.props.date, copyOfState)
+          }}
+          saveDisabled={Object.values(this.state).every(value => !value)}
+          navigate={this.props.navigate}
+        />
+      </View>
+    )
+  }
+}