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,57 +25,41 @@ const settingsMenuItems = [
   { name: menuItems.privacyPolicy, component: 'PrivacyPolicy' },
 ]
 
-export default class HamburgerMenu extends Component {
+const HamburgerMenu = ({ navigate }) => {
-  constructor(props) {
+  const [isOpen, setIsOpen] = useState(false)
-    super(props)
+  const closeMenu = () => setIsOpen(false)
-
-    this.state = { shouldShowMenu: false }
-  }
-
-  toggleMenu = () => {
-    this.setState({ shouldShowMenu: !this.state.shouldShowMenu })
-  }
-
-  render() {
-    const { shouldShowMenu } = this.state
 
+  if (!isOpen)
     return (
-      <>
+      <TouchableOpacity onPress={() => setIsOpen(true)} hitSlop={HIT_SLOP}>
-        {!shouldShowMenu && (
-          <TouchableOpacity onPress={this.toggleMenu} hitSlop={HIT_SLOP}>
         <AppIcon name="dots-three-vertical" color={Colors.orange} />
       </TouchableOpacity>
-        )}
+    )
-        {shouldShowMenu && (
+
-          <Modal
+  return (
-            animationType="fade"
+    <Modal animationType="fade" onRequestClose={closeMenu} transparent={true}>
-            onRequestClose={this.toggleMenu}
-            transparent={true}
-            visible={shouldShowMenu}
-          >
       <TouchableOpacity
-              onPress={this.toggleMenu}
+        onPress={closeMenu}
         style={styles.blackBackground}
       ></TouchableOpacity>
       <View style={styles.menu}>
         <View style={styles.iconContainer}>
-                <CloseIcon color={'black'} onClose={() => this.toggleMenu()} />
+          <CloseIcon color={'black'} onClose={closeMenu} />
         </View>
         {settingsMenuItems.map((item) => (
           <MenuItem
             item={item}
             key={item.name}
-                  closeMenu={this.toggleMenu}
+            closeMenu={closeMenu}
-                  navigate={this.props.navigate}
+            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,21 +12,15 @@ import {
 
 import labels from '../../../i18n/en/settings'
 
-export default class Reminders extends Component {
+const Reminders = () => {
-  constructor(props) {
+  const [isPeriodReminderEnabled, setIsPeriodReminderEnabled] = useState(
-    super(props)
+    periodReminderObservable.value.enabled
-
+  )
-    this.state = {
+  const periodReminderToggle = (isEnabled) => {
-      isPeriodReminderEnabled: periodReminderObservable.value.enabled,
+    setIsPeriodReminderEnabled(isEnabled)
-    }
-  }
-
-  periodReminderToggle = (isEnabled) => {
-    this.setState({ isPeriodReminderEnabled: isEnabled })
     savePeriodReminder({ enabled: isEnabled })
   }
 
-  render() {
   return (
     <AppPage>
       <Segment title={labels.tempReminder.title}>
@@ -34,12 +28,13 @@ export default class Reminders extends Component {
       </Segment>
       <Segment title={labels.periodReminder.title} last>
         <AppSwitch
-            onToggle={this.periodReminderToggle}
+          onToggle={periodReminderToggle}
           text={labels.periodReminder.reminderText}
-            value={this.state.isPeriodReminderEnabled}
+          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 {
+const TemperatureReminder = () => {
-  constructor(props) {
+  const [isEnabled, setIsEnabled] = useState(
-    super(props)
+    tempReminderObservable.value.enabled
+  )
+  const [isTimePickerVisible, setIsTimePickerVisible] = useState(false)
+  const [time, setTime] = useState(tempReminderObservable.value.time)
 
-    const { time, enabled } = tempReminderObservable.value
+  const temperatureReminderToggle = (value) => {
-    this.state = {
-      isEnabled: enabled,
-      isTimePickerVisible: false,
-      time,
-    }
-  }
-
-  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)
-
+    setIsEnabled(true)
-    this.setState({ isEnabled: true, isTimePickerVisible: false, time })
+    setIsTimePickerVisible(false)
+    setTime(time)
     saveTempReminder({ time, enabled: true })
   }
 
-  onPickDateCancel = () => {
+  const onPickDateCancel = () => {
-    this.setState({ isTimePickerVisible: false })
+    setIsTimePickerVisible(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}
+        onToggle={temperatureReminderToggle}
         text={tempReminderText}
         value={isEnabled}
       />
       <DateTimePicker
         isVisible={isTimePickerVisible}
         mode="time"
-          onConfirm={this.onPickDate}
+        onConfirm={onPickDate}
-          onCancel={this.onPickDateCancel}
+        onCancel={onPickDateCancel}
         display={Platform.OS === 'ios' ? 'spinner' : 'default'}
       />
-      </React.Fragment>
+    </>
   )
 }
-}
 
 export default TemperatureReminder