Language dropdown formatting (#149)

* Sort and format language dropdown

- Format languages in `latinName - nativeName` to account for RTL
  languages
- Lexicographic order

* Use generic English translation

The current English translation covers both US and GB, so prefer a
generic implementation until it doesn't make sense.

* Update src/App.js

Co-authored-by: Andanan <dev.andanan@e.mail.de>

* Update src/App.js

Co-authored-by: Ahmed Tarek <ahmed.tokyo1@gmail.com>

Co-authored-by: Andanan <dev.andanan@e.mail.de>
Co-authored-by: Ahmed Tarek <ahmed.tokyo1@gmail.com>

2 files changed, 21 insertions, 21 deletions

diff --git a/src/App.js b/src/App.js
index 51850eb..c064cc3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -34,27 +34,27 @@ function App() {
           value={i18n.language}
           onChange={(e) => changeLanguage(e.target.value)}
         >
-          <option value="en-US">English - US (English)</option>
-          <option value="zh-HK">Chinese - Hong Kong (简体中文)</option>
-          <option value="zh-CN">Chinese - Simplified (简体中文)</option>
-          <option value="es">Spanish (Español)</option>
-          <option value="pt">Portuguese (Português)</option>
-          <option value="pt-BR">Portuguese (Brazil)</option>
-          <option value="ja">Japanese (日本語)</option>
-          <option value="fa-IR">Persian - Iran (فارسی)</option>
-          <option value="ru-RU">Russian - Russia (Русский)</option>
-          <option value="uk-UA">Ukrainian - Ukraine (Українська)</option>
-          <option value="nl-NL">Dutch - Netherlands (Nederlands)</option>
-          <option value="fr-FR">French - FR (Français)</option>
-          <option value="tr-TR">Turkish - Turkey (Türkçe)</option>
-          <option value="hi-IN">Hindi - India (हिन्दी)</option>
-          <option value="ca">Catalan (català)</option>
-          <option value="de-DE">German (Germany)</option>
-          <option value="id-ID">Indonesian (Indonesia)</option>
-          <option value="pl-PL">Polish - PL (Polski)</option>
           <option value="ar">Arabic - العربية</option>
-          <option value="oc">Occitan</option>
+          <option value="ca">Catalan - Català</option>
+          <option value="zh-HK">Chinese Hong Kong - 简体中文</option>
+          <option value="zh-CN">Chinese Simplified - 简体中文</option>
+          <option value="nl-NL">Dutch - Nederlands</option>
+          <option value="en">English</option>
+          <option value="fr-FR">French - Français</option>
+          <option value="de-DE">German - Deutsch</option>
+          <option value="hi-IN">Hindi - हिन्दी</option>
+          <option value="id-ID">Indonesian</option>
           <option value="it-IT">Italian</option>
+          <option value="ja">Japanese - 日本語</option>
+          <option value="oc">Occitan</option>
+          <option value="fa-IR">Persian Iran - فارسی</option>
+          <option value="pl-PL">Polish - Polski</option>
+          <option value="pt">Portuguese - Português</option>
+          <option value="pt-BR">Portuguese - Português brasileiro</option>
+          <option value="ru-RU">Russian - Русский</option>
+          <option value="es">Spanish - Español</option>
+          <option value="tr-TR">Turkish - Türkçe</option>
+          <option value="uk-UA">Ukrainian - Українська</option>
         </select>
       </div>
 
diff --git a/src/i18n.js b/src/i18n.js
index f6e8c52..7b3cc08 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -3,7 +3,7 @@ import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 
 const resources = {
-  'en-US': {
+  en: {
     translation: {
       title: 'WiFi Card',
       'desc.use':
@@ -560,7 +560,7 @@ i18n
   .use(initReactI18next)
   .use(LanguageDetector)
   .init({
-    fallbackLng: 'en-US',
+    fallbackLng: 'en',
     resources,
     interpolation: {
       escapeValue: false,