Reuse of SettingsSegment component in the Reminders section

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>
     )
   }