Reuse of SettingsSegment component in the Reminders section

components/settings/reminders/index.js

@@ -2,9 +2,12 @@ import React, { Component } from 'react'
 import {
   ScrollView,
 } from 'react-native'
+import SettingsSegment from '../settings-segment'
 import TempReminderPicker from './temp-reminder-picker'
 import PeriodReminderPicker from './period-reminder'
 
+import labels from '../../../i18n/en/settings'
+
 export default class Settings extends Component {
   constructor(props) {
     super(props)
@@ -14,8 +17,12 @@ export default class Settings extends Component {
   render() {
     return (
       <ScrollView>
+        <SettingsSegment title={labels.tempReminder.title}>
           <TempReminderPicker/>
+        </SettingsSegment>
+        <SettingsSegment title={labels.periodReminder.title}>
           <PeriodReminderPicker/>
+        </SettingsSegment>
       </ScrollView>
     )
   }

components/settings/reminders/period-reminder.js

@@ -8,7 +8,6 @@ import {
   periodReminderObservable,
   savePeriodReminder
 } from '../../../local-storage'
-import styles from '../../../styles/index'
 import labels from '../../../i18n/en/settings'
 
 export default class PeriodReminderPicker extends Component {
@@ -19,10 +18,6 @@ export default class PeriodReminderPicker extends Component {
 
   render() {
     return (
-      <View style={styles.settingsSegment}>
-        <AppText style={styles.settingsSegmentTitle}>
-          {labels.periodReminder.title}
-        </AppText>
       <View style={{ flexDirection: 'row', alignItems: 'center' }}>
         <View style={{ flex: 1 }}>
           <AppText>{labels.periodReminder.reminderText}</AppText>
@@ -35,7 +30,6 @@ export default class PeriodReminderPicker extends Component {
           }}
         />
       </View>
-      </View>
     )
   }
 }

components/settings/reminders/temp-reminder-picker.js

@@ -10,26 +10,26 @@ import {
   tempReminderObservable,
   saveTempReminder
 } from '../../../local-storage'
-import styles from '../../../styles/index'
 import labels from '../../../i18n/en/settings'
 import padWithZeros from '../../helpers/pad-time-with-zeros'
 
 export default class TempReminderPicker extends Component {
   constructor(props) {
     super(props)
-    this.state = Object.assign({}, tempReminderObservable.value)
+    const { time, enabled } = tempReminderObservable.value
+    this.state = {
+      time,
+      enabled,
+      isTimePickerVisible: false
+    }
   }
 
   render() {
     return (
       <TouchableOpacity
-        style={styles.settingsSegment}
+        style={{ flexDirection: 'row', alignItems: 'center' }}
         onPress={() => this.setState({ isTimePickerVisible: true })}
       >
-        <AppText style={styles.settingsSegmentTitle}>
-          {labels.tempReminder.title}
-        </AppText>
-        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
         <View style={{ flex: 1 }}>
           {this.state.time && this.state.enabled ?
             <AppText>{labels.tempReminder.timeSet(this.state.time)}</AppText>
@@ -67,7 +67,6 @@ export default class TempReminderPicker extends Component {
             if (!this.state.time) this.setState({enabled: false})
           }}
         />
-        </View>
       </TouchableOpacity>
     )
   }