Introduces Reminders page redesign

components/common/app-switch.js

+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

components/settings/reminders.js

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

components/settings/reminders/index.js

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

components/settings/reminders/period-reminder.js

-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

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

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