diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js index b7364ce623fa..429fc41545ac 100755 --- a/src/pages/settings/InitialSettingsPage.js +++ b/src/pages/settings/InitialSettingsPage.js @@ -1,5 +1,5 @@ import lodashGet from 'lodash/get'; -import React from 'react'; +import React, {useState, useEffect, useRef} from 'react'; import {View, ScrollView} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; @@ -42,8 +42,6 @@ import * as CurrencyUtils from '../../libs/CurrencyUtils'; import PressableWithoutFeedback from '../../components/Pressable/PressableWithoutFeedback'; const propTypes = { - /* Onyx Props */ - /** The session of the logged in person */ session: PropTypes.shape({ /** Email of the logged in person */ @@ -123,42 +121,28 @@ const defaultProps = { ...withCurrentUserPersonalDetailsDefaultProps, }; -class InitialSettingsPage extends React.Component { - constructor(props) { - super(props); - - this.popoverAnchor = React.createRef(); +function InitialSettingsPage(props) { + const popoverAnchor = useRef(null); - this.getWalletBalance = this.getWalletBalance.bind(this); - this.getDefaultMenuItems = this.getDefaultMenuItems.bind(this); - this.getMenuItem = this.getMenuItem.bind(this); - this.toggleSignoutConfirmModal = this.toggleSignoutConfirmModal.bind(this); - this.signout = this.signOut.bind(this); + const [shouldShowSignoutConfirmModal, setShouldShowSignoutConfirmModal] = useState(false); - this.state = { - shouldShowSignoutConfirmModal: false, - }; - } - - componentDidMount() { + useEffect(() => { Wallet.openInitialSettingsPage(); - } + }, []); /** * @param {Boolean} isPaymentItem whether the item being rendered is the payments menu item * @returns {Number} the user wallet balance */ - getWalletBalance(isPaymentItem) { - return isPaymentItem && Permissions.canUseWallet(this.props.betas) ? CurrencyUtils.convertToDisplayString(this.props.userWallet.currentBalance) : undefined; - } + const getWalletBalance = (isPaymentItem) => (isPaymentItem && Permissions.canUseWallet(props.betas) ? CurrencyUtils.convertToDisplayString(props.userWallet.currentBalance) : undefined); /** * Retuns a list of default menu items * @returns {Array} the default menu items */ - getDefaultMenuItems() { - const policiesAvatars = _.chain(this.props.policies) - .filter((policy) => PolicyUtils.shouldShowPolicy(policy, this.props.network.isOffline)) + const getDefaultMenuItems = () => { + const policiesAvatars = _.chain(props.policies) + .filter((policy) => PolicyUtils.shouldShowPolicy(policy, props.network.isOffline)) .sortBy((policy) => policy.name.toLowerCase()) .map((policy) => ({ source: policy.avatar || ReportUtils.getDefaultWorkspaceAvatar(policy.name), @@ -168,14 +152,14 @@ class InitialSettingsPage extends React.Component { .value(); const policyBrickRoadIndicator = - !_.isEmpty(this.props.reimbursementAccount.errors) || - _.chain(this.props.policies) + !_.isEmpty(props.reimbursementAccount.errors) || + _.chain(props.policies) .filter((policy) => policy && policy.type === CONST.POLICY.TYPE.FREE && policy.role === CONST.POLICY.ROLE.ADMIN) - .some((policy) => PolicyUtils.hasPolicyError(policy) || PolicyUtils.getPolicyBrickRoadIndicatorStatus(policy, this.props.allPolicyMembers)) + .some((policy) => PolicyUtils.hasPolicyError(policy) || PolicyUtils.getPolicyBrickRoadIndicatorStatus(policy, props.allPolicyMembers)) .value() ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : null; - const profileBrickRoadIndicator = UserUtils.getLoginListBrickRoadIndicator(this.props.loginList); + const profileBrickRoadIndicator = UserUtils.getLoginListBrickRoadIndicator(props.loginList); return [ { @@ -225,9 +209,7 @@ class InitialSettingsPage extends React.Component { Navigation.navigate(ROUTES.SETTINGS_PAYMENTS); }, brickRoadIndicator: - PaymentMethods.hasPaymentMethodError(this.props.bankAccountList, this.props.cardList) || - !_.isEmpty(this.props.userWallet.errors) || - !_.isEmpty(this.props.walletTerms.errors) + PaymentMethods.hasPaymentMethodError(props.bankAccountList, props.cardList) || !_.isEmpty(props.userWallet.errors) || !_.isEmpty(props.walletTerms.errors) ? 'error' : null, }, @@ -252,14 +234,15 @@ class InitialSettingsPage extends React.Component { translationKey: 'initialSettingsPage.signOut', icon: Expensicons.Exit, action: () => { - this.signout(false); + // eslint-disable-next-line no-use-before-define + signOut(false); }, }, ]; - } + }; - getMenuItem(item, index) { - const keyTitle = item.translationKey ? this.props.translate(item.translationKey) : item.title; + const getMenuItem = (item, index) => { + const keyTitle = item.translationKey ? props.translate(item.translationKey) : item.title; const isPaymentItem = item.translationKey === 'common.payments'; return ( @@ -272,117 +255,113 @@ class InitialSettingsPage extends React.Component { iconStyles={item.iconStyles} shouldShowRightIcon iconRight={item.iconRight} - badgeText={this.getWalletBalance(isPaymentItem)} + badgeText={getWalletBalance(isPaymentItem)} fallbackIcon={item.fallbackIcon} brickRoadIndicator={item.brickRoadIndicator} floatRightAvatars={item.floatRightAvatars} shouldStackHorizontally={item.shouldStackHorizontally} avatarSize={item.avatarSize} - ref={this.popoverAnchor} + ref={popoverAnchor} shouldBlockSelection={Boolean(item.link)} - onSecondaryInteraction={!_.isEmpty(item.link) ? (e) => ReportActionContextMenu.showContextMenu(CONTEXT_MENU_TYPES.LINK, e, item.link, this.popoverAnchor.current) : undefined} + onSecondaryInteraction={!_.isEmpty(item.link) ? (e) => ReportActionContextMenu.showContextMenu(CONTEXT_MENU_TYPES.LINK, e, item.link, popoverAnchor.current) : undefined} /> ); - } + }; - toggleSignoutConfirmModal(value) { - this.setState({shouldShowSignoutConfirmModal: value}); - } + const toggleSignoutConfirmModal = (value) => { + setShouldShowSignoutConfirmModal(value); + }; - signOut(shouldForceSignout = false) { - if (!this.props.network.isOffline || shouldForceSignout) { + const signOut = (shouldForceSignout = false) => { + if (props.network.isOffline || shouldForceSignout) { Session.signOutAndRedirectToSignIn(); return; } // When offline, warn the user that any actions they took while offline will be lost if they sign out - this.toggleSignoutConfirmModal(true); - } + toggleSignoutConfirmModal(true); + }; - openProfileSettings() { + const openProfileSettings = () => { Navigation.navigate(ROUTES.SETTINGS_PROFILE); - } + }; - render() { - // On the very first sign in or after clearing storage these - // details will not be present on the first render so we'll just - // return nothing for now. - if (_.isEmpty(this.props.currentUserPersonalDetails)) { - return null; - } + // On the very first sign in or after clearing storage these + // details will not be present on the first render so we'll just + // return nothing for now. + if (_.isEmpty(props.currentUserPersonalDetails)) { + return null; + } - return ( - - {({safeAreaPaddingBottomStyle}) => ( - <> - - - - - - - - - - - + return ( + + {({safeAreaPaddingBottomStyle}) => ( + <> + + + + + - - - {this.props.currentUserPersonalDetails.displayName - ? this.props.currentUserPersonalDetails.displayName - : this.props.formatPhoneNumber(this.props.session.email)} - - + + + - {Boolean(this.props.currentUserPersonalDetails.displayName) && ( + + + - {this.props.formatPhoneNumber(this.props.session.email)} + {props.currentUserPersonalDetails.displayName ? props.currentUserPersonalDetails.displayName : props.formatPhoneNumber(props.session.email)} - )} - - {_.map(this.getDefaultMenuItems(), (item, index) => this.getMenuItem(item, index))} - - this.signOut(true)} - onCancel={() => this.toggleSignoutConfirmModal(false)} - /> + + + {Boolean(props.currentUserPersonalDetails.displayName) && ( + + {props.formatPhoneNumber(props.session.email)} + + )} - - - )} - - ); - } + {_.map(getDefaultMenuItems(), (item, index) => getMenuItem(item, index))} + + signOut(true)} + onCancel={() => toggleSignoutConfirmModal(false)} + /> + + + + )} + + ); } InitialSettingsPage.propTypes = propTypes;