Merge branch 'master' into 156-make-components-like-prettier-radio-buttons

android/app/src/main/res/values/colors.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!--   color for the app bar and other primary UI elements -->
+    <color name="colorPrimary">#ff7e5f</color>
+
+    <!--   a darker variant of the primary color, used for
+           the status bar (on Android 5.0+) and contextual app bars -->
+    <color name="colorPrimaryDark">#c74e34</color>
+
+    <!--   a secondary color for controls like checkboxes and text fields -->
+    <color name="colorAccent">#351c4d</color>
+</resources>

android/app/src/main/res/values/styles.xml

@@ -3,6 +3,7 @@
     <!-- Base application theme. -->
     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
         <!-- Customize your theme here. -->
+        <item name="colorAccent">@color/colorAccent</item>
     </style>
 
 </resources>

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

@@ -19,7 +19,9 @@ import {
   cervixOpening as openingLabels,
   cervixFirmness as firmnessLabels,
   cervixPosition as positionLabels,
-  intensity as intensityLabels
+  intensity as intensityLabels,
+  pain as painLabels,
+  sex as sexLabels
 } from './labels/labels'
 import { AppText } from '../app-text'
 
@@ -101,6 +103,11 @@ export default class CycleDayOverView extends Component {
               onPress={() => this.navigate('NoteEditView')}
               data={getLabel('note', cycleDay.note)}
             />
+            <SymptomBox
+              title='Pain'
+              onPress={() => this.navigate('PainEditView')}
+              data={getLabel('pain', cycleDay.pain)}
+            />
             {/*  this is just to make the last row adhere to the grid
         (and) because there are no pseudo properties in RN */}
             <FillerBoxes />
@@ -163,15 +170,42 @@ function getLabel(symptomName, symptom) {
       }
     },
     sex: sex => {
-      const sexLabel = []
+      let sexLabel = []
-      if ( sex.solo || sex.partner ) {
+      if (sex && Object.values(sex).some(val => val)){
-        sexLabel.push('activity')
+        Object.keys(sex).forEach(key => {
+          if(sex[key] && key !== 'other' && key !== 'note') {
+            sexLabel.push(sexLabels[key])
+          }
+          if(key === 'other' && sex.other) {
+            let label = sexLabels[key]
+            if(sex.note) {
+              label = `${label} (${sex.note})`
+            }
+            sexLabel.push(label)
+          }
+        })
+        sexLabel = sexLabel.join(', ')
       }
-      if (sex.condom || sex.pill || sex.iud ||
+      return sexLabel
-        sex.patch || sex.ring || sex.implant || sex.other) {
+    },
-        sexLabel.push('contraceptive')
+    pain: pain => {
+      let painLabel = []
+      if (pain && Object.values(pain).some(val => val)){
+        Object.keys(pain).forEach(key => {
+          if(pain[key] && key !== 'other' && key !== 'note') {
+            painLabel.push(painLabels[key])
+          }
+          if(key === 'other' && pain.other) {
+            let label = painLabels[key]
+            if(pain.note) {
+              label = `${label} (${pain.note})`
+            }
+            painLabel.push(label)
+          }
+        })
+        painLabel = painLabel.join(', ')
       }
-      return sexLabel.join(', ')
+      return painLabel
     }
   }
 
@@ -223,4 +257,4 @@ class FillerBoxes extends Component {
     }
     return fillerBoxes
   }
-}
+}

components/cycle-day/labels/labels.js

@@ -6,11 +6,9 @@ export const cervixOpening = ['closed', 'medium', 'open']
 export const cervixFirmness = ['hard', 'soft']
 export const cervixPosition = ['low', 'medium', 'high']
 export const intensity = ['low', 'medium', 'high']
