From f83f3e33a0be6cd13744814668cccfe81c11c7fb Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Thu, 28 Sep 2023 14:23:02 +0700 Subject: [PATCH 1/3] Fix pronouns is empty when we access by deep link after signing in --- src/pages/settings/Profile/PronounsPage.js | 73 +++++++++++++++------- 1 file changed, 52 insertions(+), 21 deletions(-) diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js index dbfd067de4bb..b38b93fa6bec 100644 --- a/src/pages/settings/Profile/PronounsPage.js +++ b/src/pages/settings/Profile/PronounsPage.js @@ -1,6 +1,8 @@ import _ from 'underscore'; import lodashGet from 'lodash/get'; -import React, {useState, useMemo} from 'react'; +import React, {useState, useMemo, useRef, useEffect} from 'react'; +import {withOnyx} from 'react-native-onyx'; +import PropTypes from 'prop-types'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../../components/withCurrentUserPersonalDetails'; import ScreenWrapper from '../../../components/ScreenWrapper'; import HeaderWithBackButton from '../../../components/HeaderWithBackButton'; @@ -12,27 +14,43 @@ import ROUTES from '../../../ROUTES'; import Navigation from '../../../libs/Navigation/Navigation'; import SelectionList from '../../../components/SelectionList'; import useLocalize from '../../../hooks/useLocalize'; +import ONYXKEYS from '../../../ONYXKEYS'; +import FullScreenLoadingIndicator from '../../../components/FullscreenLoadingIndicator'; +import compose from '../../../libs/compose'; const propTypes = { ...withCurrentUserPersonalDetailsPropTypes, + + /** Indicates whether the app is loading initial data */ + isLoadingReportData: PropTypes.bool, }; const defaultProps = { ...withCurrentUserPersonalDetailsDefaultProps, + isLoadingReportData: true, }; -function PronounsPage({currentUserPersonalDetails}) { +function PronounsPage({currentUserPersonalDetails, isLoadingReportData}) { const {translate} = useLocalize(); const currentPronouns = lodashGet(currentUserPersonalDetails, 'pronouns', ''); const currentPronounsKey = currentPronouns.substring(CONST.PRONOUNS.PREFIX.length); + const loadingCompleteRef = useRef(false); + const [searchValue, setSearchValue] = useState(''); - const [searchValue, setSearchValue] = useState(() => { + useEffect(() => { + if ((isLoadingReportData && _.isEmpty(currentUserPersonalDetails.login)) || loadingCompleteRef.current) { + return; + } + loadingCompleteRef.current = true; const currentPronounsText = _.chain(CONST.PRONOUNS_LIST) .find((_value) => _value === currentPronounsKey) .value(); - return currentPronounsText ? translate(`pronouns.${currentPronounsText}`) : ''; - }); + setSearchValue(currentPronounsText ? translate(`pronouns.${currentPronounsText}`) : ''); + + // Only need to add login to dependency because after the data is loaded, other fields are also exist + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [currentUserPersonalDetails.login, isLoadingReportData]); const filteredPronounsList = useMemo(() => { const pronouns = _.chain(CONST.PRONOUNS_LIST) @@ -69,21 +87,27 @@ function PronounsPage({currentUserPersonalDetails}) { includeSafeAreaPaddingBottom={false} testID={PronounsPage.displayName} > - Navigation.goBack(ROUTES.SETTINGS_PROFILE)} - /> - {translate('pronounsPage.isShownOnProfile')} - + {isLoadingReportData && _.isEmpty(currentUserPersonalDetails.login) ? ( + + ) : ( + <> + Navigation.goBack(ROUTES.SETTINGS_PROFILE)} + /> + {translate('pronounsPage.isShownOnProfile')} + + + )} ); } @@ -92,4 +116,11 @@ PronounsPage.propTypes = propTypes; PronounsPage.defaultProps = defaultProps; PronounsPage.displayName = 'PronounsPage'; -export default withCurrentUserPersonalDetails(PronounsPage); +export default compose( + withCurrentUserPersonalDetails, + withOnyx({ + isLoadingReportData: { + key: ONYXKEYS.IS_LOADING_REPORT_DATA, + }, + }), +)(PronounsPage); From e401f199b9788b5766f748c9f4454ee9561443f1 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Tue, 3 Oct 2023 08:22:20 +0700 Subject: [PATCH 2/3] use isLoadingApp --- src/pages/settings/Profile/PronounsPage.js | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js index b38b93fa6bec..7d289b8bc2f4 100644 --- a/src/pages/settings/Profile/PronounsPage.js +++ b/src/pages/settings/Profile/PronounsPage.js @@ -1,6 +1,6 @@ import _ from 'underscore'; import lodashGet from 'lodash/get'; -import React, {useState, useMemo, useRef, useEffect} from 'react'; +import React, {useState, useMemo, useEffect} from 'react'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../../components/withCurrentUserPersonalDetails'; @@ -22,26 +22,24 @@ const propTypes = { ...withCurrentUserPersonalDetailsPropTypes, /** Indicates whether the app is loading initial data */ - isLoadingReportData: PropTypes.bool, + isLoadingApp: PropTypes.bool, }; const defaultProps = { ...withCurrentUserPersonalDetailsDefaultProps, - isLoadingReportData: true, + isLoadingApp: true, }; -function PronounsPage({currentUserPersonalDetails, isLoadingReportData}) { +function PronounsPage({currentUserPersonalDetails, isLoadingApp}) { const {translate} = useLocalize(); const currentPronouns = lodashGet(currentUserPersonalDetails, 'pronouns', ''); const currentPronounsKey = currentPronouns.substring(CONST.PRONOUNS.PREFIX.length); - const loadingCompleteRef = useRef(false); const [searchValue, setSearchValue] = useState(''); useEffect(() => { - if ((isLoadingReportData && _.isEmpty(currentUserPersonalDetails.login)) || loadingCompleteRef.current) { + if (isLoadingApp && _.isEmpty(currentUserPersonalDetails.login)) { return; } - loadingCompleteRef.current = true; const currentPronounsText = _.chain(CONST.PRONOUNS_LIST) .find((_value) => _value === currentPronounsKey) .value(); @@ -50,7 +48,7 @@ function PronounsPage({currentUserPersonalDetails, isLoadingReportData}) { // Only need to add login to dependency because after the data is loaded, other fields are also exist // eslint-disable-next-line react-hooks/exhaustive-deps - }, [currentUserPersonalDetails.login, isLoadingReportData]); + }, [currentUserPersonalDetails.login, isLoadingApp]); const filteredPronounsList = useMemo(() => { const pronouns = _.chain(CONST.PRONOUNS_LIST) @@ -87,7 +85,7 @@ function PronounsPage({currentUserPersonalDetails, isLoadingReportData}) { includeSafeAreaPaddingBottom={false} testID={PronounsPage.displayName} > - {isLoadingReportData && _.isEmpty(currentUserPersonalDetails.login) ? ( + {isLoadingApp && _.isEmpty(currentUserPersonalDetails.login) ? ( ) : ( <> @@ -119,8 +117,8 @@ PronounsPage.displayName = 'PronounsPage'; export default compose( withCurrentUserPersonalDetails, withOnyx({ - isLoadingReportData: { - key: ONYXKEYS.IS_LOADING_REPORT_DATA, + isLoadingApp: { + key: ONYXKEYS.IS_LOADING_APP, }, }), )(PronounsPage); From 41f726b963cca1eced7f5f6fd4b1417618e35236 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Tue, 3 Oct 2023 11:55:35 +0700 Subject: [PATCH 3/3] remove dependency --- src/pages/settings/Profile/PronounsPage.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js index 7d289b8bc2f4..232b861a0f35 100644 --- a/src/pages/settings/Profile/PronounsPage.js +++ b/src/pages/settings/Profile/PronounsPage.js @@ -37,7 +37,7 @@ function PronounsPage({currentUserPersonalDetails, isLoadingApp}) { const [searchValue, setSearchValue] = useState(''); useEffect(() => { - if (isLoadingApp && _.isEmpty(currentUserPersonalDetails.login)) { + if (isLoadingApp && _.isUndefined(currentUserPersonalDetails.pronouns)) { return; } const currentPronounsText = _.chain(CONST.PRONOUNS_LIST) @@ -46,9 +46,9 @@ function PronounsPage({currentUserPersonalDetails, isLoadingApp}) { setSearchValue(currentPronounsText ? translate(`pronouns.${currentPronounsText}`) : ''); - // Only need to add login to dependency because after the data is loaded, other fields are also exist + // Only need to update search value when the first time the data is loaded // eslint-disable-next-line react-hooks/exhaustive-deps - }, [currentUserPersonalDetails.login, isLoadingApp]); + }, [isLoadingApp]); const filteredPronounsList = useMemo(() => { const pronouns = _.chain(CONST.PRONOUNS_LIST) @@ -85,7 +85,7 @@ function PronounsPage({currentUserPersonalDetails, isLoadingApp}) { includeSafeAreaPaddingBottom={false} testID={PronounsPage.displayName} > - {isLoadingApp && _.isEmpty(currentUserPersonalDetails.login) ? ( + {isLoadingApp && _.isUndefined(currentUserPersonalDetails.pronouns) ? ( ) : ( <>