Language detection/selection + russian and spanish locales (#11)

* Language detection/selection + russian and spanish locales

* Fixed locale not persisting, fixed Download buttons being english only

* Fixed quickstore translation

Author: etonedemid

src/AppDetails.jsx

@@ -111,10 +111,10 @@ class AppDetails extends Component {
     let dlButton;
 
     if (ua.includes("Switch" || "WiiU")) {
-      dlButton = (<button onClick={() => alert(t("noDownloadsOnThisDevice"))}>Download</button>);
+      dlButton = (<button onClick={() => alert(t("noDownloadsOnThisDevice"))}>{t("download")}</button>);
     }
     else {
-      dlButton = (<a target="_blank" rel="noopener noreferrer" href={`${repo}/zips/${name}.zip`}>Download</a>
+      dlButton = (<a target="_blank" rel="noopener noreferrer" href={`${repo}/zips/${name}.zip`}>{t("download")}</a>
       );
     }
 

src/Footer.jsx

@@ -2,9 +2,15 @@ import React, { Component } from 'react';
 import {init_theme, toggle_theme} from './Utils';
 import './MainDisplay.css';
 import { withTranslation } from 'react-i18next';
+import i18n from './i18n';
+
+const LANGUAGES = [
+  { code: 'en', label: 'English' },
+  { code: 'ru', label: 'Русский' },
+  { code: 'es', label: 'Español' },
+];
 
 class Footer extends Component {
-  // on mount, set the theme
   componentDidMount() {
     init_theme();
   }
@@ -19,6 +25,15 @@ class Footer extends Component {
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a className="copyright" href="/request-takedown">{t("dmca")}</a>
         </div>
         <div className="right">
+          <select
+            style={{fontSize: 10, padding: 4, marginRight: 8, verticalAlign: "top"}}
+            value={i18n.language}
+            onChange={e => { localStorage.setItem('lang', e.target.value); i18n.changeLanguage(e.target.value); }}
+          >
+            {LANGUAGES.map(({ code, label }) => (
+              <option key={code} value={code}>{label}</option>
+            ))}
+          </select>
           <button style={{fontSize: 10, padding: 4, marginRight: 15, verticalAlign: "top"}} onClick={toggle_theme}>
             {t("changeTheme")}
           </button>

src/QuickStore.tsx

@@ -1,4 +1,5 @@
 import React, { Fragment, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Spacer, Mobile, getParams } from './Utils';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
@@ -38,6 +39,7 @@ const formatGH = (url: string) => {
 type Platform = "wiiu" | "switch" | "3ds";
 
 const QuickStore = (props: { platform: Platform }) => {
+    const { t } = useTranslation();
 
     const [ allApps, setAllApps ] = useState([]);
     const { platform: plat } = getParams(props) as {platform?: Platform};
@@ -65,9 +67,7 @@ const QuickStore = (props: { platform: Platform }) => {
             <div className="catTitle">
             QuickStore
             </div>
-            <p>
-                This page allows you to download multiple apps in a single zip file, that can then be extracted directly to the root of the SD card.
-            </p>
+            <p>{t("qsPurpose")}</p>
             <p className="disabled">
                 <input type="checkbox" id="experimental" disabled/>
                 <label htmlFor="experimental">Fetch releases directly from <FontAwesomeIcon icon={faPropIcon} /> Github where possible (Coming Soon)</label>
@@ -146,7 +146,7 @@ const QuickStore = (props: { platform: Platform }) => {
     const progress = (<div className='progress'><button className="progressBar"> 
             <FontAwesomeIcon icon={faCirclePropIcon} className={"fa-spin"} /> 
             &nbsp;  
-            Downloading {selectedPackages.length} packages...
+            {t("downloadVerb", { count: selectedPackages.length })}
     </button></div>);
 
     const dlButton = <div>
@@ -186,7 +186,7 @@ const QuickStore = (props: { platform: Platform }) => {
         >
             <FontAwesomeIcon icon={faDLPropIcon} />
             &nbsp;
-            Download&nbsp;{selectedPackages.length}&nbsp;Selected
+            {t("downloadPrompt", { count: selectedPackages.length })}
         </button>
     </div>;
 

src/i18n.jsx

@@ -2,16 +2,30 @@ import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 
 import enTranslation from './locales/en.json';
+import ruTranslation from './locales/ru.json';
+import esTranslation from './locales/es.json';
+
+const SUPPORTED = ['en', 'ru', 'es'];
+const browserLang = (navigator.languages?.length ? navigator.languages : [navigator.language])
+  .map(l => l.split('-')[0])
+  .find(l => SUPPORTED.includes(l)) || 'en';
+const detectedLang = localStorage.getItem('lang') || browserLang;
 
 i18n
   .use(initReactI18next)
   .init({
     resources: {
       en: {
         translation: enTranslation
+      },
+      ru: {
+        translation: ruTranslation
+      },
+      es: {
+        translation: esTranslation
       }
     },
-    lng: 'en',
+    lng: detectedLang,
     fallbackLng: 'en',
     interpolation: {
       escapeValue: false

src/locales/en.json

@@ -78,8 +78,8 @@
   "allTime": "Show data for All Time (automatically sets time range)",
   "- QuickStore": "-",
   "qsPurpose": "This page allows you to download multiple apps in a single zip file, that can then be extracted directly to the root of the SD card.",
-  "downloadPrompt": "Download <0>NUM</0> Selected",
-  "downloadVerb": "Downloading <0>NUM</0> packages...",
+  "downloadPrompt": "Download {{count}} Selected",
+  "downloadVerb": "Downloading {{count}} packages...",
   "- About Page": "-",
   "aboutTitle": "About hb-appstore",
   "aboutDescription1": "Homebrew App Store is a free and open-source repository of <0>homebrew apps</0> for the Wii U and Switch consoles. This listing is maintained by the <2>ForTheUsers team</2>, with the goal of making accessible and preserving the efforts of independent developers and hobbyists to end users.",