-export const sexActivity = {
+export const sex = {
   solo: 'Solo',
-  partner: 'Partner'
+  partner: 'Partner',
-}
-export const contraceptives = {
   condom: 'Condom',
   pill: 'Pill',
   iud: 'IUD',
@@ -20,6 +18,18 @@ export const contraceptives = {
   other: 'Other'
 }
 
+export const pain = {
+  cramps: 'Cramps',
+  ovulationPain: 'Ovulation pain',
+  headache: 'Headache',
+  backache: 'Backache',
+  nausea: 'Nausea',
+  tenderBreasts: 'Tender breasts',
+  migraine: 'Migraine',
+  other: 'Other',
+  note: 'Note'
+}
+
 export const fertilityStatus = {
   fertile: 'fertile',
   infertile: 'infertile',

components/cycle-day/symptoms/index.js

@@ -5,6 +5,7 @@ import CervixEditView from './cervix'
 import NoteEditView from './note'
 import DesireEditView from './desire'
 import SexEditView from './sex'
+import PainEditView from './pain'
 
 export default {
   BleedingEditView,
@@ -13,5 +14,6 @@ export default {
   CervixEditView,
   NoteEditView,
   DesireEditView,
-  SexEditView
+  SexEditView,
-}
+  PainEditView
+}

components/cycle-day/symptoms/note.js

@@ -9,7 +9,7 @@ import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
 import ActionButtonFooter from './action-button-footer'
 
-export default class Temp extends Component {
+export default class Note extends Component {
   constructor(props) {
     super(props)
     this.cycleDay = props.cycleDay
@@ -27,6 +27,7 @@ export default class Temp extends Component {
         <ScrollView style={styles.page}>
           <View style={styles.symptomViewRow}>
             <TextInput
+              autoFocus={!this.state.currentValue}
               multiline={true}
               placeholder="Enter"
               onChangeText={(val) => {
@@ -50,4 +51,4 @@ export default class Temp extends Component {
       </View>
     )
   }
-}
+}

components/cycle-day/symptoms/pain.js

@@ -0,0 +1,144 @@
+import React, { Component } from 'react'
+import {
+  CheckBox,
+  ScrollView,
+  Text,
+  TextInput,
+  View
+} 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) {
+    super(props)
+    this.cycleDay = props.cycleDay
+    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={{ flex: 1 }}>
+        <ScrollView>
+          <View>
+            <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>
+            { this.state.other &&
+              <TextInput
+                autoFocus={this.state.focusTextArea}
+                multiline={true}
+                placeholder="Enter"
+                value={this.state.note}
+                onChangeText={(val) => {
+                  this.setState({note: val})
+                }}
+              />
+            }
+          </View>
+        </ScrollView>
+        <ActionButtonFooter
+          symptom='pain'
+          cycleDay={this.cycleDay}
+          saveAction={() => {
+            const copyOfState = Object.assign({}, this.state)
+            if (!copyOfState.other) {
+              copyOfState.note = null
+            }
+            saveSymptom('pain', this.cycleDay, copyOfState)
+          }}
+          saveDisabled={Object.values(this.state).every(value => !value)}
+          navigate={this.props.navigate}
+        />
+      </View>
+    )
+  }
+}

components/cycle-day/symptoms/sex.js

@@ -6,10 +6,7 @@ import {
 } from 'react-native'
 import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
-import {
+import { sex as sexLabels } from '../labels/labels'
-  sexActivity as activityLabels,
-  contraceptives as contraceptiveLabels
-} from '../labels/labels'
 import ActionButtonFooter from './action-button-footer'
 import SelectBoxGroup from '../select-box-group'
 import { SymptomSectionHeader } from '../../app-text'

components/labels.js

@@ -63,7 +63,8 @@ export const headerTitles = {
   CervixEditView: 'Cervix',
   NoteEditView: 'Note',
   DesireEditView: 'Desire',
-  SexEditView: 'Sex'
+  SexEditView: 'Sex',
+  PainEditView: 'Pain'
 }
 
 export const stats = {

db/index.js

@@ -80,6 +80,21 @@ const SexSchema = {
   }
 }
 
+const PainSchema = {
+  name: 'Pain',
+  properties: {
+    cramps: { type: 'bool', optional: true },
+    ovulationPain: { type: 'bool', optional: true },
+    headache: { type: 'bool', optional: true },
+    backache: { type: 'bool', optional: true },
+    nausea: { type: 'bool', optional: true },
+    tenderBreasts: { type: 'bool', optional: true },
+    migraine: { type: 'bool', optional: true },
+    other: { type: 'bool', optional: true },
+    note: { type: 'string', optional: true }
+  }
+}
+
 const CycleDaySchema = {
   name: 'CycleDay',
   primaryKey: 'date',
@@ -112,6 +127,10 @@ const CycleDaySchema = {
     sex: {
       type: 'Sex',
       optional: true
+    },
+    pain: {
+      type: 'Pain',
+      optional: true
     }
   }
 }
@@ -125,7 +144,8 @@ const realmConfig = {
     CervixSchema,
     NoteSchema,
     DesireSchema,
-    SexSchema
+    SexSchema,
+    PainSchema
   ],
   // we only want this in dev mode
   deleteRealmIfMigrationNeeded: true