fix: correctly fall back to English name in LanguageSelector (#1537)

* fix: correctly fall back to English name in LanguageSelector

* refactor: clean up language sort & name logic

* refactor: also clean up region sort & name logic

* refactor: use arrow functions

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

@@ -1,12 +1,11 @@
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';
 import { UserSettingsGeneralResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
-import { Language } from '../../../../../server/lib/settings';
 import {
   availableLanguages,
   AvailableLocales,
@@ -72,38 +71,11 @@ const UserGeneralSettings: React.FC = () => {
     );
   }, [data]);
 
-  const { data: languages, error: languagesError } = useSWR<Language[]>(
-    '/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 />;
   }
 
-  if (!languages && !languagesError) {
-    return <LoadingSpinner />;
-  }
-
-  if (!data || !languages) {
+  if (!data) {
     return <Error statusCode={500} />;
   }
 
@@ -263,7 +235,6 @@ const UserGeneralSettings: React.FC = () => {
                 <div className="form-input">
                   <div className="form-input-field">
                     <LanguageSelector
-                      languages={sortedLanguages ?? []}
                       setFieldValue={setFieldValue}
                       serverValue={currentSettings.originalLanguage}
                       value={values.originalLanguage}