Chore/make function components 3

components/app.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { useState, useEffect } from 'react'
 import { BackHandler, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 
@@ -7,99 +7,59 @@ import { LocalDate } from '@js-joda/core'
 import Header from './header'
 import Menu from './menu'
 import { viewsList } from './views'
-import { isSettingsView, pages } from './pages'
+import { pages } from './pages'
 
-import { headerTitles } from '../i18n/en/labels'
 import setupNotifications from '../lib/notifications'
 import { closeDb } from '../db'
 
-class App extends Component {
-  static propTypes = {
-    date: PropTypes.string,
-    navigate: PropTypes.func,
-    setDate: PropTypes.func,
-    goBack: PropTypes.func,
-    restartApp: PropTypes.func,
-  }
-
-  constructor(props) {
-    super(props)
-
-    this.backHandler = BackHandler.addEventListener(
-      'hardwareBackPress',
-      this.goBack
-    )
-
-    this.state = {
-      date: LocalDate.now().toString(),
-      currentPage: 'Home',
-    }
-
-    setupNotifications(this.navigate, this.setDate)
-  }
-
-  navigate = (page) => {
-    this.setState({ currentPage: page })
-  }
-
-  setDate = (date) => {
-    this.setState({ date })
-  }
-
-  goBack = () => {
-    const { currentPage } = this.state
-
+const App = ({ restartApp }) => {
+  const [date, setDate] = useState(LocalDate.now().toString())
+  const [currentPage, setCurrentPage] = useState('Home')
+  const goBack = () => {
     if (currentPage === 'Home') {
       closeDb()
       BackHandler.exitApp()
     } else {
       const { parent } = pages.find((p) => p.component === currentPage)
-      this.navigate(parent)
+
+      setCurrentPage(parent)
     }
 
     return true
   }
 
-  componentWillUnmount() {
-    this.backHandler.remove()
-  }
-
-  render() {
-    const { goBack, restartApp } = this.props
-    const { date, currentPage } = this.state
-    const { navigate } = this
-
-    if (!currentPage) {
-      return false
-    }
-
-    const Page = viewsList[currentPage]
-    const title = headerTitles[currentPage]
-
-    const isSettingsSubView = isSettingsView(currentPage)
-    const isTemperatureEditView = currentPage === 'TemperatureEditView'
-
-    const headerProps = {
-      title,
-      handleBack: isSettingsSubView ? goBack : null,
-      navigate,
-    }
-
-    const pageProps = {
-      date,
-      setDate: this.setDate,
-      isTemperatureEditView,
-      navigate,
-    }
-
-    return (
-      <View style={styles.container}>
-        <Header {...headerProps} />
-        <Page {...pageProps} restartApp={restartApp} />
-        <Menu currentPage={currentPage} navigate={navigate} />
-      </View>
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      goBack
     )
+
+    return () => backHandler.remove()
+  })
+
+  useEffect(() => setupNotifications(setCurrentPage, setDate), [])
+
+  const Page = viewsList[currentPage]
+  const isTemperatureEditView = currentPage === 'TemperatureEditView'
+  const headerProps = { navigate: setCurrentPage }
+  const pageProps = {
+    date,
+    setDate,
+    isTemperatureEditView,
+    navigate: setCurrentPage,
   }
+
+  return (
+    <View style={styles.container}>
+      <Header {...headerProps} />
+      <Page {...pageProps} restartApp={restartApp} />
+      <Menu currentPage={currentPage} navigate={setCurrentPage} />
+    </View>
+  )
+}
+
+App.propTypes = {
+  restartApp: PropTypes.func,
 }
 
 const styles = StyleSheet.create({