Clean up markup

components/cycle-day/symptoms/bleeding.js

@@ -1,9 +1,7 @@
 import React from 'react'
 import {
   Switch,
-  ScrollView,
+  ScrollView} from 'react-native'
-  View
-} from 'react-native'
 
 import { bleeding } from '../../../i18n/en/cycle-day'
 import styles from '../../../styles'
@@ -46,19 +44,16 @@ export default class Bleeding extends SymptomView {
     ]
     return (
       <ScrollView style={styles.page}>
-        <View style={{ flexDirection: 'row' }}>
+        <SymptomSection
-          <SymptomSection
+          header={bleeding.heaviness.header}
-            header={bleeding.heaviness.header}
+          explainer={bleeding.heaviness.explainer}
-            explainer={bleeding.heaviness.explainer}
+        >
-          >
+          <SelectTabGroup
-            <SelectTabGroup
+            buttons={bleedingRadioProps}
-              buttons={bleedingRadioProps}
+            active={this.state.currentValue}
-              active={this.state.currentValue}
+            onSelect={val => this.setState({ currentValue: val })}
-              onSelect={val => this.setState({ currentValue: val })}
+          />
-            />
+        </SymptomSection>
-          </SymptomSection>
-          <View style={{ flex: 1 }}></View>
-        </View>
         <SymptomSection
           header={bleeding.exclude.header}
           explainer={bleeding.exclude.explainer}

components/cycle-day/symptoms/desire.js

@@ -1,8 +1,6 @@
 import React from 'react'
 import {
-  ScrollView,
+  ScrollView} from 'react-native'
-  View
-} from 'react-native'
 
 import { intensity, desire } from '../../../i18n/en/cycle-day'
 import styles from '../../../styles'
@@ -39,18 +37,16 @@ export default class Desire extends SymptomView {
     ]
     return (
       <ScrollView style={styles.page}>
-        <View style={{ flexDirection: 'row' }}>
+        <SymptomSection
-          <SymptomSection
+          header={desire.header}
-            header={desire.header}
+          explainer={desire.explainer}
-            explainer={desire.explainer}
+        >
-          >
+          <SelectTabGroup
-            <SelectTabGroup
+            buttons={desireRadioProps}
-              buttons={desireRadioProps}
+            active={this.state.currentValue}
-              active={this.state.currentValue}
+            onSelect={val => this.setState({ currentValue: val })}
-              onSelect={val => this.setState({ currentValue: val })}
+          />
-            />
+        </SymptomSection>
-          </SymptomSection>
-        </View>
       </ScrollView>
     )
   }

components/cycle-day/symptoms/mood.js

@@ -1,15 +1,12 @@
 import React from 'react'
 import {
   ScrollView,
-  TextInput,
+  TextInput} from 'react-native'
-  View
-} from 'react-native'
 
 import { mood as labels } from '../../../i18n/en/cycle-day'
 import styles from '../../../styles'
 
 import SelectBoxGroup from '../select-box-group'
-
 import SymptomSection from './symptom-section'
 import SymptomView from './symptom-view'
 
@@ -53,16 +50,15 @@ export default class Mood extends SymptomView {
   renderContent() {
     return (
       <ScrollView style={styles.page}>
-        <View style={{ flexDirection: 'row' }}>
+        <SymptomSection
-          <SymptomSection
+          explainer={labels.explainer}
-            explainer={labels.explainer}
+        >
-          >
+          <SelectBoxGroup
-            <SelectBoxGroup
+            labels={labels.categories}
-              labels={labels.categories}
+            onSelect={this.toggleState}
-              onSelect={this.toggleState}
+            optionsState={this.state}
-              optionsState={this.state}
+          />
-            />
+          { this.state.other &&
-            { this.state.other &&
               <TextInput
                 autoFocus={this.state.focusTextArea}
                 multiline={true}
@@ -72,9 +68,8 @@ export default class Mood extends SymptomView {
                   this.setState({note: val})
                 }}
               />
-            }
+          }
-          </SymptomSection>
+        </SymptomSection>
-        </View>
       </ScrollView>
     )
   }

components/cycle-day/symptoms/mucus.js

@@ -1,9 +1,7 @@
 import React from 'react'
 import {
   Switch,
-  ScrollView,
+  ScrollView} from 'react-native'
-  View
-} from 'react-native'
 
 import styles from '../../../styles'
 import { mucus as labels } from '../../../i18n/en/cycle-day'
