Components using hooks part 1

components/settings/reminders/reminders.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { useState } from 'react'
 
 import AppPage from '../../common/app-page'
 import AppSwitch from '../../common/app-switch'
@@ -12,34 +12,29 @@ import {
 
 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 })
+const Reminders = () => {
+  const [isPeriodReminderEnabled, setIsPeriodReminderEnabled] = useState(
+    periodReminderObservable.value.enabled
+  )
+  const periodReminderToggle = (isEnabled) => {
+    setIsPeriodReminderEnabled(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>
-    )
-  }
+  return (
+    <AppPage>
+      <Segment title={labels.tempReminder.title}>
+        <TemperatureReminder />
+      </Segment>
+      <Segment title={labels.periodReminder.title} last>
+        <AppSwitch
+          onToggle={periodReminderToggle}
+          text={labels.periodReminder.reminderText}
+          value={isPeriodReminderEnabled}
+        />
+      </Segment>
+    </AppPage>
+  )
 }
+
+export default Reminders

components/settings/reminders/temperature-reminder.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { useState } from 'react'
 import { Platform } from 'react-native'
 import DateTimePicker from 'react-native-modal-datetime-picker'
 
@@ -12,63 +12,55 @@ import padWithZeros from '../../helpers/pad-time-with-zeros'
 
 import labels from '../../../i18n/en/settings'
 
-class TemperatureReminder extends Component {
-  constructor(props) {
-    super(props)
+const TemperatureReminder = () => {
+  const [isEnabled, setIsEnabled] = useState(
+    tempReminderObservable.value.enabled
+  )
+  const [isTimePickerVisible, setIsTimePickerVisible] = useState(false)
+  const [time, setTime] = useState(tempReminderObservable.value.time)
 
-    const { time, enabled } = tempReminderObservable.value
-    this.state = {
-      isEnabled: enabled,
-      isTimePickerVisible: false,
-      time,
-    }
-  }
-
-  temperatureReminderToggle = (value) => {
+  const temperatureReminderToggle = (value) => {
     if (value) {
-      this.setState({ isTimePickerVisible: true })
+      setIsTimePickerVisible(true)
     } else {
       saveTempReminder({ enabled: false })
-      this.setState({ isEnabled: false })
+      setIsEnabled(false)
     }
   }
 
-  onPickDate = (date) => {
+  const onPickDate = (date) => {
     const time = padWithZeros(date)
-
-    this.setState({ isEnabled: true, isTimePickerVisible: false, time })
+    setIsEnabled(true)
+    setIsTimePickerVisible(false)
+    setTime(time)
     saveTempReminder({ time, enabled: true })
   }
 
-  onPickDateCancel = () => {
-    this.setState({ isTimePickerVisible: false })
+  const onPickDateCancel = () => {
+    setIsTimePickerVisible(false)
   }
 
-  render() {
-    const { isEnabled, isTimePickerVisible, time } = this.state
+  const tempReminderText =
+    time && isEnabled
+      ? labels.tempReminder.timeSet(time)
+      : labels.tempReminder.noTimeSet
 
-    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}
-          display={Platform.OS === 'ios' ? 'spinner' : 'default'}
-        />
-      </React.Fragment>
-    )
-  }
+  return (
+    <>
+      <AppSwitch
+        onToggle={temperatureReminderToggle}
+        text={tempReminderText}
+        value={isEnabled}
+      />
+      <DateTimePicker
+        isVisible={isTimePickerVisible}
+        mode="time"
+        onConfirm={onPickDate}
+        onCancel={onPickDateCancel}
+        display={Platform.OS === 'ios' ? 'spinner' : 'default'}
+      />
+    </>
+  )
 }
 
 export default TemperatureReminder