Merge pull request #17558 from Prince-Mendiratta/fix/17223-sort-pronouns

[PronounsPage] sort pronouns list alphabetically
Expensify · Apr 18, 2023 · 59b3070 · 59b3070
2 parents 03cc849 + b651bbf
commit 59b3070
Showing 1 changed file with 22 additions and 19 deletions.
diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js
@@ -81,29 +81,32 @@ class PronounsPage extends Component {
     loadPronouns() {
         const currentPronouns = lodashGet(this.props.currentUserPersonalDetails, 'pronouns', '');
 
-        this.pronounsList = _.map(this.props.translate('pronouns'), (value, key) => {
-            const fullPronounKey = `${CONST.PRONOUNS.PREFIX}${key}`;
-            const isCurrentPronouns = fullPronounKey === currentPronouns;
-
-            if (isCurrentPronouns) {
-                this.initiallyFocusedOption = {
+        this.pronounsList = _.chain(this.props.translate('pronouns'))
+            .map((value, key) => {
+                const fullPronounKey = `${CONST.PRONOUNS.PREFIX}${key}`;
+                const isCurrentPronouns = fullPronounKey === currentPronouns;
+
+                if (isCurrentPronouns) {
+                    this.initiallyFocusedOption = {
+                        text: value,
+                        keyForList: key,
+                    };
+                }
+
+                return {
                     text: value,
+                    value: fullPronounKey,
                     keyForList: key,
-                };
-            }
 
-            return {
-                text: value,
-                value: fullPronounKey,
-                keyForList: key,
+                    // Include the green checkmark icon to indicate the currently selected value
+                    customIcon: isCurrentPronouns ? greenCheckmark : undefined,
 
-                // Include the green checkmark icon to indicate the currently selected value
-                customIcon: isCurrentPronouns ? greenCheckmark : undefined,
-
-                // This property will make the currently selected value have bold text
-                boldStyle: isCurrentPronouns,
-            };
-        });
+                    // This property will make the currently selected value have bold text
+                    boldStyle: isCurrentPronouns,
+                };
+            })
+            .sortBy(pronoun => pronoun.text.toLowerCase())
+            .value();
     }
 
     /**