Components using hooks part 1

components/app.js

@@ -16,7 +16,6 @@ import { closeDb } from '../db'
 class App extends Component {
   static propTypes = {
     date: PropTypes.string,
-    navigation: PropTypes.object.isRequired,
     navigate: PropTypes.func,
     setDate: PropTypes.func,
     goBack: PropTypes.func,

components/header/hamburger-menu.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { useState } from 'react'
 import {
   Modal,
   Platform,
@@ -25,58 +25,42 @@ const settingsMenuItems = [
   { name: menuItems.privacyPolicy, component: 'PrivacyPolicy' },
 ]
 
-export default class HamburgerMenu extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = { shouldShowMenu: false }
-  }
-
-  toggleMenu = () => {
-    this.setState({ shouldShowMenu: !this.state.shouldShowMenu })
-  }
-
-  render() {
-    const { shouldShowMenu } = this.state
+const HamburgerMenu = ({ navigate }) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const closeMenu = () => setIsOpen(false)
 
+  if (!isOpen)
     return (
-      <>
-        {!shouldShowMenu && (
-          <TouchableOpacity onPress={this.toggleMenu} hitSlop={HIT_SLOP}>
-            <AppIcon name="dots-three-vertical" color={Colors.orange} />
-          </TouchableOpacity>
-        )}
-        {shouldShowMenu && (
-          <Modal
-            animationType="fade"
-            onRequestClose={this.toggleMenu}
-            transparent={true}
-            visible={shouldShowMenu}
-          >
-            <TouchableOpacity
-              onPress={this.toggleMenu}
-              style={styles.blackBackground}
-            ></TouchableOpacity>
-            <View style={styles.menu}>
-              <View style={styles.iconContainer}>
-                <CloseIcon color={'black'} onClose={() => this.toggleMenu()} />
-              </View>
-              {settingsMenuItems.map((item) => (
-                <MenuItem
-                  item={item}
-                  key={item.name}
-                  closeMenu={this.toggleMenu}
-                  navigate={this.props.navigate}
-                />
-              ))}
-            </View>
-          </Modal>
-        )}
-      </>
+      <TouchableOpacity onPress={() => setIsOpen(true)} hitSlop={HIT_SLOP}>
+        <AppIcon name="dots-three-vertical" color={Colors.orange} />
+      </TouchableOpacity>
     )
-  }
+
+  return (
+    <Modal animationType="fade" onRequestClose={closeMenu} transparent={true}>
+      <TouchableOpacity
+        onPress={closeMenu}
+        style={styles.blackBackground}
+      ></TouchableOpacity>
+      <View style={styles.menu}>
+        <View style={styles.iconContainer}>
+          <CloseIcon color={'black'} onClose={closeMenu} />
+        </View>
+        {settingsMenuItems.map((item) => (
+          <MenuItem
+            item={item}
+            key={item.name}
+            closeMenu={closeMenu}
+            navigate={navigate}
+          />
+        ))}
+      </View>
+    </Modal>
+  )
 }
 
+export default HamburgerMenu
+
 HamburgerMenu.propTypes = {
   navigate: PropTypes.func,
 }

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