Refactors App wrapper component

components/app-wrapper.js

@@ -1,44 +1,86 @@
 import React, { Component } from 'react'
-import { View } from 'react-native'
 import nodejs from 'nodejs-mobile-react-native'
+
+import { getLicenseFlag, saveEncryptionFlag } from '../local-storage'
+import { openDb } from '../db'
+
 import App from './app'
 import PasswordPrompt from './password-prompt'
 import License from './license'
-import { getLicenseFlag } from '../local-storage'
+import AppLoadingView from './app-loading'
 
 export default class AppWrapper extends Component {
   constructor() {
     super()
     this.state = {
-      retrievingLicenseSetting: true
+      isCheckingLicenseAgreement: true,
+      shouldShowLicenseAgreement: false,
+      shouldShowPasswordPrompt: false,
+      shouldShowApp: false,
     }
     nodejs.start('main.js')
     this.checkLicenseAgreement()
+    this.checkDbPasswordSet()
   }
 
   async checkLicenseAgreement() {
-    const agreed = await getLicenseFlag()
+    const isLicenseFlagSet = await getLicenseFlag()
-    this.setState({retrievingLicenseSetting: false})
+    if (!isLicenseFlagSet) {
-    if (!agreed) this.setState({showLicense: true})
+      this.enableShowLicenseAgreement()
+    } else {
+      this.setState({ isCheckingLicenseAgreement: false })
+    }
+  }
+
+  async checkDbPasswordSet() {
+    const canConnectToDb = await openDb()
+    if (canConnectToDb) {
+      this.enableShowApp()
+      await saveEncryptionFlag(false)
+      return false
+    }
+    this.setState({ shouldShowPasswordPrompt: true })
+    await saveEncryptionFlag(true)
+  }
+
+  enableShowLicenseAgreement = () => {
+    this.setState({
+      shouldShowLicenseAgreement: true,
+      isCheckingLicenseAgreement: false
+    })
+  }
+
+  disableShowLicenseAgreement = () => {
+    this.setState({ shouldShowLicenseAgreement: false })
+  }
+
+  enableShowApp = () => {
+    this.setState({
+      shouldShowApp: true,
+      shouldShowPasswordPrompt: false
+    })
   }
 
   render() {
-    const whiteScreen = <View style={{ flex: 1 }}></View>
+    const {
-    const licenseScreen = <License setLicense={() => {
+      isCheckingLicenseAgreement,
-      this.setState({showLicense: false})
+      shouldShowLicenseAgreement,
-    }}/>
+      shouldShowPasswordPrompt,
-    const passwordPrompt = <PasswordPrompt showApp={() => {
+      shouldShowApp,
-      this.setState({showApp: true})
+    } = this.state
-    }}/>
 
-    if (this.state.retrievingLicenseSetting) {
+    if (isCheckingLicenseAgreement) {
-      return whiteScreen
+      return <AppLoadingView />
-    } else if (this.state.showLicense) {
-      return licenseScreen
-    } else if (!this.state.showApp) {
-      return passwordPrompt
-    } else {
-      return <App/>
     }
+
+    if (shouldShowLicenseAgreement) {
+      return <License setLicense={this.disableShowLicenseAgreement}/>
+    }
+
+    if (shouldShowPasswordPrompt) {
+      return <PasswordPrompt enableShowApp={this.enableShowApp} />
+    }
+
+    return shouldShowApp && <App />
   }
 }

components/password-prompt.js

@@ -20,19 +20,6 @@ export default class PasswordPrompt extends Component {
       this.passHashToDb,
       this
     )
-
-    this.tryToOpenDb()
-  }
-
-  async tryToOpenDb() {
-    const connected = await openDb()
-    if (!connected) {
-      this.setState({ showPasswordPrompt: true })
-      await saveEncryptionFlag(true)
-      return
-    }
-    await saveEncryptionFlag(false)
-    this.props.showApp()
   }
 
   passHashToDb = async hash => {
@@ -48,7 +35,7 @@ export default class PasswordPrompt extends Component {
       )
       return
     }
-    this.props.showApp()
+    this.props.enableShowApp()
   }
 
   confirmDeletion = async () => {
@@ -72,7 +59,7 @@ export default class PasswordPrompt extends Component {
               onPress: async () => {
                 await deleteDbAndOpenNew()
                 await saveEncryptionFlag(false)
-                this.props.showApp()
+                this.props.enableShowApp()
               }
             }]
           )
@@ -89,35 +76,32 @@ export default class PasswordPrompt extends Component {
     return (
       <View flex={1}>
         <Header title={menuTitles.PasswordPrompt.toLowerCase()} />
-        {this.state.showPasswordPrompt &&
+        <View style={styles.passwordPromptPage}>
-          <View style={styles.passwordPromptPage}>
+          <TextInput
-
+            onChangeText={val => this.setState({ password: val })}
-            <TextInput
+            style={styles.passwordPromptField}
-              onChangeText={val => this.setState({ password: val })}
+            secureTextEntry={true}
-              style={styles.passwordPromptField}
+            placeholder={labels.enterPassword}
-              secureTextEntry={true}
+          />
-              placeholder={labels.enterPassword}
+          <TouchableOpacity
-            />
+            style={styles.passwordPromptButton}
-            <TouchableOpacity
+            onPress={() => {
-              style={styles.passwordPromptButton}
+              requestHash('check-pw', this.state.password)
-              onPress={() => {
+            }}
-                requestHash('check-pw', this.state.password)
+            disabled={!this.state.password}
-              }}
+          >
-              disabled={!this.state.password}
+            <AppText style={styles.passwordPromptButtonText}>
-            >
+              {labels.title}
-              <AppText style={styles.passwordPromptButtonText}>
+            </AppText>
-                {labels.title}
+          </TouchableOpacity>
-              </AppText>
+          <TouchableOpacity
-            </TouchableOpacity>
+            onPress={this.confirmDeletion}
-            <TouchableOpacity
+          >
-              onPress={this.confirmDeletion}
+            <AppText style={styles.passwordPromptForgotPasswordText}>
-            >
+              {labels.forgotPassword}
-              <AppText style={styles.passwordPromptForgotPasswordText}>
+            </AppText>
-                {labels.forgotPassword}
+          </TouchableOpacity>
-              </AppText>
+        </View>
-            </TouchableOpacity>
-          </View>
-        }
       </View>
     )
   }