Make symptom section component

components/cycle-day/symptoms/bleeding.js

@@ -9,7 +9,7 @@ import { saveSymptom } from '../../../db'
 import { bleeding as labels } from '../labels/labels'
 import ActionButtonFooter from './action-button-footer'
 import SelectTabGroup from '../select-tab-group'
-import { SymptomSectionHeader, AppText } from '../../app-text'
+import SymptomSection from './symptom-section'
 
 export default class Bleeding extends Component {
   constructor(props) {
@@ -36,27 +36,28 @@ export default class Bleeding extends Component {
     return (
       <View style={{ flex: 1 }}>
         <ScrollView style={styles.page}>
-          <View>
+          <SymptomSection
-            <SymptomSectionHeader>Heaviness</SymptomSectionHeader>
+            header="Heaviness"
-            <AppText>How heavy is the bleeding?</AppText>
+            explainer="How heavy is the bleeding?"
+          >
             <SelectTabGroup
               buttons={bleedingRadioProps}
               active={this.state.currentValue}
               onSelect={val => this.setState({ currentValue: val })}
             />
-            <SymptomSectionHeader>Exclude</SymptomSectionHeader>
+          </SymptomSection>
-            <View flexDirection={'row'}>
+          <SymptomSection
-              <View flex={1}>
+            header="Exclude"
-                <AppText>{"You can exclude this value if it's not menstrual bleeding"}</AppText>
+            explainer="You can exclude this value if it's not menstrual bleeding"
-              </View>
+            inlineExplainer={true}
+          >
             <Switch
               onValueChange={(val) => {
                 this.setState({ exclude: val })
               }}
               value={this.state.exclude}
             />
-            </View>
+          </SymptomSection>
-          </View>
         </ScrollView>
         <ActionButtonFooter
           symptom='bleeding'

components/cycle-day/symptoms/cervix.js

@@ -9,7 +9,7 @@ import { saveSymptom } from '../../../db'
 import { cervix as labels } from '../labels/labels'
 import ActionButtonFooter from './action-button-footer'
 import SelectTabGroup from '../select-tab-group'
-import { SymptomSectionHeader, AppText } from '../../app-text'
+import SymptomSection from './symptom-section'
 
 export default class Cervix extends Component {
   constructor(props) {
@@ -48,36 +48,48 @@ export default class Cervix extends Component {
     return (
       <View style={{ flex: 1 }}>
         <ScrollView style={styles.page}>
-          <SymptomSectionHeader>Opening</SymptomSectionHeader>
+          <SymptomSection
-          <AppText>{labels.opening.explainer}</AppText>
+            header="Opening"
+            explainer={labels.opening.explainer}
+          >
             <SelectTabGroup
               buttons={cervixOpeningRadioProps}
               active={this.state.opening}
               onSelect={val => this.setState({ opening: val })}
             />
-          <SymptomSectionHeader>Firmness</SymptomSectionHeader>
+          </SymptomSection>
-          <AppText>{labels.firmness.explainer}</AppText>
+          <SymptomSection
+            header="Firmness"
+            explainer={labels.firmness.explainer}
+          >
             <SelectTabGroup
               buttons={cervixFirmnessRadioProps}
               active={this.state.firmness}
               onSelect={val => this.setState({ firmness: val })}
             />
-          <SymptomSectionHeader>Position</SymptomSectionHeader>
+          </SymptomSection>
-          <AppText>{labels.position.explainer}</AppText>
+          <SymptomSection
+            header="Position"
+            explainer={labels.position.explainer}
+          >
             <SelectTabGroup
               buttons={cervixPositionRadioProps}
               active={this.state.position}
               onSelect={val => this.setState({ position: val })}
             />
-          <View style={styles.symptomViewRowInline}>
+          </SymptomSection>
-            <SymptomSectionHeader>Exclude</SymptomSectionHeader>
+          <SymptomSection
+            header="Exclude"
+            explainer="You can exclude this value if you don't want to use it for fertility detection"
+            inlineExplainer={true}
+          >
             <Switch
               onValueChange={(val) => {
                 this.setState({ exclude: val })
               }}
               value={this.state.exclude}
             />
-          </View>
+          </SymptomSection>
         </ScrollView>
         <ActionButtonFooter
           symptom='cervix'

components/cycle-day/symptoms/desire.js

@@ -8,7 +8,7 @@ import { saveSymptom } from '../../../db'
 import { intensity, desire } from '../labels/labels'
 import ActionButtonFooter from './action-button-footer'
 import SelectTabGroup from '../select-tab-group'
-import { SymptomSectionHeader, AppText } from '../../app-text';
+import SymptomSection from './symptom-section'
 
 export default class Desire extends Component {
   constructor(props) {
@@ -31,13 +31,16 @@ export default class Desire extends Component {
     return (
       <View style={{ flex: 1 }}>
         <ScrollView style={styles.page}>
-          <SymptomSectionHeader>{desire.header}</SymptomSectionHeader>
+          <SymptomSection
-          <AppText>{desire.explainer}</AppText>
+            header={desire.header}
+            explainer={desire.explainer}
+          >
             <SelectTabGroup
               buttons={desireRadioProps}
               acitve={this.state.currentValue}
               onSelect={val => this.setState({ currentValue: val })}
             />
+          </SymptomSection>
         </ScrollView>
         <ActionButtonFooter
           symptom='desire'

components/cycle-day/symptoms/symptom-section.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react'
+import { View } from 'react-native'
+import { SymptomSectionHeader, AppText } from '../../app-text'
+
+export default class SymptomSection extends Component {
+  render() {
+    return (
+      <View>
+        <SymptomSectionHeader>{this.props.header}</SymptomSectionHeader>
+        <View flexDirection={this.props.inlineExplainer ? 'row' : 'column'}>
+          <View flex={1}>
+            <AppText>{this.props.explainer}</AppText>
+          </View>
+          {this.props.children}
+        </View>
+      </View>
+    )
+  }
+}