From 6fa18d70feffcc24be724e3aa41ea90dc92ee3ff Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Sat, 1 Sep 2018 23:33:41 +0200
Subject: [PATCH] Add explainer to temperature

---
 components/cycle-day/labels/labels.js         |  9 ++-
 components/cycle-day/symptoms/bleeding.js     |  2 +-
 components/cycle-day/symptoms/cervix.js       |  2 +-
 components/cycle-day/symptoms/mucus.js        |  2 +-
 .../cycle-day/symptoms/symptom-section.js     | 21 ++++--
 components/cycle-day/symptoms/temperature.js  | 66 +++++++++++--------
 6 files changed, 65 insertions(+), 37 deletions(-)

diff --git a/components/cycle-day/labels/labels.js b/components/cycle-day/labels/labels.js
index 05473c12..5566f736 100644
--- a/components/cycle-day/labels/labels.js
+++ b/components/cycle-day/labels/labels.js
@@ -73,7 +73,14 @@ export const fertilityStatus = {
 export const temperature = {
   outOfRangeWarning: 'This temperature value is out of the current range for the temperature chart. You can change the range in the settings.',
   outOfAbsoluteRangeWarning: 'This temperature value is too high or low to be shown on the temperature chart.',
-  saveAnyway: 'Save anyway'
+  saveAnyway: 'Save anyway',
+  temperature: {
+    explainer: 'Take your temperature right after waking up, before getting out of bed'
+  },
+  note: {
+    explainer: 'Is there anything that could have influenced this value, such as bad sleep or alcohol consumption?'
+  },
+  excludeExplainer: "You can exclude this value if you don't want to use it for fertility detection"
 }
 
 export const noteExplainer = "Anything you want to add for the day?"
diff --git a/components/cycle-day/symptoms/bleeding.js b/components/cycle-day/symptoms/bleeding.js
index 25e697cb..76985f45 100644
--- a/components/cycle-day/symptoms/bleeding.js
+++ b/components/cycle-day/symptoms/bleeding.js
@@ -49,7 +49,7 @@ export default class Bleeding extends Component {
           <SymptomSection
             header="Exclude"
             explainer="You can exclude this value if it's not menstrual bleeding"
-            inlineExplainer={true}
+            inline={true}
           >
             <Switch
               onValueChange={(val) => {
diff --git a/components/cycle-day/symptoms/cervix.js b/components/cycle-day/symptoms/cervix.js
index 4b792be1..7d2ce6cc 100644
--- a/components/cycle-day/symptoms/cervix.js
+++ b/components/cycle-day/symptoms/cervix.js
@@ -81,7 +81,7 @@ export default class Cervix extends Component {
           <SymptomSection
             header="Exclude"
             explainer="You can exclude this value if you don't want to use it for fertility detection"
-            inlineExplainer={true}
+            inline={true}
           >
             <Switch
               onValueChange={(val) => {
diff --git a/components/cycle-day/symptoms/mucus.js b/components/cycle-day/symptoms/mucus.js
index 6e80ffc2..ef730f73 100644
--- a/components/cycle-day/symptoms/mucus.js
+++ b/components/cycle-day/symptoms/mucus.js
@@ -70,7 +70,7 @@ export default class Mucus extends Component {
           <SymptomSection
             header="Exclude"
             explainer={labels.excludeExplainer}
-            inlineExplainer={true}
+            inline={true}
           >
             <Switch
               onValueChange={(val) => {
diff --git a/components/cycle-day/symptoms/symptom-section.js b/components/cycle-day/symptoms/symptom-section.js
index c1af4d77..8d0603b7 100644
--- a/components/cycle-day/symptoms/symptom-section.js
+++ b/components/cycle-day/symptoms/symptom-section.js
@@ -4,14 +4,25 @@ import { SymptomSectionHeader, AppText } from '../../app-text'
 
 export default class SymptomSection extends Component {
   render() {
+    const p = this.props
+    let placeHeadingInline
+    if (!p.explainer && p.inline) {
+      placeHeadingInline = {
+        flexDirection: 'row',
+        alignItems: "center"
+      }
+    }
     return (
-      <View>
-        <SymptomSectionHeader>{this.props.header}</SymptomSectionHeader>
-        <View flexDirection={this.props.inlineExplainer ? 'row' : 'column'}>
+      <View style={placeHeadingInline}>
+        <SymptomSectionHeader flex={1}>{p.header}</SymptomSectionHeader>
+        <View
+          flexDirection={p.inline ? 'row' : 'column'}
+          flex={1}
+        >
           <View flex={1}>
-            <AppText>{this.props.explainer}</AppText>
+            <AppText>{p.explainer}</AppText>
           </View>
-          {this.props.children}
+          {p.children}
         </View>
       </View>
     )
diff --git a/components/cycle-day/symptoms/temperature.js b/components/cycle-day/symptoms/temperature.js
index 336fa431..6be71115 100644
--- a/components/cycle-day/symptoms/temperature.js
+++ b/components/cycle-day/symptoms/temperature.js
@@ -12,12 +12,13 @@ import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
 import { getPreviousTemperature, saveSymptom } from '../../../db'
 import styles from '../../../styles'
 import { LocalTime, ChronoUnit } from 'js-joda'
-import { temperature as tempLabels } from '../labels/labels'
+import { temperature as labels } from '../labels/labels'
 import { scaleObservable } from '../../../local-storage'
 import { shared } from '../../labels'
 import ActionButtonFooter from './action-button-footer'
 import config from '../../../config'
 import { SymptomSectionHeader } from '../../app-text'
+import SymptomSection from './symptom-section'
 
 const minutes = ChronoUnit.MINUTES
 
@@ -72,9 +73,9 @@ export default class Temp extends Component {
     const scale = scaleObservable.value
     let warningMsg
     if (value < absolute.min || value > absolute.max) {
-      warningMsg = tempLabels.outOfAbsoluteRangeWarning
+      warningMsg = labels.outOfAbsoluteRangeWarning
     } else if (value < scale.min || value > scale.max) {
-      warningMsg = tempLabels.outOfRangeWarning
+      warningMsg = labels.outOfRangeWarning
     }
 
     if (warningMsg) {
@@ -98,16 +99,21 @@ export default class Temp extends Component {
       <View style={{ flex: 1 }}>
         <ScrollView style={styles.page}>
           <View>
-            <View style={styles.symptomViewRowInline}>
-              <SymptomSectionHeader>Temperature (°C)</SymptomSectionHeader>
+            <SymptomSection
+              header="Temperature (°C)"
+              explainer={labels.temperature.explainer}
+              inline={true}
+            >
               <TempInput
                 value={this.state.temperature}
                 setState={(val) => this.setState(val)}
                 isSuggestion={this.state.isSuggestion}
               />
-            </View>
-            <View style={styles.symptomViewRowInline}>
-              <SymptomSectionHeader>Time</SymptomSectionHeader>
+            </SymptomSection>
+            <SymptomSection
+              header="Time"
+              inline={true}
+            >
               <TextInput
                 style={styles.temperatureTextInput}
                 onFocus={() => {
@@ -116,40 +122,44 @@ export default class Temp extends Component {
                 }}
                 value={this.state.time}
               />
-            </View>
-            <DateTimePicker
-              mode="time"
-              isVisible={this.state.isTimePickerVisible}
-              onConfirm={jsDate => {
-                this.setState({
-                  time: `${jsDate.getHours()}:${jsDate.getMinutes()}`,
-                  isTimePickerVisible: false
-                })
-              }}
-              onCancel={() => this.setState({ isTimePickerVisible: false })}
-            />
-            <SymptomSectionHeader>Note</SymptomSectionHeader>
-            <View>
+              <DateTimePicker
+                mode="time"
+                isVisible={this.state.isTimePickerVisible}
+                onConfirm={jsDate => {
+                  this.setState({
+                    time: `${jsDate.getHours()}:${jsDate.getMinutes()}`,
+                    isTimePickerVisible: false
+                  })
+                }}
+                onCancel={() => this.setState({ isTimePickerVisible: false })}
+              />
+            </SymptomSection>
+            <SymptomSection
+              header="Note"
+              explainer={labels.note.explainer}
+            >
               <TextInput
-                style={styles.temperatureTextInput}
                 multiline={true}
                 autoFocus={this.state.focusTextArea}
-                placeholder="enter"
+                placeholder="Enter"
                 value={this.state.note}
                 onChangeText={(val) => {
                   this.setState({ note: val })
                 }}
               />
-            </View>
-            <View style={styles.symptomViewRowInline}>
-              <SymptomSectionHeader>Exlude</SymptomSectionHeader>
+            </SymptomSection>
+            <SymptomSection
+              header="Exclude"
+              explainer={labels.excludeExplainer}
+              inline={true}
+            >
               <Switch
                 onValueChange={(val) => {
                   this.setState({ exclude: val })
                 }}
                 value={this.state.exclude}
               />
-            </View>
+            </SymptomSection>
           </View>
         </ScrollView>
         <ActionButtonFooter
-- 
GitLab