From 219ef2cb8ed5aa7109df2e0dee7ca32af20158ea Mon Sep 17 00:00:00 2001
From: Keith Stevens <fozziethebeat@gmail.com>
Date: Mon, 23 Jan 2023 18:29:43 +0900
Subject: [PATCH] Present locales with their locale language rather than the
 current locale language

---
 .../LanguageSelector/LanguageSelector.tsx     | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/website/src/components/LanguageSelector/LanguageSelector.tsx b/website/src/components/LanguageSelector/LanguageSelector.tsx
index 37659265..aea25dcd 100644
--- a/website/src/components/LanguageSelector/LanguageSelector.tsx
+++ b/website/src/components/LanguageSelector/LanguageSelector.tsx
@@ -8,12 +8,13 @@ const LanguageSelector = () => {
   const router = useRouter();
   const { i18n } = useTranslation();
 
-  const { language: currentLanguage } = i18n;
-  const languageNames = useMemo(() => {
-    return new Intl.DisplayNames([currentLanguage], {
-      type: "language",
-    });
-  }, [currentLanguage]);
+  // Memo the set of locales and their display names.
+  const localesAndNames = useMemo(() => {
+    return router.locales.map((locale) => ({
+      locale,
+      name: new Intl.DisplayNames([locale], { type: "language" }).of(locale),
+    }));
+  }, [router.locales]);
 
   const languageChanged = useCallback(
     async (option) => {
@@ -25,12 +26,12 @@ const LanguageSelector = () => {
     [router]
   );
 
-  const locales = router.locales;
+  const { language: currentLanguage } = i18n;
   return (
     <Select onChange={languageChanged} defaultValue={currentLanguage}>
-      {locales.map((locale) => (
+      {localesAndNames.map(({ locale, name }) => (
         <option key={locale} value={locale}>
-          {languageNames.of(locale) ?? locale}
+          {name}
         </option>
       ))}
     </Select>