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

1 files changed, 9 insertions, 2 deletions

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}>