From 1f753e8fb1c3d44b938a1ec541587cd6301f4181 Mon Sep 17 00:00:00 2001
From: Ben Woodward <ben@bdw.to>
Date: Sun, 8 Aug 2021 20:58:51 -0700
Subject: Dynamic language select defaultValue (#182)

Replaces the hardcoded 'en-US' defaultValue of the language select with
the value supplied by the i18n language detection. In my testing I found
when setting my browser to "German" or "Dutch", the navigator.language
returned is simply "de" and "nl" but the translation ids in the translations
are "de-DE" and "nl-NL", respectively. This results in the select box
defaulting to the first language (Arabic) because "de" and "nl" are not
values in any of the options.

This patch takes the i18n detected language and first checks if the id
is a known translation. If not, 'en-US' is returned. If it is, the
detected language is returned.

Unfortunately I am not able to test this as both my Firefox and Chrome
browsers are only setting the generic locale language ids. I can
verify the fallback to english works. Additionally, editing the
localStorage 'i18nextLng' key to 'de-DE' produces the expected
translation.

Related to #180
---
 src/components/Settings.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

(limited to 'src/components/Settings.js')

diff --git a/src/components/Settings.js b/src/components/Settings.js
index 1e07cb1..f12fe35 100644
--- a/src/components/Settings.js
+++ b/src/components/Settings.js
@@ -13,6 +13,14 @@ export const Settings = (props) => {
     { label: 'WEP', value: 'WEP' },
   ];
 
+  const langSelectDefaultValue = () => {
+    const t = Translations.filter((t) => t.id === i18n.language);
+    if (t.length !== 1) {
+      return 'en-US';
+    }
+    return t[0].id;
+  };
+
   useEffect(() => {
     if (props.firstLoad.current && window.innerWidth < 500) {
       props.onFirstLoad();
@@ -26,9 +34,8 @@ export const Settings = (props) => {
         width={300}
         inputHeight={38}
         label={t('select')}
-        selected={i18n.language}
         onChange={(e) => props.onLanguageChange(e.target.value)}
-        defaultValue="en-US"
+        defaultValue={langSelectDefaultValue()}
       >
         {Translations.map((t) => (
           <option key={t.id} value={t.id}>
-- 
cgit v1.2.3