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() {
+  const labels = settings.passwordSettings
-    super()
 
-    this.state = { isSettingPassword: false }
+  if (!isSettingPassword) {
+    return (
+      <Button isCTA onPress={startSettingPassword}>
+        {labels.setPassword}
+      </Button>
+    )
   }
 
-  toggleSettingPassword = () => {
+  return (
-    const { isSettingPassword } = this.state
+    <EnterNewPassword changeEncryptionAndRestart={changeEncryptionAndRestart} />
-    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}>
-          {labels.setPassword}
-        </Button>
-      )
-    } else {
-      return (
-        <EnterNewPassword
-          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 = () => {
+  if (enteringCurrentPassword) {
-    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}
-          onCancel={this.cancelConfirmationWithPassword}
-        />
-      )
-    }
-
     return (
-      <Button isCTA onPress={this.startConfirmWithPassword}>
+      <ConfirmWithPassword
-        {labels.passwordSettings.deletePassword}
+        onSuccess={changeEncryptionAndRestart}
-      </Button>
+        onCancel={cancelConfirmationWithPassword}
+      />
     )
   }
+
+  return (
+    <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,89 +13,67 @@ 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) => {
+  const labels = settings.passwordSettings
-    this.setState({ password })
+  const isButtonActive = password.length > 0 && passwordConfirmation.length > 0
-  }
 
-  handleConfirmationInput = (passwordConfirmation) => {
+  return (
-    this.setState({ passwordConfirmation })
+    <>
-  }
+      <AppTextInput
+        isKeyboardOffset={false}
+        onChangeText={setPassword}
+        placeholder={labels.enterNew}
+        textContentType="password"
+        value={password}
+        secureTextEntry={true}
+      />
+      <AppTextInput
+        isKeyboardOffset={false}
+        onChangeText={setPasswordConfirmation}
+        placeholder={labels.confirmPassword}
+        textContentType="password"
+        value={passwordConfirmation}
+        secureTextEntry={true}
+      />
+      {shouldShowErrorMessage && (
+        <AppText style={styles.error}>{labels.passwordsDontMatch}</AppText>
+      )}
+      <Button
+        isCTA={isButtonActive}
+        disabled={!isButtonActive}
+        onPress={savePassword}
+      >
+        {labels.savePassword}
+      </Button>
+    </>
+  )
+}
 
-  render() {
+EnterNewPassword.propTypes = {
-    const { password, passwordConfirmation, shouldShowErrorMessage } =
+  changeEncryptionAndRestart: PropTypes.func,
-      this.state
-    const labels = settings.passwordSettings
-    const isButtonActive =
-      password.length > 0 && passwordConfirmation.length > 0
-
-    return (
-      <React.Fragment>
-        <AppTextInput
-          isKeyboardOffset={false}
-          onChangeText={this.handlePasswordInput}
-          placeholder={labels.enterNew}
-          textContentType="password"
-          value={password}
-          secureTextEntry={true}
-        />
-        <AppTextInput
-          isKeyboardOffset={false}
-          onChangeText={this.handleConfirmationInput}
-          placeholder={labels.confirmPassword}
-          textContentType="password"
-          value={passwordConfirmation}
-          secureTextEntry={true}
-        />
-        {shouldShowErrorMessage && (
-          <AppText style={styles.error}>{labels.passwordsDontMatch}</AppText>
-        )}
-        <Button
-          isCTA={isButtonActive}
-          disabled={!isButtonActive}
-          onPress={this.savePassword}
-        >
-          {labels.savePassword}
-        </Button>
-      </React.Fragment>
-    )
-  }
 }
 
 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,81 +14,55 @@ 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 } =
+  return (
-      labels.passwordSettings
+    <AppPage>
+      <Segment title={title} last>
+        <AppText>
+          {isPasswordSet ? explainerEnabled : explainerDisabled}
+        </AppText>
 
-    return (
+        {!isPasswordSet && (
-      <AppPage>
+          <CreatePassword
-        <Segment title={title} last>
+            changeEncryptionAndRestart={changeEncryptionAndRestart}
-          <AppText>
+          />
-            {isPasswordSet ? explainerEnabled : explainerDisabled}
+        )}
-          </AppText>
 
-          {!isPasswordSet && (
+        {isPasswordSet && !isDeletingPassword && (
-            <CreatePassword
+          <ChangePassword
-              changeEncryptionAndRestart={this.changeEncryptionAndRestart}
+            onStartChange={() => setIsChangingPassword(true)}
-            />
+            onCancelChange={() => setIsChangingPassword(false)}
-          )}
+            changeEncryptionAndRestart={changeEncryptionAndRestart}
+          />
+        )}
 
-          {isPasswordSet && !isDeletingPassword && (
+        {isPasswordSet && !isChangingPassword && (
-            <ChangePassword
+          <DeletePassword
-              onStartChange={this.onChangingPassword}
+            onStartDelete={() => setIsDeletingPassword(true)}
-              onCancelChange={this.onCancelChangingPassword}
+            onCancelDelete={() => setIsDeletingPassword(false)}
-              changeEncryptionAndRestart={this.changeEncryptionAndRestart}
+            changeEncryptionAndRestart={changeEncryptionAndRestart}
-            />
+          />
-          )}
+        )}
+      </Segment>
+    </AppPage>
+  )
+}
 
-          {isPasswordSet && !isChangingPassword && (
+PasswordSetting.propTypes = {
-            <DeletePassword
+  navigate: PropTypes.func,
-              onStartDelete={this.onDeletingPassword}
+  restartApp: PropTypes.func,
-              onCancelDelete={this.onCancelDeletingPassword}
-              changeEncryptionAndRestart={this.changeEncryptionAndRestart}
-            />
-          )}
-        </Segment>
-      </AppPage>
-    )
-  }
 }
 
 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,83 +9,71 @@ 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 labels = settings.passwordSettings
-    const { enteringCurrentPassword, enteringNewPassword, currentPassword } =
+  const isPasswordSet = currentPassword !== null
-      this.state
-    const labels = settings.passwordSettings
-    const isPasswordSet = currentPassword !== null
-
-    if (enteringCurrentPassword) {
-      return (
-        <ConfirmWithPassword
-          onSuccess={this.startEnteringNewPassword}
-          onCancel={this.cancelConfirmationWithPassword}
-        />
-      )
-    }
-
-    if (enteringNewPassword) {
-      return (
-        <EnterNewPassword
-          changeEncryptionAndRestart={this.props.changeEncryptionAndRestart}
-        />
-      )
-    }
 
+  if (enteringCurrentPassword) {
     return (
-      <Button
+      <ConfirmWithPassword
-        disabled={isPasswordSet}
+        onSuccess={startEnteringNewPassword}
-        isCTA
+        onCancel={cancelConfirmationWithPassword}
-        onPress={this.startChangingPassword}
+      />
-      >
-        {labels.changePassword}
-      </Button>
     )
   }
+
+  if (enteringNewPassword) {
+    return (
+      <EnterNewPassword
+        changeEncryptionAndRestart={changeEncryptionAndRestart}
+      />
+    )
+  }
+
+  return (
+    <Button disabled={isPasswordSet} isCTA onPress={startChangingPassword}>
+      {labels.changePassword}
+    </Button>
+  )
+}
+
+export default ChangePassword
+
+ChangePassword.propTypes = {
+  onStartChange: PropTypes.func,
+  onCancelChange: PropTypes.func,
+  changeEncryptionAndRestart: PropTypes.func,
 }