From 8c29393c0a66d3ccdb2d0234b57dc14b3c11fa7f Mon Sep 17 00:00:00 2001 From: Priyesh Shah Date: Tue, 6 Jun 2023 01:09:37 +1000 Subject: [PATCH 1/8] migrated PronounsPage to functional component --- src/pages/settings/Profile/PronounsPage.js | 169 ++++++++++----------- 1 file changed, 80 insertions(+), 89 deletions(-) diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js index 6c39f15ec83a..a992f0d0b659 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, {Component} from 'react'; +import React, {useState, useEffect, useMemo, useCallback} from 'react'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../../components/withCurrentUserPersonalDetails'; import ScreenWrapper from '../../../components/ScreenWrapper'; import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton'; @@ -27,69 +27,31 @@ const defaultProps = { ...withCurrentUserPersonalDetailsDefaultProps, }; -class PronounsPage extends Component { - constructor(props) { - super(props); - - this.loadPronouns = this.loadPronouns.bind(this); - this.onChangeText = this.onChangeText.bind(this); - this.getFilteredPronouns = this.getFilteredPronouns.bind(this); - this.updatePronouns = this.updatePronouns.bind(this); - this.initiallyFocusedOption = {}; - - this.loadPronouns(); - this.state = { - searchValue: this.initiallyFocusedOption.text || '', - }; - } - - componentDidUpdate(prevProps) { - // If the pronouns have changed, we need to update the pronouns list because refreshing the page - // breaks the component lifecycle, so we need to "manually" reset the component. - if (prevProps.currentUserPersonalDetails.pronouns === this.props.currentUserPersonalDetails.pronouns) { - return; - } - - this.onChangeText(); - this.loadPronouns(); - } - - onChangeText(searchValue = '') { - this.setState({searchValue}); - } +const PronounsPage = (props) => { + const {currentUserPersonalDetails, translate} = props; - /** - * Returns the pronouns list filtered by searchValue needed for the OptionsSelector. - * Empty array is returned if the searchValue is empty. - * - * @returns {Array} - */ - getFilteredPronouns() { - const searchedValue = this.state.searchValue.trim(); - if (searchedValue.length === 0) { - return []; - } - return _.filter(this.pronounsList, (pronous) => pronous.text.toLowerCase().indexOf(searchedValue.toLowerCase()) >= 0); - } + const [initiallyFocusedOption, setInitiallyFocusedOption] = useState({}); + const [searchValue, setSearchValue] = useState(''); + const [pronounsList, setPronounsList] = useState([]); /** * Loads the pronouns list from the translations and adds the green checkmark icon to the currently selected value. * * @returns {void} */ - loadPronouns() { - const currentPronouns = lodashGet(this.props.currentUserPersonalDetails, 'pronouns', ''); + const loadPronouns = useCallback(() => { + const currentPronouns = lodashGet(currentUserPersonalDetails, 'pronouns', ''); - this.pronounsList = _.chain(this.props.translate('pronouns')) + const pronouns = _.chain(translate('pronouns')) .map((value, key) => { const fullPronounKey = `${CONST.PRONOUNS.PREFIX}${key}`; const isCurrentPronouns = fullPronounKey === currentPronouns; if (isCurrentPronouns) { - this.initiallyFocusedOption = { + setInitiallyFocusedOption({ text: value, keyForList: key, - }; + }); } return { @@ -106,52 +68,81 @@ class PronounsPage extends Component { }) .sortBy((pronoun) => pronoun.text.toLowerCase()) .value(); - } + + setPronounsList(pronouns); + }, [currentUserPersonalDetails, translate]); + + const onChangeText = (value = '') => { + setSearchValue(value); + }; /** * @param {Object} selectedPronouns */ - updatePronouns(selectedPronouns) { - PersonalDetails.updatePronouns(selectedPronouns.keyForList === this.initiallyFocusedOption.keyForList ? '' : lodashGet(selectedPronouns, 'value', '')); - } - - render() { - const filteredPronounsList = this.getFilteredPronouns(); - const headerMessage = this.state.searchValue.trim() && !filteredPronounsList.length ? this.props.translate('common.noResultsFound') : ''; - - return ( - - {({safeAreaPaddingBottomStyle}) => ( - <> - Navigation.navigate(ROUTES.SETTINGS_PROFILE)} - onCloseButtonPress={() => Navigation.dismissModal(true)} - /> - {this.props.translate('pronounsPage.isShownOnProfile')} - - - )} - - ); - } -} + const updatePronouns = (selectedPronouns) => { + PersonalDetails.updatePronouns(selectedPronouns.keyForList === initiallyFocusedOption.keyForList ? '' : lodashGet(selectedPronouns, 'value', '')); + }; + + /** + * Pronouns list filtered by searchValue needed for the OptionsSelector. + * Empty array if the searchValue is empty. + */ + const filteredPronounsList = useMemo(() => { + const searchedValue = searchValue.trim(); + if (searchedValue.length === 0) { + return []; + } + return _.filter(pronounsList, (pronous) => pronous.text.toLowerCase().indexOf(searchedValue.toLowerCase()) >= 0); + }, [pronounsList, searchValue]); + + const headerMessage = useMemo( + () => (searchValue.trim() && !filteredPronounsList.length ? translate('common.noResultsFound') : ''), + [filteredPronounsList.length, searchValue, translate], + ); + + useEffect(() => { + setSearchValue(initiallyFocusedOption.text); + }, [initiallyFocusedOption]); + + useEffect(() => { + onChangeText(); + loadPronouns(); + }, [loadPronouns]); + + + return ( + + {({safeAreaPaddingBottomStyle}) => ( + <> + Navigation.navigate(ROUTES.SETTINGS_PROFILE)} + onCloseButtonPress={() => Navigation.dismissModal(true)} + /> + {translate('pronounsPage.isShownOnProfile')} + + + )} + + ); +}; PronounsPage.propTypes = propTypes; PronounsPage.defaultProps = defaultProps; +PronounsPage.displayName = 'PronounsPage'; export default compose(withLocalize, withCurrentUserPersonalDetails)(PronounsPage); From 0f5daa013f62a96d116f22bcf2d99b51775ad69d Mon Sep 17 00:00:00 2001 From: Priyesh Shah Date: Tue, 6 Jun 2023 01:49:25 +1000 Subject: [PATCH 2/8] fixed lint/prettier issues --- src/pages/settings/Profile/PronounsPage.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js index a992f0d0b659..b14afe3dbac8 100644 --- a/src/pages/settings/Profile/PronounsPage.js +++ b/src/pages/settings/Profile/PronounsPage.js @@ -109,7 +109,6 @@ const PronounsPage = (props) => { loadPronouns(); }, [loadPronouns]); - return ( {({safeAreaPaddingBottomStyle}) => ( From c16844c21d99547d46ff95b5abcd57f9083e11c1 Mon Sep 17 00:00:00 2001 From: Priyesh Shah Date: Wed, 7 Jun 2023 19:46:26 +1000 Subject: [PATCH 3/8] changed const to function for PronounsPage component --- src/pages/settings/Profile/PronounsPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js index 0bb0167f549a..a65063184988 100644 --- a/src/pages/settings/Profile/PronounsPage.js +++ b/src/pages/settings/Profile/PronounsPage.js @@ -27,7 +27,7 @@ const defaultProps = { ...withCurrentUserPersonalDetailsDefaultProps, }; -const PronounsPage = (props) => { +function PronounsPage(props) { const {currentUserPersonalDetails, translate} = props; const [initiallyFocusedOption, setInitiallyFocusedOption] = useState({}); From 4bc48fca347271dee480c31ddad9c7e197f589b1 Mon Sep 17 00:00:00 2001 From: Priyesh Shah Date: Wed, 7 Jun 2023 19:52:43 +1000 Subject: [PATCH 4/8] prettier fixes --- src/pages/settings/Profile/PronounsPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js index a65063184988..8681059a02e9 100644 --- a/src/pages/settings/Profile/PronounsPage.js +++ b/src/pages/settings/Profile/PronounsPage.js @@ -137,7 +137,7 @@ function PronounsPage(props) { )} ); -}; +} PronounsPage.propTypes = propTypes; PronounsPage.defaultProps = defaultProps; From c4ec27051a5fb17dfab47d95d49adc9acc159ef3 Mon Sep 17 00:00:00 2001 From: Priyesh Shah Date: Fri, 9 Jun 2023 04:04:27 +1000 Subject: [PATCH 5/8] removed destructuring & unnecessary useMemo --- src/pages/settings/Profile/PronounsPage.js | 21 ++++++++------------- 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js index 8681059a02e9..9fedcb397d99 100644 --- a/src/pages/settings/Profile/PronounsPage.js +++ b/src/pages/settings/Profile/PronounsPage.js @@ -28,8 +28,6 @@ const defaultProps = { }; function PronounsPage(props) { - const {currentUserPersonalDetails, translate} = props; - const [initiallyFocusedOption, setInitiallyFocusedOption] = useState({}); const [searchValue, setSearchValue] = useState(''); const [pronounsList, setPronounsList] = useState([]); @@ -40,9 +38,9 @@ function PronounsPage(props) { * @returns {void} */ const loadPronouns = useCallback(() => { - const currentPronouns = lodashGet(currentUserPersonalDetails, 'pronouns', ''); + const currentPronouns = lodashGet(props.currentUserPersonalDetails, 'pronouns', ''); - const pronouns = _.chain(translate('pronouns')) + const pronouns = _.chain(props.translate('pronouns')) .map((value, key) => { const fullPronounKey = `${CONST.PRONOUNS.PREFIX}${key}`; const isCurrentPronouns = fullPronounKey === currentPronouns; @@ -70,7 +68,7 @@ function PronounsPage(props) { .value(); setPronounsList(pronouns); - }, [currentUserPersonalDetails, translate]); + }, [props]); const onChangeText = (value = '') => { setSearchValue(value); @@ -95,10 +93,7 @@ function PronounsPage(props) { return _.filter(pronounsList, (pronous) => pronous.text.toLowerCase().indexOf(searchedValue.toLowerCase()) >= 0); }, [pronounsList, searchValue]); - const headerMessage = useMemo( - () => (searchValue.trim() && !filteredPronounsList.length ? translate('common.noResultsFound') : ''), - [filteredPronounsList.length, searchValue, translate], - ); + const headerMessage = searchValue.trim() && !filteredPronounsList.length ? props.translate('common.noResultsFound') : ''; useEffect(() => { setSearchValue(initiallyFocusedOption.text); @@ -114,13 +109,13 @@ function PronounsPage(props) { {({safeAreaPaddingBottomStyle}) => ( <> Navigation.goBack(ROUTES.SETTINGS_PROFILE)} /> - {translate('pronounsPage.isShownOnProfile')} + {props.translate('pronounsPage.isShownOnProfile')} Date: Thu, 15 Jun 2023 00:56:31 +1200 Subject: [PATCH 6/8] Update PronounsPage.js Changed loadPronouns dependency --- src/pages/settings/Profile/PronounsPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js index 9fedcb397d99..ca5e86926c84 100644 --- a/src/pages/settings/Profile/PronounsPage.js +++ b/src/pages/settings/Profile/PronounsPage.js @@ -68,7 +68,7 @@ function PronounsPage(props) { .value(); setPronounsList(pronouns); - }, [props]); + }, [props.currentUserPersonalDetails.pronouns]); const onChangeText = (value = '') => { setSearchValue(value); From 7ff98e78e5f7ac6e58bce2e3eb83be00bbbe1f52 Mon Sep 17 00:00:00 2001 From: Priyesh Shah Date: Wed, 21 Jun 2023 10:59:00 +1000 Subject: [PATCH 7/8] fixed lint error --- src/pages/settings/Profile/PronounsPage.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js index ca5e86926c84..aff1bc23bd72 100644 --- a/src/pages/settings/Profile/PronounsPage.js +++ b/src/pages/settings/Profile/PronounsPage.js @@ -68,6 +68,8 @@ function PronounsPage(props) { .value(); setPronounsList(pronouns); + + // eslint-disable-next-line react-hooks/exhaustive-deps }, [props.currentUserPersonalDetails.pronouns]); const onChangeText = (value = '') => { From 409f3916f46a65f5c25cd6182a804c9349eaf80a Mon Sep 17 00:00:00 2001 From: Priyesh Shah Date: Wed, 21 Jun 2023 11:03:24 +1000 Subject: [PATCH 8/8] fixed prettier issues --- src/pages/settings/Profile/PronounsPage.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js index aff1bc23bd72..c18ba1968cd4 100644 --- a/src/pages/settings/Profile/PronounsPage.js +++ b/src/pages/settings/Profile/PronounsPage.js @@ -68,8 +68,8 @@ function PronounsPage(props) { .value(); setPronounsList(pronouns); - - // eslint-disable-next-line react-hooks/exhaustive-deps + + // eslint-disable-next-line react-hooks/exhaustive-deps }, [props.currentUserPersonalDetails.pronouns]); const onChangeText = (value = '') => {