@@ -57,18 +55,16 @@ export default class Mucus extends SymptomView {
     // const mandatoryNotCompletedYet = typeof this.state.feeling != 'number' || typeof this.state.texture != 'number'
     return (
       <ScrollView style={styles.page}>
-        <View style={{ flexDirection: 'row' }}>
+        <SymptomSection
-          <SymptomSection
+          header='Feeling'
-            header='Feeling'
+          explainer={labels.feeling.explainer}
-            explainer={labels.feeling.explainer}
+        >
-          >
+          <SelectTabGroup
-            <SelectTabGroup
+            buttons={mucusFeeling}
-              buttons={mucusFeeling}
+            onSelect={val => this.setState({ feeling: val })}
-              onSelect={val => this.setState({ feeling: val })}
+            active={this.state.feeling}
-              active={this.state.feeling}
+          />
-            />
+        </SymptomSection>
-          </SymptomSection>
-        </View>
 
         <SymptomSection
           header='Texture'

components/cycle-day/symptoms/note.js

@@ -1,9 +1,7 @@
 import React from 'react'
 import {
   ScrollView,
-  TextInput,
+  TextInput} from 'react-native'
-  View
-} from 'react-native'
 
 import { noteExplainer } from '../../../i18n/en/cycle-day'
 import { shared as sharedLabels } from '../../../i18n/en/labels'
@@ -38,21 +36,19 @@ export default class Note extends SymptomView {
   renderContent() {
     return (
       <ScrollView style={styles.page}>
-        <View style={{ flexDirection: 'row' }}>
+        <SymptomSection
-          <SymptomSection
+          explainer={noteExplainer}
-            explainer={noteExplainer}
+        >
-          >
+          <TextInput
-            <TextInput
+            autoFocus={!this.state.currentValue}
-              autoFocus={!this.state.currentValue}
+            multiline={true}
-              multiline={true}
+            placeholder={sharedLabels.enter}
-              placeholder={sharedLabels.enter}
+            onChangeText={(val) => {
-              onChangeText={(val) => {
+              this.setState({ currentValue: val })
-                this.setState({ currentValue: val })
+            }}
-              }}
+            value={this.state.currentValue}
-              value={this.state.currentValue}
+          />
-            />
+        </SymptomSection>
-          </SymptomSection>
-        </View>
       </ScrollView>
     )
   }

components/cycle-day/symptoms/pain.js

@@ -1,9 +1,7 @@
 import React from 'react'
 import {
   ScrollView,
-  TextInput,
+  TextInput} from 'react-native'
-  View
-} from 'react-native'
 
 import { pain as labels } from '../../../i18n/en/cycle-day'
 import { shared as sharedLabels } from '../../../i18n/en/labels'
@@ -55,16 +53,15 @@ export default class Pain extends SymptomView {
   renderContent() {
     return (
       <ScrollView style={styles.page}>
-        <View style={{ flexDirection: 'row' }}>
+        <SymptomSection
-          <SymptomSection
+          explainer={labels.explainer}
-            explainer={labels.explainer}
+        >
-          >
+          <SelectBoxGroup
-            <SelectBoxGroup
+            labels={labels.categories}
-              labels={labels.categories}
+            onSelect={this.toggleState}
-              onSelect={this.toggleState}
+            optionsState={this.state}
-              optionsState={this.state}
+          />
-            />
+          { this.state.other &&
-            { this.state.other &&
               <TextInput
                 autoFocus={this.state.focusTextArea}
                 multiline={true}
@@ -74,9 +71,8 @@ export default class Pain extends SymptomView {
                   this.setState({note: val})
                 }}
               />
-            }
+          }
-          </SymptomSection>
+        </SymptomSection>
-        </View>
       </ScrollView>)
   }
 }

components/cycle-day/symptoms/sex.js

@@ -55,19 +55,17 @@ export default class Sex extends SymptomView {
   renderContent() {
     return (
       <ScrollView style={styles.page}>
-        <View style={{ flexDirection: 'row' }}>
+        <SymptomSection
-          <SymptomSection
+          header={sexLabels.header}
-            header={sexLabels.header}
+          explainer={sexLabels.explainer}
-            explainer={sexLabels.explainer}
+        >
-          >
+          <SelectBoxGroup
-            <SelectBoxGroup
+            labels={sexLabels.categories}
-              labels={sexLabels.categories}
+            onSelect={this.toggleState}
-              onSelect={this.toggleState}
+            optionsState={this.state}
-              optionsState={this.state}
+          />
-            />
+        </SymptomSection>
-          </SymptomSection>
+        <View style={{ flex: 1 }}></View>
-          <View style={{ flex: 1 }}></View>
-        </View>
         <SymptomSection
           header={contraceptivesLabels.header}
           explainer={contraceptivesLabels.explainer}

components/cycle-day/symptoms/temperature.js

@@ -144,25 +144,23 @@ export default class Temp extends SymptomView {
     }
     return (
       <ScrollView style={styles.page}>
-        <View style={{ flexDirection: 'row' }}>
+        <SymptomSection
-          <SymptomSection
+          header={labels.temperature.header}
-            header={labels.temperature.header}
+          explainer={labels.temperature.explainer}
-            explainer={labels.temperature.explainer}
+        >
-          >
+          <View style={styles.framedSegmentInlineChildren}>
-            <View style={styles.framedSegmentInlineChildren}>
+            <AppTextInput
-              <AppTextInput
+              style={[inputStyle]}
-                style={[inputStyle]}
+              autoFocus={true}
-                autoFocus={true}
+              placeholder={this.state.temperature}
-                placeholder={this.state.temperature}
+              value={this.state.temperature}
-                value={this.state.temperature}
+              onChangeText={this.setTemperature}
-                onChangeText={this.setTemperature}
+              keyboardType='numeric'
-                keyboardType='numeric'
+              maxLength={5}
-                maxLength={5}
+            />
-              />
+            <AppText style={{ marginLeft: 5 }}>°C</AppText>
-              <AppText style={{ marginLeft: 5 }}>°C</AppText>
+          </View>
-            </View>
+        </SymptomSection>
-          </SymptomSection>
-        </View>
         <SymptomSection
           header={labels.time}
         >