From d76bf32c9dcc83ebd0bae979726b1456a9028d8b Mon Sep 17 00:00:00 2001
From: TheCatLady <52870424+TheCatLady@users.noreply.github.com>
Date: Tue, 16 Mar 2021 12:13:52 -0400
Subject: [PATCH] fix(ui): sort regions & languages by their localized names
 rather than their TMDb English names (#1157)

---
 src/components/RegionSelector/index.tsx       | 25 ++++++++++++++++++-
 src/components/Settings/SettingsMain.tsx      | 23 +++++++++++++++--
 .../UserGeneralSettings/index.tsx             | 23 +++++++++++++++--
 3 files changed, 66 insertions(+), 5 deletions(-)

diff --git a/src/components/RegionSelector/index.tsx b/src/components/RegionSelector/index.tsx
index 4537d5547..2cbdc4351 100644
--- a/src/components/RegionSelector/index.tsx
+++ b/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
diff --git a/src/components/Settings/SettingsMain.tsx b/src/components/Settings/SettingsMain.tsx
index d5e41ac38..06c800923 100644
--- a/src/components/Settings/SettingsMain.tsx
+++ b/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}
diff --git a/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx b/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
index 5e0d90475..157424c71 100644
--- a/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
+++ b/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}