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>
-        <TempReminderPicker/>
-        <PeriodReminderPicker/>
+        <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,22 +18,17 @@ 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>
-          </View>
-          <Switch
-            value={this.state.enabled}
-            onValueChange={switchOn => {
-              this.setState({ enabled: switchOn })
-              savePeriodReminder({enabled: switchOn})
-            }}
-          />
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        <View style={{ flex: 1 }}>
+          <AppText>{labels.periodReminder.reminderText}</AppText>
         </View>
+        <Switch
+          value={this.state.enabled}
+          onValueChange={switchOn => {
+            this.setState({ enabled: switchOn })
+            savePeriodReminder({enabled: switchOn})
+          }}
+        />
       </View>
     )
   }

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

@@ -10,64 +10,63 @@ 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>
-              :
-              <AppText>{labels.tempReminder.noTimeSet}</AppText>
-            }
-          </View>
-          <Switch
-            value={this.state.enabled}
-            onValueChange={switchOn => {
-              this.setState({ enabled: switchOn })
-              if (switchOn && !this.state.time) {
-                this.setState({ isTimePickerVisible: true })
-              }
-              if (!switchOn) saveTempReminder({ enabled: false })
-            }}
-          />
-          <DateTimePicker
-            mode="time"
-            isVisible={this.state.isTimePickerVisible}
-            onConfirm={jsDate => {
-              const time = padWithZeros(jsDate)
-              this.setState({
-                time,
-                isTimePickerVisible: false,
-                enabled: true
-              })
-              saveTempReminder({
-                time,
-                enabled: true
-              })
-            }}
-            onCancel={() => {
-              this.setState({ isTimePickerVisible: false })
-              if (!this.state.time) this.setState({enabled: false})
-            }}
-          />
+        <View style={{ flex: 1 }}>
+          {this.state.time && this.state.enabled ?
+            <AppText>{labels.tempReminder.timeSet(this.state.time)}</AppText>
+            :
+            <AppText>{labels.tempReminder.noTimeSet}</AppText>
+          }
         </View>
+        <Switch
+          value={this.state.enabled}
+          onValueChange={switchOn => {
+            this.setState({ enabled: switchOn })
+            if (switchOn && !this.state.time) {
+              this.setState({ isTimePickerVisible: true })
+            }
+            if (!switchOn) saveTempReminder({ enabled: false })
+          }}
+        />
+        <DateTimePicker
+          mode="time"
+          isVisible={this.state.isTimePickerVisible}
+          onConfirm={jsDate => {
+            const time = padWithZeros(jsDate)
+            this.setState({
+              time,
+              isTimePickerVisible: false,
+              enabled: true
+            })
+            saveTempReminder({
+              time,
+              enabled: true
+            })
+          }}
+          onCancel={() => {
+            this.setState({ isTimePickerVisible: false })
+            if (!this.state.time) this.setState({enabled: false})
+          }}
+        />
       </TouchableOpacity>
     )
   }