Chore/make function components 2

components/settings/password/create.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 
 import Button from '../../common/button'
@@ -8,42 +8,35 @@ import showBackUpReminder from './show-backup-reminder'
 
 import settings from '../../../i18n/en/settings'
 
-export default class CreatePassword extends Component {
+const CreatePassword = ({ changeEncryptionAndRestart }) => {
-  static propTypes = {
+  const [isSettingPassword, setIsSettingPassword] = useState(false)
-    changeEncryptionAndRestart: PropTypes.func,
+
+  const startSettingPassword = () => {
+    showBackUpReminder(
+      () => {
+        setIsSettingPassword(true)
+      },
+      () => {}
+    )
   }
 
-  constructor() {
-    super()
-
-    this.state = { isSettingPassword: false }
-  }
-
-  toggleSettingPassword = () => {
-    const { isSettingPassword } = this.state
-    this.setState({ isSettingPassword: !isSettingPassword })
-  }
-
-  startSettingPassword = () => {
-    showBackUpReminder(this.toggleSettingPassword, () => {})
-  }
-
-  render() {
-    const { isSettingPassword } = this.state
   const labels = settings.passwordSettings
 
   if (!isSettingPassword) {
     return (
-        <Button isCTA onPress={this.startSettingPassword}>
+      <Button isCTA onPress={startSettingPassword}>
         {labels.setPassword}
       </Button>
     )
-    } else {
+  }
+
   return (
-        <EnterNewPassword
+    <EnterNewPassword changeEncryptionAndRestart={changeEncryptionAndRestart} />
-          changeEncryptionAndRestart={this.props.changeEncryptionAndRestart}
-        />
   )
-    }
-  }
 }
+
+CreatePassword.propTypes = {
+  changeEncryptionAndRestart: PropTypes.func,
+}
+
+export default CreatePassword

components/settings/password/delete.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 
 import Button from '../../common/button'
@@ -6,45 +6,43 @@ import ConfirmWithPassword from '../common/confirm-with-password'
 
 import labels from '../../../i18n/en/settings'
 
-export default class DeletePassword extends Component {
+const DeletePassword = ({
-  static propTypes = {
+  onStartDelete,
-    onStartDelete: PropTypes.func,
+  onCancelDelete,
-    onCancelDelete: PropTypes.func,
+  changeEncryptionAndRestart,
-    changeEncryptionAndRestart: PropTypes.func,
+}) => {
+  const [enteringCurrentPassword, setEnteringCurrentPassword] = useState(false)
+
+  const startConfirmWithPassword = () => {
+    setEnteringCurrentPassword(true)
+    onStartDelete()
   }
 
-  constructor() {
+  const cancelConfirmationWithPassword = () => {
-    super()
+    setEnteringCurrentPassword(false)
-
+    onCancelDelete()
-    this.state = { enteringCurrentPassword: false }
   }
 
-  startConfirmWithPassword = () => {
-    this.setState({ enteringCurrentPassword: true })
-    this.props.onStartDelete()
-  }
-
-  cancelConfirmationWithPassword = () => {
-    this.setState({ enteringCurrentPassword: false })
-    this.props.onCancelDelete()
-  }
-
-  render() {
-    const { enteringCurrentPassword } = this.state
-
   if (enteringCurrentPassword) {
     return (
       <ConfirmWithPassword
-          onSuccess={this.props.changeEncryptionAndRestart}
+        onSuccess={changeEncryptionAndRestart}
-          onCancel={this.cancelConfirmationWithPassword}
+        onCancel={cancelConfirmationWithPassword}
       />
     )
   }
 
   return (
-      <Button isCTA onPress={this.startConfirmWithPassword}>
+    <Button isCTA onPress={startConfirmWithPassword}>
       {labels.passwordSettings.deletePassword}
     </Button>
   )
-  }
 }
+
+DeletePassword.propTypes = {
+  onStartDelete: PropTypes.func,
+  onCancelDelete: PropTypes.func,
+  changeEncryptionAndRestart: PropTypes.func,
+}
+
+export default DeletePassword

components/settings/password/enter-new-password.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { useState, useEffect } from 'react'
 import { StyleSheet } from 'react-native'
 import nodejs from 'nodejs-mobile-react-native'
 import PropTypes from 'prop-types'
@@ -13,63 +13,38 @@ import settings from '../../../i18n/en/settings'
 
 const LISTENER_TYPE = 'create-or-change-pw'
 
-export default class EnterNewPassword extends Component {
+const EnterNewPassword = ({ changeEncryptionAndRestart }) => {
-  static propTypes = {
+  const [password, setPassword] = useState('')
-    changeEncryptionAndRestart: PropTypes.func,
+  const [passwordConfirmation, setPasswordConfirmation] = useState('')
-  }
+  const [shouldShowErrorMessage, setShouldShowErrorMessage] = useState(false)
-  constructor(props) {
+
-    super()
+  useEffect(() => {
-    this.state = {
+    const listener = nodejs.channel.addListener(
-      password: '',
-      passwordConfirmation: '',
-      shouldShowErrorMessage: false,
-    }
-    nodejs.channel.addListener(
       LISTENER_TYPE,
-      props.changeEncryptionAndRestart,
+      changeEncryptionAndRestart,
       this
     )
-  }
+    return () => listener.remove()
+  }, [])
 
-  componentWillUnmount() {
+  const savePassword = () => {
-    nodejs.channel.removeListener(
+    if (comparePasswords()) {
-      LISTENER_TYPE,
+      requestHash(LISTENER_TYPE, password)
-      this.props.changeEncryptionAndRestart
-    )
-  }
-
-  savePassword = () => {
-    if (this.comparePasswords()) {
-      requestHash(LISTENER_TYPE, this.state.password)
     } else {
-      this.setState({ shouldShowErrorMessage: true })
+      setShouldShowErrorMessage(true)
     }
   }
 
-  comparePasswords = () => {
+  const comparePasswords = () => password === passwordConfirmation
-    return this.state.password === this.state.passwordConfirmation
-  }
 
-  handlePasswordInput = (password) => {
-    this.setState({ password })
-  }
-
-  handleConfirmationInput = (passwordConfirmation) => {
-    this.setState({ passwordConfirmation })
-  }
-
-  render() {
-    const { password, passwordConfirmation, shouldShowErrorMessage } =
-      this.state
   const labels = settings.passwordSettings
-    const isButtonActive =
+  const isButtonActive = password.length > 0 && passwordConfirmation.length > 0
-      password.length > 0 && passwordConfirmation.length > 0
 
   return (
-      <React.Fragment>
+    <>
       <AppTextInput
         isKeyboardOffset={false}
-          onChangeText={this.handlePasswordInput}
+        onChangeText={setPassword}
         placeholder={labels.enterNew}
         textContentType="password"
         value={password}
@@ -77,7 +52,7 @@ export default class EnterNewPassword extends Component {
       />
       <AppTextInput
         isKeyboardOffset={false}
-          onChangeText={this.handleConfirmationInput}
+        onChangeText={setPasswordConfirmation}
         placeholder={labels.confirmPassword}
         textContentType="password"
         value={passwordConfirmation}
@@ -89,13 +64,16 @@ export default class EnterNewPassword extends Component {
       <Button
         isCTA={isButtonActive}
         disabled={!isButtonActive}
-          onPress={this.savePassword}
+        onPress={savePassword}
       >
         {labels.savePassword}
       </Button>
-      </React.Fragment>
+    </>
   )
-  }
+}
+
+EnterNewPassword.propTypes = {
+  changeEncryptionAndRestart: PropTypes.func,
 }
 
 const styles = StyleSheet.create({
@@ -104,3 +82,5 @@ const styles = StyleSheet.create({
     marginTop: Spacing.base,
   },
 })
+
+export default EnterNewPassword

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,48 +14,18 @@ import DeletePassword from './delete'
 import { hasEncryptionObservable } from '../../../local-storage'
 import labels from '../../../i18n/en/settings'
 
-class PasswordSetting extends Component {
+const PasswordSetting = ({ restartApp, navigate }) => {
-  static propTypes = {
+  const isPasswordSet = hasEncryptionObservable.value
-    navigate: PropTypes.func,
+  const [isChangingPassword, setIsChangingPassword] = useState(false)
-    restartApp: PropTypes.func,
+  const [isDeletingPassword, setIsDeletingPassword] = useState(false)
-  }
-  constructor(props) {
-    super(props)
 
-    this.state = {
+  const changeEncryptionAndRestart = async (hash) => {
-      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) => {
     await changeDbEncryption(hash)
-    await this.props.restartApp()
+    await restartApp()
-    this.props.navigate('Home')
+    navigate('Home')
   }
 
-  render() {
+  const { title, explainerEnabled, explainerDisabled } = labels.passwordSettings
-    const { isPasswordSet, isChangingPassword, isDeletingPassword } = this.state
-
-    const { title, explainerEnabled, explainerDisabled } =
-      labels.passwordSettings
 
   return (
     <AppPage>
@@ -66,29 +36,33 @@ class PasswordSetting extends Component {
 
         {!isPasswordSet && (
           <CreatePassword
-              changeEncryptionAndRestart={this.changeEncryptionAndRestart}
+            changeEncryptionAndRestart={changeEncryptionAndRestart}
           />
         )}
 
         {isPasswordSet && !isDeletingPassword && (
           <ChangePassword
-              onStartChange={this.onChangingPassword}
+            onStartChange={() => setIsChangingPassword(true)}
-              onCancelChange={this.onCancelChangingPassword}
+            onCancelChange={() => setIsChangingPassword(false)}
-              changeEncryptionAndRestart={this.changeEncryptionAndRestart}
+            changeEncryptionAndRestart={changeEncryptionAndRestart}
           />
         )}
 
         {isPasswordSet && !isChangingPassword && (
           <DeletePassword
-              onStartDelete={this.onDeletingPassword}
+            onStartDelete={() => setIsDeletingPassword(true)}
-              onCancelDelete={this.onCancelDeletingPassword}
+            onCancelDelete={() => setIsDeletingPassword(false)}
-              changeEncryptionAndRestart={this.changeEncryptionAndRestart}
+            changeEncryptionAndRestart={changeEncryptionAndRestart}
           />
         )}
       </Segment>
     </AppPage>
   )
-  }
+}
+
+PasswordSetting.propTypes = {
+  navigate: PropTypes.func,
+  restartApp: PropTypes.func,
 }
 
 export default PasswordSetting

components/settings/password/update.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 
 import Button from '../../common/button'
@@ -9,63 +9,48 @@ import ConfirmWithPassword from '../common/confirm-with-password'
 
 import settings from '../../../i18n/en/settings'
 
-export default class ChangePassword extends Component {
+const ChangePassword = ({
-  static propTypes = {
+  changeEncryptionAndRestart,
-    onStartChange: PropTypes.func,
+  onStartChange,
-    onCancelChange: PropTypes.func,
+  onCancelChange,
-    changeEncryptionAndRestart: PropTypes.func,
+}) => {
-  }
+  const [currentPassword, setCurrentPassword] = useState(null)
+  const [enteringCurrentPassword, setEnteringCurrentPassword] = useState(false)
+  const [enteringNewPassword, setEnteringNewPassword] = useState(false)
 
-  constructor() {
+  const startChangingPassword = () => {
-    super()
-
-    this.state = {
-      currentPassword: null,
-      enteringCurrentPassword: false,
-      enteringNewPassword: false,
-    }
-  }
-
-  startChangingPassword = () => {
     showBackUpReminder(
-      this.startEnteringCurrentPassword,
+      startEnteringCurrentPassword,
-      this.cancelConfirmationWithPassword
+      cancelConfirmationWithPassword
     )
   }
 
-  startEnteringCurrentPassword = () => {
+  const startEnteringCurrentPassword = () => {
-    this.setState({ enteringCurrentPassword: true })
+    setEnteringCurrentPassword(true)
-    this.props.onStartChange()
+    onStartChange()
   }
 
-  startEnteringNewPassword = () => {
+  const startEnteringNewPassword = () => {
-    this.setState({
+    setCurrentPassword(null)
-      currentPassword: null,
+    setEnteringNewPassword(true)
-      enteringNewPassword: true,
+    setEnteringCurrentPassword(false)
-      enteringCurrentPassword: false,
-    })
   }
 
-  cancelConfirmationWithPassword = () => {
+  const cancelConfirmationWithPassword = () => {
-    this.setState({
+    setCurrentPassword(null)
-      currentPassword: null,
+    setEnteringNewPassword(false)
-      enteringNewPassword: false,
+    setEnteringCurrentPassword(false)
-      enteringCurrentPassword: false,
+    onCancelChange()
-    })
-    this.props.onCancelChange()
   }
 
-  render() {
-    const { enteringCurrentPassword, enteringNewPassword, currentPassword } =
-      this.state
   const labels = settings.passwordSettings
   const isPasswordSet = currentPassword !== null
 
   if (enteringCurrentPassword) {
     return (
       <ConfirmWithPassword
-          onSuccess={this.startEnteringNewPassword}
+        onSuccess={startEnteringNewPassword}
-          onCancel={this.cancelConfirmationWithPassword}
+        onCancel={cancelConfirmationWithPassword}
       />
     )
   }
@@ -73,19 +58,22 @@ export default class ChangePassword extends Component {
   if (enteringNewPassword) {
     return (
       <EnterNewPassword
-          changeEncryptionAndRestart={this.props.changeEncryptionAndRestart}
+        changeEncryptionAndRestart={changeEncryptionAndRestart}
       />
     )
   }
 
   return (
-      <Button
+    <Button disabled={isPasswordSet} isCTA onPress={startChangingPassword}>
-        disabled={isPasswordSet}
-        isCTA
-        onPress={this.startChangingPassword}
-      >
       {labels.changePassword}
     </Button>
   )
-  }
+}
+
+export default ChangePassword
+
+ChangePassword.propTypes = {
+  onStartChange: PropTypes.func,
+  onCancelChange: PropTypes.func,
+  changeEncryptionAndRestart: PropTypes.func,
 }