fix(pronouns-page): pronouns displayed without search

src/pages/settings/Profile/PronounsPage.js

@@ -1,53 +1,45 @@
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
-import React, {useState, useEffect, useCallback} from 'react';
+import React, {useState, useMemo} from 'react';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../../components/withCurrentUserPersonalDetails';
 import ScreenWrapper from '../../../components/ScreenWrapper';
 import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
-import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import Text from '../../../components/Text';
 import styles from '../../../styles/styles';
 import * as PersonalDetails from '../../../libs/actions/PersonalDetails';
-import compose from '../../../libs/compose';
 import CONST from '../../../CONST';
 import ROUTES from '../../../ROUTES';
 import Navigation from '../../../libs/Navigation/Navigation';
 import SelectionList from '../../../components/SelectionList';
+import useLocalize from '../../../hooks/useLocalize';
 
 const propTypes = {
-    ...withLocalizePropTypes,
     ...withCurrentUserPersonalDetailsPropTypes,
 };
 
 const defaultProps = {
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
-function PronounsPage(props) {
-    const [initiallyFocusedOption, setInitiallyFocusedOption] = useState({});
-    const [searchValue, setSearchValue] = useState('');
-    const [pronounsList, setPronounsList] = useState([]);
+function PronounsPage({currentUserPersonalDetails}) {
+    const {translate} = useLocalize();
+    const currentPronouns = lodashGet(currentUserPersonalDetails, 'pronouns', '');
+    const currentPronounsKey = currentPronouns.substring(CONST.PRONOUNS.PREFIX.length);
 
-    /**
-     * Loads the pronouns list from the translations and adds the green checkmark icon to the currently selected value.
-     *
-     * @returns {void}
-     */
-    const loadPronouns = useCallback(() => {
-        const currentPronouns = lodashGet(props.currentUserPersonalDetails, 'pronouns', '');
+    const [searchValue, setSearchValue] = useState(() => {
+        const currentPronounsText = _.chain(translate('pronouns'))
+            .find((_value, key) => key === currentPronounsKey)
+            .value();
+
+        return currentPronounsText || '';
+    });
 
-        const pronouns = _.chain(props.translate('pronouns'))
+    const filteredPronounsList = useMemo(() => {
+        const pronouns = _.chain(translate('pronouns'))
             .map((value, key) => {
                 const fullPronounKey = `${CONST.PRONOUNS.PREFIX}${key}`;
                 const isCurrentPronouns = fullPronounKey === currentPronouns;
 
-                if (isCurrentPronouns) {
-                    setInitiallyFocusedOption({
-                        text: value,
-                        keyForList: key,
-                    });
-                }
-
                 return {
                     text: value,
                     value: fullPronounKey,
@@ -58,60 +50,38 @@ function PronounsPage(props) {
             .sortBy((pronoun) => pronoun.text.toLowerCase())
             .value();
 
-        setPronounsList(pronouns);
+        const trimmedSearch = searchValue.trim();
 
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.currentUserPersonalDetails.pronouns]);
+        if (trimmedSearch.length === 0) {
+            return [];
+        }
+        return _.filter(pronouns, (pronoun) => pronoun.text.toLowerCase().indexOf(trimmedSearch.toLowerCase()) >= 0);
+    }, [searchValue, currentPronouns, translate]);
 
-    const onChangeText = (value = '') => {
-        setSearchValue(value);
-    };
+    const headerMessage = searchValue.trim() && filteredPronounsList.length === 0 ? translate('common.noResultsFound') : '';
 
-    /**
-     * @param {Object} selectedPronouns
-     */
     const updatePronouns = (selectedPronouns) => {
-        PersonalDetails.updatePronouns(selectedPronouns.keyForList === initiallyFocusedOption.keyForList ? '' : lodashGet(selectedPronouns, 'value', ''));
+        PersonalDetails.updatePronouns(selectedPronouns.keyForList === currentPronouns.keyForList ? '' : lodashGet(selectedPronouns, 'value', ''));
     };
 
-    /**
-     * Pronouns list filtered by searchValue needed for the OptionsSelector.
-     * Empty array if the searchValue is empty.
-     */
-    const filteredPronounsList = _.filter(pronounsList, (pronous) => pronous.text.toLowerCase().indexOf(searchValue.trim().toLowerCase()) >= 0);
-
-    const headerMessage = searchValue.trim() && !filteredPronounsList.length ? props.translate('common.noResultsFound') : '';
-
-    useEffect(() => {
-        setSearchValue(initiallyFocusedOption.text);
-    }, [initiallyFocusedOption]);
-
-    useEffect(() => {
-        onChangeText();
-        loadPronouns();
-    }, [loadPronouns]);
-
     return (
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>
             <HeaderWithBackButton
-                title={props.translate('pronounsPage.pronouns')}
+                title={translate('pronounsPage.pronouns')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PROFILE)}
             />
-            <Text style={[styles.ph5, styles.mb3]}>{props.translate('pronounsPage.isShownOnProfile')}</Text>
-            {/* Only render pronouns if list was loaded (not filtered list), otherwise initially focused item will be empty */}
-            {pronounsList.length > 0 && (
-                <SelectionList
-                    headerMessage={headerMessage}
-                    textInputLabel={props.translate('pronounsPage.pronouns')}
-                    textInputPlaceholder={props.translate('pronounsPage.placeholderText')}
-                    textInputValue={searchValue}
-                    sections={[{data: filteredPronounsList, indexOffset: 0}]}
-                    onSelectRow={updatePronouns}
-                    onChangeText={onChangeText}
-                    initiallyFocusedOptionKey={initiallyFocusedOption.keyForList}
-                    shouldDelayFocus
-                />
-            )}
+            <Text style={[styles.ph5, styles.mb3]}>{translate('pronounsPage.isShownOnProfile')}</Text>
+            <SelectionList
+                headerMessage={headerMessage}
+                textInputLabel={translate('pronounsPage.pronouns')}
+                textInputPlaceholder={translate('pronounsPage.placeholderText')}
+                textInputValue={searchValue}
+                sections={[{data: filteredPronounsList, indexOffset: 0}]}
+                onSelectRow={updatePronouns}
+                onChangeText={setSearchValue}
+                initiallyFocusedOptionKey={currentPronounsKey}
+                shouldDelayFocus
+            />
         </ScreenWrapper>
     );
 }
@@ -120,4 +90,4 @@ PronounsPage.propTypes = propTypes;
 PronounsPage.defaultProps = defaultProps;
 PronounsPage.displayName = 'PronounsPage';
 
-export default compose(withLocalize, withCurrentUserPersonalDetails)(PronounsPage);
+export default withCurrentUserPersonalDetails(PronounsPage);