Separates TemperatureReminder component

components/settings/index.js

@@ -1,4 +1,4 @@
-import Reminders from './reminders'
+import Reminders from './reminders/reminders'
 import NfpSettings from './nfp-settings'
 import DataManagement from './data-management'
 import Password from './password'

components/settings/reminders.js

@@ -1,99 +0,0 @@
-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/reminders.js

@@ -0,0 +1,42 @@
+import React, { Component } from 'react'
+
+import AppPage from '../../common/app-page'
+import AppSwitch from '../../common/app-switch'
+import Segment from '../../common/segment'
+import TemperatureReminder from './temperature-reminder'
+
+import { periodReminderObservable, savePeriodReminder } from '../../../local-storage'
+
+import labels from '../../../i18n/en/settings'
+
+export default class Reminders extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      isPeriodReminderEnabled: periodReminderObservable.value.enabled
+    }
+  }
+
+  periodReminderToggle = (isEnabled) => {
+    this.setState({ isPeriodReminderEnabled: isEnabled })
+    savePeriodReminder({ enabled: isEnabled })
+  }
+
+  render() {
+    return (
+      <AppPage>
+        <Segment title={labels.tempReminder.title}>
+          <TemperatureReminder />
+        </Segment>
+        <Segment title={labels.periodReminder.title} last>
+          <AppSwitch
+            onToggle={this.periodReminderToggle}
+            text={labels.periodReminder.reminderText}
+            value={this.state.isPeriodReminderEnabled}
+          />
+        </Segment>
+      </AppPage>
+    )
+  }
+}

components/settings/reminders/temperature-reminder.js

@@ -0,0 +1,65 @@
+import React, { Component } from 'react'
+import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
+
+import AppSwitch from '../../common/app-switch'
+
+import { saveTempReminder, tempReminderObservable } from '../../../local-storage'
+import padWithZeros from '../../helpers/pad-time-with-zeros'
+
+import labels from '../../../i18n/en/settings'
+
+export default class TemperatureReminder extends Component {
+  constructor(props) {
+    super(props)
+
+    const { time, enabled } = tempReminderObservable.value
+    this.state = {
+      isEnabled: enabled,
+      isTimePickerVisible: false,
+      time,
+    }
+  }
+
+  temperatureReminderToggle = (value) => {
+    if (value) {
+      this.setState({ isTimePickerVisible: true })
+    } else {
+      saveTempReminder({ enabled: false })
+      this.setState({ isEnabled: false })
+    }
+  }
+
+  onPickDate = (date) => {
+    const time = padWithZeros(date)
+
+    this.setState({ isEnabled: true, isTimePickerVisible: false, time })
+    saveTempReminder({ time, enabled: true })
+  }
+
+  onPickDateCancel = () => {
+    this.setState({ isTimePickerVisible: false })
+  }
+
+  render() {
+    const { isEnabled, isTimePickerVisible, time } = this.state
+
+    const tempReminderText = time && isEnabled ?
+      labels.tempReminder.timeSet(time) : labels.tempReminder.noTimeSet
+
+    return (
+      <React.Fragment>
+        <AppSwitch
+          onToggle={this.temperatureReminderToggle}
+          text={tempReminderText}
+          value={isEnabled}
+        />
+        <DateTimePicker
+          isVisible={isTimePickerVisible}
+          mode="time"
+          onConfirm={this.onPickDate}
+          onCancel={this.onPickDateCancel}
+        />
+      </React.Fragment>
+    )
+  }
+}