fix: Language Options Sorting by Using 'Name' Property. (#33906)

Co-authored-by: Tasso Evangelista <[email protected]>

.changeset/strange-bulldogs-roll.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Sorts the list of language options by name correctly

apps/meteor/client/providers/TranslationProvider.tsx

@@ -169,12 +169,14 @@ const TranslationProvider = ({ children }: TranslationProviderProps): ReactEleme
 				ogName: i18nextInstance.t('Default'),
 				key: '',
 			},
-			...[...new Set([...i18nextInstance.languages, ...languages])].map((key) => ({
-				en: key,
-				name: getLanguageName(key, language),
-				ogName: getLanguageName(key, key),
-				key,
-			})),
+			...[...new Set([...i18nextInstance.languages, ...languages])]
+				.map((key) => ({
+					en: key,
+					name: getLanguageName(key, language),
+					ogName: getLanguageName(key, key),
+					key,
+				}))
+				.sort(({ name: nameA }, { name: nameB }) => nameA.localeCompare(nameB)),
 		],
 		[language, i18nextInstance],
 	);

apps/meteor/client/views/account/preferences/PreferencesLocalizationSection.tsx

@@ -12,11 +12,7 @@ const PreferencesLocalizationSection = () => {
 
 	const { control } = useFormContext();
 
-	const languageOptions = useMemo(() => {
-		const mapOptions: SelectOption[] = languages.map(({ key, name }) => [key, name]);
-		mapOptions.sort(([a], [b]) => a.localeCompare(b));
-		return mapOptions;
-	}, [languages]);
+	const languageOptions = useMemo(() => languages.map(({ key, name }): SelectOption => [key, name]), [languages]);
 
 	const languageId = useUniqueId();