fix(ui): sort regions & languages by their localized names rather than their TMDb English names (#1157)

src/components/RegionSelector/index.tsx

@@ -38,6 +38,29 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
     []
   );
 
+  const sortedRegions = useMemo(
+    () =>
+      regions?.sort((region1, region2) => {
+        const region1Name =
+          intl.formatDisplayName(region1.iso_3166_1, {
+            type: 'region',
+            fallback: 'none',
+          }) ?? region1.english_name;
+        const region2Name =
+          intl.formatDisplayName(region2.iso_3166_1, {
+            type: 'region',
+            fallback: 'none',
+          }) ?? region2.english_name;
+
+        return region1Name === region2Name
+          ? 0
+          : region1Name > region2Name
+          ? 1
+          : -1;
+      }),
+    [intl, regions]
+  );
+
   const defaultRegionNameFallback =
     regions?.find((region) => region.iso_3166_1 === currentSettings.region)
       ?.english_name ?? currentSettings.region;
@@ -228,7 +251,7 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
                       </div>
                     )}
                   </Listbox.Option>
-                  {regions?.map((region) => (
+                  {sortedRegions?.map((region) => (
                     <Listbox.Option key={region.iso_3166_1} value={region}>
                       {({ selected, active }) => (
                         <div

src/components/Settings/SettingsMain.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import useSWR from 'swr';
 import LoadingSpinner from '../Common/LoadingSpinner';
 import type { MainSettings, Language } from '../../../server/lib/settings';
@@ -94,6 +94,25 @@ const SettingsMain: React.FC = () => {
     }
   };
 
+  const sortedLanguages = useMemo(
+    () =>
+      languages?.sort((lang1, lang2) => {
+        const lang1Name =
+          intl.formatDisplayName(lang1.iso_639_1, {
+            type: 'language',
+            fallback: 'none',
+          }) ?? lang1.english_name;
+        const lang2Name =
+          intl.formatDisplayName(lang2.iso_639_1, {
+            type: 'language',
+            fallback: 'none',
+          }) ?? lang2.english_name;
+
+        return lang1Name === lang2Name ? 0 : lang1Name > lang2Name ? 1 : -1;
+      }),
+    [intl, languages]
+  );
+
   if (!data && !error && !languages && !languagesError) {
     return <LoadingSpinner />;
   }
@@ -306,7 +325,7 @@ const SettingsMain: React.FC = () => {
                         <option value="">
                           {intl.formatMessage(messages.originalLanguageDefault)}
                         </option>
-                        {languages?.map((language) => (
+                        {sortedLanguages?.map((language) => (
                           <option
                             key={`language-key-${language.iso_639_1}`}
                             value={language.iso_639_1}

src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';
@@ -56,6 +56,25 @@ const UserGeneralSettings: React.FC = () => {
     '/api/v1/languages'
   );
 
+  const sortedLanguages = useMemo(
+    () =>
+      languages?.sort((lang1, lang2) => {
+        const lang1Name =
+          intl.formatDisplayName(lang1.iso_639_1, {
+            type: 'language',
+            fallback: 'none',
+          }) ?? lang1.english_name;
+        const lang2Name =
+          intl.formatDisplayName(lang2.iso_639_1, {
+            type: 'language',
+            fallback: 'none',
+          }) ?? lang2.english_name;
+
+        return lang1Name === lang2Name ? 0 : lang1Name > lang2Name ? 1 : -1;
+      }),
+    [intl, languages]
+  );
+
   if (!data && !error) {
     return <LoadingSpinner />;
   }
@@ -211,7 +230,7 @@ const UserGeneralSettings: React.FC = () => {
                       <option value="all">
                         {intl.formatMessage(messages.originalLanguageDefault)}
                       </option>
-                      {languages?.map((language) => (
+                      {sortedLanguages?.map((language) => (
                         <option
                           key={`language-key-${language.iso_639_1}`}
                           value={language.iso_639_1}