diff --git a/components/common/app-switch.js b/components/common/app-switch.js
new file mode 100644
index 0000000000000000000000000000000000000000..71d526250d9d73a955375d658e08da08fd4a1545
--- /dev/null
+++ b/components/common/app-switch.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import { StyleSheet, Switch, View } from 'react-native'
+import PropTypes from 'prop-types'
+
+import AppText from './app-text'
+
+import { Containers } from '../../styles/redesign'
+
+const AppSwitch = ({ onToggle, text, value }) => {
+ return (
+ <View style={styles.line}>
+ <View style={styles.textContainer}>
+ <AppText>{text}</AppText>
+ </View>
+ <Switch onValueChange={onToggle} style={styles.switch} value={value} />
+ </View>
+ )
+}
+
+AppSwitch.propTypes = {
+ onToggle: PropTypes.func.isRequired,
+ text: PropTypes.string,
+ value: PropTypes.bool.isRequired
+}
+
+const styles = StyleSheet.create({
+ line: {
+ ...Containers.rowContainer
+ },
+ switch: {
+ flex: 1,
+ },
+ textContainer: {
+ flex: 4,
+ }
+})
+
+export default AppSwitch
\ No newline at end of file
diff --git a/components/settings/reminders.js b/components/settings/reminders.js
new file mode 100644
index 0000000000000000000000000000000000000000..76ed70c1edde6da9f8dbaeb08d255a4db311bfc6
--- /dev/null
+++ b/components/settings/reminders.js
@@ -0,0 +1,99 @@
+import React, { Component } from 'react'
+import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
+
+import AppPage from '../common/app-page'
+import AppSwitch from '../common/app-switch'
+import Segment from '../common/segment'
+
+import {
+ periodReminderObservable,
+ savePeriodReminder,
+ saveTempReminder,
+ tempReminderObservable
+} from '../../local-storage'
+import padWithZeros from '../helpers/pad-time-with-zeros'
+
+import labels from '../../i18n/en/settings'
+
+export default class Reminders extends Component {
+ constructor(props) {
+ super(props)
+
+ const { time, enabled } = tempReminderObservable.value
+ this.state = {
+ periodReminder: periodReminderObservable.value.enabled,
+ temperatureReminder: {
+ time,
+ enabled,
+ isTimePickerVisible: false
+ }
+ }
+ }
+
+ periodReminderToggle = (value) => {
+ this.setState({ periodReminder: value })
+ savePeriodReminder({ enabled: value })
+ }
+
+ temperatureReminderToggle = (value) => {
+ const { time } = this.state.temperatureReminder
+ const temperatureReminder = { enabled: value }
+
+ if (value && !time) temperatureReminder.isTimePickerVisible = true
+ if (!value) saveTempReminder({ enabled: false })
+
+ this.setState({ temperatureReminder })
+ }
+
+ onPickDate = (date) => {
+ const time = padWithZeros(date)
+ const temperatureReminder =
+ { time, isTimePickerVisible: false, enabled: true }
+
+ this.setState({ temperatureReminder })
+ saveTempReminder({ time, enabled: true })
+ }
+
+ onPickDateCancel = () => {
+ const { time } = this.state.temperatureReminder
+ const temperatureReminder = { isTimePickerVisible: false }
+
+ if (!time) temperatureReminder.enabled = false
+
+ this.setState({ temperatureReminder })
+ }
+
+ render() {
+ const { periodReminder, temperatureReminder } = this.state
+
+ const tempReminderText =
+ temperatureReminder.time && temperatureReminder.enabled ?
+ labels.tempReminder.timeSet(temperatureReminder.time)
+ : labels.tempReminder.noTimeSet
+
+ return (
+ <AppPage>
+ <Segment title={labels.tempReminder.title}>
+ <AppSwitch
+ onToggle={this.temperatureReminderToggle}
+ text={tempReminderText}
+ value={temperatureReminder.enabled}
+ />
+ <DateTimePicker
+ isVisible={temperatureReminder.isTimePickerVisible}
+ mode="time"
+ onConfirm={this.onPickDate}
+ onCancel={this.onPickDateCancel}
+ />
+ </Segment>
+ <Segment title={labels.periodReminder.title} last>
+ <AppSwitch
+ onToggle={this.periodReminderToggle}
+ text={labels.periodReminder.reminderText}
+ value={periodReminder}
+ />
+ </Segment>
+ </AppPage>
+ )
+ }
+}
diff --git a/components/settings/reminders/index.js b/components/settings/reminders/index.js
deleted file mode 100644
index 7c35a14ca27c719758e37e4deded0584926ea991..0000000000000000000000000000000000000000
--- a/components/settings/reminders/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, { Component } from 'react'
-import {
- ScrollView,
-} from 'react-native'
-import Segment from '../../common/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)
- this.state = {}
- }
-
- render() {
- return (
- <ScrollView>
- <Segment title={labels.tempReminder.title}>
- <TempReminderPicker/>
- </Segment>
- <Segment title={labels.periodReminder.title}>
- <PeriodReminderPicker/>
- </Segment>
- </ScrollView>
- )
- }
-}
diff --git a/components/settings/reminders/period-reminder.js b/components/settings/reminders/period-reminder.js
deleted file mode 100644
index 6a07ffc75d0b31890e74acd41c745a09f616cab9..0000000000000000000000000000000000000000
--- a/components/settings/reminders/period-reminder.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { Component } from 'react'
-import {
- View,
- Switch
-} from 'react-native'
-import AppText from '../../common/app-text'
-import {
- periodReminderObservable,
- savePeriodReminder
-} from '../../../local-storage'
-import labels from '../../../i18n/en/settings'
-
-export default class PeriodReminderPicker extends Component {
- constructor(props) {
- super(props)
- this.state = periodReminderObservable.value
- }
-
- render() {
- return (
- <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>
- )
- }
-}
\ No newline at end of file
diff --git a/components/settings/reminders/temp-reminder-picker.js b/components/settings/reminders/temp-reminder-picker.js
deleted file mode 100644
index b35b0c1061208710fec6af1629d4386632925875..0000000000000000000000000000000000000000
--- a/components/settings/reminders/temp-reminder-picker.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import React, { Component } from 'react'
-import {
- View,
- TouchableOpacity,
- Switch
-} from 'react-native'
-import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
-import AppText from '../../common/app-text'
-import {
- tempReminderObservable,
- saveTempReminder
-} from '../../../local-storage'
-import labels from '../../../i18n/en/settings'
-import padWithZeros from '../../helpers/pad-time-with-zeros'
-
-export default class TempReminderPicker extends Component {
- constructor(props) {
- super(props)
- const { time, enabled } = tempReminderObservable.value
- this.state = {
- time,
- enabled,
- isTimePickerVisible: false
- }
- }
-
- render() {
- return (
- <TouchableOpacity
- style={{ flexDirection: 'row', alignItems: 'center' }}
- onPress={() => this.setState({ isTimePickerVisible: true })}
- >
- <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>
- )
- }
-}