From 373dbea60cd69232bd86f756082385cdfb2b959c Mon Sep 17 00:00:00 2001
From: mashazyu <mariya.z@gmail.com>
Date: Mon, 7 Jan 2019 19:13:39 +0100
Subject: [PATCH] Refactor npf settings component

---
 components/settings/nfp-settings/index.js     | 18 ++++-----
 .../settings/nfp-settings/use-cervix.js       | 39 +++++++------------
 components/settings/settings-segment.js       | 10 ++++-
 3 files changed, 33 insertions(+), 34 deletions(-)

diff --git a/components/settings/nfp-settings/index.js b/components/settings/nfp-settings/index.js
index c4810bcc..7d276987 100644
--- a/components/settings/nfp-settings/index.js
+++ b/components/settings/nfp-settings/index.js
@@ -6,6 +6,7 @@ import Hyperlink from 'react-native-hyperlink'
 import styles, { iconStyles } from '../../../styles'
 import labels from '../../../i18n/en/settings'
 import AppText from '../../app-text'
+import SettingsSegment from '../settings-segment'
 import TempSlider from './temp-slider'
 import UseCervixSetting from './use-cervix'
 import Icon from 'react-native-vector-icons/Entypo'
@@ -20,15 +21,14 @@ export default class Settings extends Component {
   render() {
     return (
       <ScrollView>
-        <UseCervixSetting/>
-        <View style={styles.settingsSegment}>
-          <AppText style={styles.settingsSegmentTitle}>
-            {labels.tempScale.segmentTitle}
-          </AppText>
+        <SettingsSegment title={labels.useCervix.title}>
+          <UseCervixSetting/>
+        </SettingsSegment>
+        <SettingsSegment title={labels.tempScale.segmentTitle}>
           <AppText>{labels.tempScale.segmentExplainer}</AppText>
           <TempSlider/>
-        </View>
-        <View style={[styles.settingsSegment, styles.settingsSegmentLast]}>
+        </SettingsSegment>
+        <SettingsSegment style={styles.settingsSegmentLast} >
           <View style={{flexDirection: 'row', alignItems: 'center'}}>
             <Icon name="info-with-circle" style={iconStyles.infoInHeading}/>
             <AppText style={styles.settingsSegmentTitle}>{`${labels.preOvu.title} `}</AppText>
@@ -36,8 +36,8 @@ export default class Settings extends Component {
           <Hyperlink linkStyle={styles.link} linkText={replaceUrlWithText}>
             <AppText>{labels.preOvu.note}</AppText>
           </Hyperlink>
-        </View>
+        </SettingsSegment>
       </ScrollView>
     )
   }
-}
+}
\ No newline at end of file
diff --git a/components/settings/nfp-settings/use-cervix.js b/components/settings/nfp-settings/use-cervix.js
index ecfe5d38..2bb9ff98 100644
--- a/components/settings/nfp-settings/use-cervix.js
+++ b/components/settings/nfp-settings/use-cervix.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react'
 import {
   View,
-  TouchableOpacity,
   Switch
 } from 'react-native'
 import AppText from '../../app-text'
@@ -9,7 +8,6 @@ import {
   useCervixObservable,
   saveUseCervix
 } from '../../../local-storage'
-import styles from '../../../styles/index'
 import labels from '../../../i18n/en/settings'
 
 export default class UseCervixSetting extends Component {
@@ -20,29 +18,22 @@ export default class UseCervixSetting extends Component {
 
   render() {
     return (
-      <TouchableOpacity
-        style={styles.settingsSegment}
-      >
-        <AppText style={styles.settingsSegmentTitle}>
-          {labels.useCervix.title}
-        </AppText>
-        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-          <View style={{ flex: 1 }}>
-            {this.state.useCervix ?
-              <AppText>{labels.useCervix.cervixModeOn}</AppText>
-              :
-              <AppText>{labels.useCervix.cervixModeOff}</AppText>
-            }
-          </View>
-          <Switch
-            value={this.state.useCervix}
-            onValueChange={bool => {
-              this.setState({ useCervix: bool })
-              saveUseCervix(bool)
-            }}
-          />
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        <View style={{ flex: 1 }}>
+          {this.state.useCervix ?
+            <AppText>{labels.useCervix.cervixModeOn}</AppText>
+            :
+            <AppText>{labels.useCervix.cervixModeOff}</AppText>
+          }
         </View>
-      </TouchableOpacity>
+        <Switch
+          value={this.state.useCervix}
+          onValueChange={bool => {
+            this.setState({ useCervix: bool })
+            saveUseCervix(bool)
+          }}
+        />
+      </View>
     )
   }
 }
diff --git a/components/settings/settings-segment.js b/components/settings/settings-segment.js
index f29f7c58..208f1a6e 100644
--- a/components/settings/settings-segment.js
+++ b/components/settings/settings-segment.js
@@ -9,15 +9,23 @@ const SettingsSegment = ({ children, ...props }) => {
   const style = [styles.settingsSegment, props.style]
   if (props.last) style.push(styles.settingsSegmentLast)
   return (
+<<<<<<< HEAD
     <View style={style}>
       <AppText style={styles.settingsSegmentTitle}>{props.title}</AppText>
+=======
+    <View style={[styles.settingsSegment, props.style]}>
+      {
+        props.title
+        && <AppText style={styles.settingsSegmentTitle}>{props.title}</AppText>
+      }
+>>>>>>> Refactor npf settings component
       {children}
     </View>
   )
 }
 
 SettingsSegment.propTypes = {
-  title: PropTypes.string.isRequired
+  title: PropTypes.string
 }
 
 export default SettingsSegment
\ No newline at end of file
-- 
GitLab