From efbc9ef0c25bb5d15a9ab185a7337e1a12cabaa6 Mon Sep 17 00:00:00 2001 From: yh-0218 Date: Thu, 29 Jun 2023 18:02:13 +0300 Subject: [PATCH 1/5] migrate InitialSettingsPage to function component #16281 --- src/pages/settings/InitialSettingsPage.js | 214 ++++++++++------------ 1 file changed, 100 insertions(+), 114 deletions(-) diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js index b7364ce623fa..d2286268fdb4 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'; @@ -123,42 +123,30 @@ const defaultProps = { ...withCurrentUserPersonalDetailsDefaultProps, }; -class InitialSettingsPage extends React.Component { - constructor(props) { - super(props); +function InitialSettingsPage(props) { + const popoverAnchor = useRef(null); + + const [shouldShowSignoutConfirmModal, setShouldShowSignoutConfirmModal] = useState(false); - this.popoverAnchor = React.createRef(); - - 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); - - 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) => { + return 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 +156,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 +213,9 @@ 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 +240,14 @@ class InitialSettingsPage extends React.Component { translationKey: 'initialSettingsPage.signOut', icon: Expensicons.Exit, action: () => { - this.signout(false); + 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 +260,115 @@ 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; From 18248cf7ae99ecc7fb17475cc08fc8cb90c0aaa1 Mon Sep 17 00:00:00 2001 From: yh-0218 Date: Sat, 1 Jul 2023 01:52:39 +0300 Subject: [PATCH 2/5] fixed lint issue on InitialSettingsPage --- src/pages/settings/InitialSettingsPage.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js index d2286268fdb4..bbf00a2370df 100755 --- a/src/pages/settings/InitialSettingsPage.js +++ b/src/pages/settings/InitialSettingsPage.js @@ -136,9 +136,7 @@ function InitialSettingsPage(props) { * @param {Boolean} isPaymentItem whether the item being rendered is the payments menu item * @returns {Number} the user wallet balance */ - const getWalletBalance = (isPaymentItem) => { - return isPaymentItem && Permissions.canUseWallet(props.betas) ? CurrencyUtils.convertToDisplayString(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 @@ -240,6 +238,7 @@ function InitialSettingsPage(props) { translationKey: 'initialSettingsPage.signOut', icon: Expensicons.Exit, action: () => { + // eslint-disable-next-line no-use-before-define signOut(false); }, }, From 2993392d9e9f1e763d20ddc19dbea2062a2c22a8 Mon Sep 17 00:00:00 2001 From: yh-0218 Date: Mon, 3 Jul 2023 20:32:40 +0300 Subject: [PATCH 3/5] run pretter for InitialSettingsPage --- src/pages/settings/InitialSettingsPage.js | 28 ++++++++++------------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js index bbf00a2370df..8965e4ec6b70 100755 --- a/src/pages/settings/InitialSettingsPage.js +++ b/src/pages/settings/InitialSettingsPage.js @@ -125,18 +125,18 @@ const defaultProps = { function InitialSettingsPage(props) { const popoverAnchor = useRef(null); - + const [shouldShowSignoutConfirmModal, setShouldShowSignoutConfirmModal] = useState(false); useEffect(() => { Wallet.openInitialSettingsPage(); - }, []) + }, []); /** * @param {Boolean} isPaymentItem whether the item being rendered is the payments menu item * @returns {Number} the user wallet balance */ - const getWalletBalance = (isPaymentItem) => isPaymentItem && Permissions.canUseWallet(props.betas) ? CurrencyUtils.convertToDisplayString(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 @@ -211,9 +211,7 @@ function InitialSettingsPage(props) { Navigation.navigate(ROUTES.SETTINGS_PAYMENTS); }, brickRoadIndicator: - PaymentMethods.hasPaymentMethodError(props.bankAccountList, props.cardList) || - !_.isEmpty(props.userWallet.errors) || - !_.isEmpty(props.walletTerms.errors) + PaymentMethods.hasPaymentMethodError(props.bankAccountList, props.cardList) || !_.isEmpty(props.userWallet.errors) || !_.isEmpty(props.walletTerms.errors) ? 'error' : null, }, @@ -243,7 +241,7 @@ function InitialSettingsPage(props) { }, }, ]; - } + }; const getMenuItem = (item, index) => { const keyTitle = item.translationKey ? props.translate(item.translationKey) : item.title; @@ -270,13 +268,13 @@ function InitialSettingsPage(props) { onSecondaryInteraction={!_.isEmpty(item.link) ? (e) => ReportActionContextMenu.showContextMenu(CONTEXT_MENU_TYPES.LINK, e, item.link, popoverAnchor.current) : undefined} /> ); - } + }; const toggleSignoutConfirmModal = (value) => { - setShouldShowSignoutConfirmModal(value) - } + setShouldShowSignoutConfirmModal(value); + }; - const signOut = (shouldForceSignout = false) => { + const signOut = (shouldForceSignout = false) => { if (props.network.isOffline || shouldForceSignout) { Session.signOutAndRedirectToSignIn(); return; @@ -284,11 +282,11 @@ function InitialSettingsPage(props) { // When offline, warn the user that any actions they took while offline will be lost if they sign out toggleSignoutConfirmModal(true); - } + }; const openProfileSettings = () => { Navigation.navigate(ROUTES.SETTINGS_PROFILE); - } + }; // On the very first sign in or after clearing storage these // details will not be present on the first render so we'll just @@ -335,9 +333,7 @@ function InitialSettingsPage(props) { style={[styles.textHeadline, styles.pre]} numberOfLines={1} > - {props.currentUserPersonalDetails.displayName - ? props.currentUserPersonalDetails.displayName - : props.formatPhoneNumber(props.session.email)} + {props.currentUserPersonalDetails.displayName ? props.currentUserPersonalDetails.displayName : props.formatPhoneNumber(props.session.email)} From e3fa5a977c074acd8fb428fcccdfa1f3c228ef76 Mon Sep 17 00:00:00 2001 From: yh-0218 Date: Tue, 4 Jul 2023 10:23:08 +0300 Subject: [PATCH 4/5] add gpg key --- src/pages/settings/InitialSettingsPage.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js index 8965e4ec6b70..429fc41545ac 100755 --- a/src/pages/settings/InitialSettingsPage.js +++ b/src/pages/settings/InitialSettingsPage.js @@ -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 */ From 095f059d57bcff6ffb578814497f4192e98d6793 Mon Sep 17 00:00:00 2001 From: yh-0218 Date: Tue, 4 Jul 2023 10:23:08 +0300 Subject: [PATCH 5/5] add gpg key --- src/pages/settings/InitialSettingsPage.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js index 8965e4ec6b70..429fc41545ac 100755 --- a/src/pages/settings/InitialSettingsPage.js +++ b/src/pages/settings/InitialSettingsPage.js @@ -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 */