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