Merge branch 'chore/refactor-app-wrapper' into 'main'

Refactor app wrapper

See merge request bloodyhealth/drip!487

components/app-wrapper.js

@@ -1,5 +1,4 @@
-import React, { Component } from 'react'
+import React, { useState, useEffect } from 'react'
-import { StyleSheet, View } from 'react-native'
 import { Provider } from 'react-redux'
 import nodejs from 'nodejs-mobile-react-native'
 
@@ -14,91 +13,45 @@ import PasswordPrompt from './password-prompt'
 
 import store from '../store'
 
-export default class AppWrapper extends Component {
+export default function AppWrapper() {
-  constructor() {
+  const [isLoading, setIsLoading] = useState(true)
-    super()
+  const [isLicenseAccepted, setIsLicenseAccepted] = useState(false)
-    this.state = {
+  const [isDbEncrypted, setIsDbEncrypted] = useState(false)
-      isCheckingLicenseAgreement: true,
-      shouldShowLicenseAgreement: false,
-      shouldShowPasswordPrompt: false,
-      shouldShowApp: false,
-    }
-    nodejs.start('main.js')
-    this.checkLicenseAgreement()
-    this.checkDbPasswordSet()
-  }
 
-  async checkLicenseAgreement() {
+  const checkIsLicenseAccepted = async () => {
     const isLicenseFlagSet = await getLicenseFlag()
-    if (!isLicenseFlagSet) {
+    setIsLicenseAccepted(isLicenseFlagSet)
-      this.enableShowLicenseAgreement()
+    setIsLoading(false)
-    } else {
-      this.setState({ isCheckingLicenseAgreement: false })
-    }
   }
 
-  async checkDbPasswordSet() {
+  const checkIsDbEncrypted = async () => {
-    const canConnectToDb = await openDb()
+    const isEncrypted = !(await openDb())
-    if (canConnectToDb) {
+    if (isEncrypted) setIsDbEncrypted(true)
-      this.enableShowApp()
+    await saveEncryptionFlag(isEncrypted)
-      await saveEncryptionFlag(false)
-      return false
-    }
-    this.setState({ shouldShowPasswordPrompt: true })
-    await saveEncryptionFlag(true)
   }
 
-  enableShowLicenseAgreement = () => {
+  useEffect(() => {
-    this.setState({
+    nodejs.start('main.js')
-      shouldShowLicenseAgreement: true,
+    checkIsLicenseAccepted()
-      isCheckingLicenseAgreement: false,
+    checkIsDbEncrypted()
-    })
+  }, [])
+
+  if (isLoading) {
+    return <AppLoadingView />
   }
 
-  disableShowLicenseAgreement = () => {
+  if (!isLicenseAccepted) {
-    this.setState({ shouldShowLicenseAgreement: false })
+    return <License setLicense={() => setIsLicenseAccepted(true)} />
   }
 
-  enableShowApp = () => {
+  return (
-    this.setState({
+    <Provider store={store}>
-      shouldShowApp: true,
+      <AppStatusBar />
-      shouldShowPasswordPrompt: false,
+      {isDbEncrypted ? (
-    })
+        <PasswordPrompt enableShowApp={() => setIsDbEncrypted(false)} />
-  }
+      ) : (
-
+        <App restartApp={() => checkIsDbEncrypted()} />
-  render() {
+      )}
-    const {
+    </Provider>
-      isCheckingLicenseAgreement,
+  )
-      shouldShowLicenseAgreement,
-      shouldShowPasswordPrompt,
-      shouldShowApp,
-    } = this.state
-
-    let initialView = null
-
-    if (isCheckingLicenseAgreement) {
-      initialView = <AppLoadingView />
-    } else if (shouldShowLicenseAgreement) {
-      initialView = <License setLicense={this.disableShowLicenseAgreement} />
-    } else if (shouldShowPasswordPrompt) {
-      initialView = <PasswordPrompt enableShowApp={this.enableShowApp} />
-    } else if (shouldShowApp) {
-      initialView = <App restartApp={() => this.checkDbPasswordSet()} />
-    }
-
-    return (
-      <Provider store={store}>
-        <View style={styles.container}>
-          <AppStatusBar />
-          {initialView}
-        </View>
-      </Provider>
-    )
-  }
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-})