Chore/make function components 2

components/settings/password/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 
 import { changeDbEncryption } from '../../../db'
@@ -14,81 +14,55 @@ import DeletePassword from './delete'
 import { hasEncryptionObservable } from '../../../local-storage'
 import labels from '../../../i18n/en/settings'
 
-class PasswordSetting extends Component {
-  static propTypes = {
-    navigate: PropTypes.func,
-    restartApp: PropTypes.func,
-  }
-  constructor(props) {
-    super(props)
+const PasswordSetting = ({ restartApp, navigate }) => {
+  const isPasswordSet = hasEncryptionObservable.value
+  const [isChangingPassword, setIsChangingPassword] = useState(false)
+  const [isDeletingPassword, setIsDeletingPassword] = useState(false)
 
-    this.state = {
-      isPasswordSet: hasEncryptionObservable.value,
-      isChangingPassword: false,
-      isDeletingPassword: false,
-    }
-  }
-
-  onChangingPassword = () => {
-    this.setState({ isChangingPassword: true })
-  }
-
-  onCancelChangingPassword = () => {
-    this.setState({ isChangingPassword: false })
-  }
-
-  onDeletingPassword = () => {
-    this.setState({ isDeletingPassword: true })
-  }
-
-  onCancelDeletingPassword = () => {
-    this.setState({ isDeletingPassword: false })
-  }
-
-  changeEncryptionAndRestart = async (hash) => {
+  const changeEncryptionAndRestart = async (hash) => {
     await changeDbEncryption(hash)
-    await this.props.restartApp()
-    this.props.navigate('Home')
+    await restartApp()
+    navigate('Home')
   }
 
-  render() {
-    const { isPasswordSet, isChangingPassword, isDeletingPassword } = this.state
+  const { title, explainerEnabled, explainerDisabled } = labels.passwordSettings
 
-    const { title, explainerEnabled, explainerDisabled } =
-      labels.passwordSettings
+  return (
+    <AppPage>
+      <Segment title={title} last>
+        <AppText>
+          {isPasswordSet ? explainerEnabled : explainerDisabled}
+        </AppText>
 
-    return (
-      <AppPage>
-        <Segment title={title} last>
-          <AppText>
-            {isPasswordSet ? explainerEnabled : explainerDisabled}
-          </AppText>
+        {!isPasswordSet && (
+          <CreatePassword
+            changeEncryptionAndRestart={changeEncryptionAndRestart}
+          />
+        )}
 
-          {!isPasswordSet && (
-            <CreatePassword
-              changeEncryptionAndRestart={this.changeEncryptionAndRestart}
-            />
-          )}
+        {isPasswordSet && !isDeletingPassword && (
+          <ChangePassword
+            onStartChange={() => setIsChangingPassword(true)}
+            onCancelChange={() => setIsChangingPassword(false)}
+            changeEncryptionAndRestart={changeEncryptionAndRestart}
+          />
+        )}
 
-          {isPasswordSet && !isDeletingPassword && (
-            <ChangePassword
-              onStartChange={this.onChangingPassword}
-              onCancelChange={this.onCancelChangingPassword}
-              changeEncryptionAndRestart={this.changeEncryptionAndRestart}
-            />
-          )}
+        {isPasswordSet && !isChangingPassword && (
+          <DeletePassword
+            onStartDelete={() => setIsDeletingPassword(true)}
+            onCancelDelete={() => setIsDeletingPassword(false)}
+            changeEncryptionAndRestart={changeEncryptionAndRestart}
+          />
+        )}
+      </Segment>
+    </AppPage>
+  )
+}
 
-          {isPasswordSet && !isChangingPassword && (
-            <DeletePassword
-              onStartDelete={this.onDeletingPassword}
-              onCancelDelete={this.onCancelDeletingPassword}
-              changeEncryptionAndRestart={this.changeEncryptionAndRestart}
-            />
-          )}
-        </Segment>
-      </AppPage>
-    )
-  }
+PasswordSetting.propTypes = {
+  navigate: PropTypes.func,
+  restartApp: PropTypes.func,
 }
 
 export default PasswordSetting