Show recent languages in drop list

src/_locales/en/messages.json

@@ -41,6 +41,12 @@
   "langList": {
     "message": "af:Afrikaans, sq:Albanian, am:Amharic, ar:Arabic, hy:Armenian, az:Azerbaijani, eu:Basque, be:Belarusian, bn:Bengali, bs:Bosnian, bg:Bulgarian, ca:Catalan, ceb:Cebuano, ny:Chewa, zh-CN:Chinese (PRC), zh-TW:Chinese (Taiwan), co:Corsican, hr:Croatian, cs:Czech, da:Danish, nl:Dutch, en:English, eo:Esperanto, et:Estonian, fi:Finnish, fr:French, fy:Frisian, gl:Galician, ka:Georgian, de:German, el:Greek, gu:Gujarati, ht:Haitian, ha:Hausa, haw:Hawaiian, he:Hebrew, hi:Hindi, hu:Hungarian, is:Icelandic, ig:Igbo, id:Indonesian, ga:Irish, it:Italian, ja:Japanese, jv:Javanese, kn:Kannada, kk:Kazakh, km:Khmer, ky:Kirghiz, ko:Korean, ku:Kurdish, lo:Laotian, la:Latin, lv:Latvian, lt:Lithuanian, lb:Luxembourgish, mk:Macedonian, mg:Malagasy, ms:Malay, ml:Malayalam, mt:Maltese, mi:Maori, mr:Marathi, mn:Mongolian, hmn:Monk, my:Myanmar, ne:Nepali, no:Norwegian, fa:Persian, pl:Polish, pt:Portuguese, pa:Punjabi, ps:Pushto, ro:Romanian, ru:Russian, sm:Samoan, gd:Scottish Gaelic, sr:Serbian, sn:Shona, sd:Sindhi, si:Sinhala, sk:Slovak, sl:Slovenian, so:Somali, sx:Sotho, es:Spanish, su:Sundanese, sw:Swahili, sv:Swedish, tl:Tagalog, tg:Tajiki, ta:Tamil, te:Telugu, th:Thai, tr:Turkish, uk:Ukrainian, ur:Urdu, uz:Uzbek, vi:Vietnamese, cy:Welsh, xh:Xosa, yi:Yiddish, yo:Yoruba, zu:Zulu"
   },
+  "allLangLabel": {
+    "message": "All languages"
+  },
+  "recentLangLabel": {
+    "message": "Recent languages"
+  },
   "settingsLabel": {
     "message": "Settings"
   },

src/popup/components/Footer.js

@@ -23,7 +23,7 @@ export default class Footer extends Component {
   };
 
   render() {
-    const { tabUrl, targetLang } = this.props;
+    const { tabUrl, targetLang, langHistory } = this.props;
 
     return (
       <div id="footer">
@@ -37,11 +37,22 @@ export default class Footer extends Component {
             onChange={this.handleChange}
             title={browser.i18n.getMessage("targetLangLabel")}
           >
-            {this.langList.map(option => (
-              <option value={option.value} key={option.value}>
-                {option.name}
-              </option>
-            ))}
+
+            <optgroup label={browser.i18n.getMessage("recentLangLabel")}>
+              {this.langList.filter(option => langHistory.includes(option.value))
+                .map(option => (
+                  <option value={option.value} key={option.value}>
+                    {option.name}
+                  </option>
+                ))}
+            </optgroup>
+            <optgroup label={browser.i18n.getMessage("allLangLabel")}>
+              {this.langList.map(option => (
+                <option value={option.value} key={option.value}>
+                  {option.name}
+                </option>
+              ))}
+            </optgroup>
           </select>
         </div>
       </div>

src/popup/components/PopupPage.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import browser from "webextension-polyfill";
 import log from "loglevel";
-import { initSettings, getSettings } from "src/settings/settings";
+import { initSettings, getSettings, setSettings } from "src/settings/settings";
 import { updateLogLevel, overWriteLogLevel } from "src/common/log";
 import translate from "src/common/translate";
 import Header from "./Header";
@@ -43,7 +43,8 @@ export default class PopupPage extends Component {
       statusText: "OK",
       tabUrl: "",
       isConnected: true,
-      isEnabledOnPage: true
+      isEnabledOnPage: true,
+      langHistory: []
     };
     this.isSwitchedSecondLang = false;
     this.init();
@@ -56,8 +57,15 @@ export default class PopupPage extends Component {
 
     document.body.dataset.theme = getSettings("theme");
     const targetLang = getSettings("targetLang");
+    let langHistory = getSettings("langHistory");
+    if (!langHistory) {
+      const secondLang = getSettings("secondTargetLang");
+      langHistory = [targetLang, secondLang];
+      setSettings("langHistory", langHistory);
+    }
     this.setState({
-      targetLang: targetLang
+      targetLang: targetLang,
+      langHistory: langHistory
     });
 
     const tabInfo = await getTabInfo();
@@ -82,11 +90,20 @@ export default class PopupPage extends Component {
     }, waitTime);
   };
 
+  setLangHistory = lang => {
+    let langHistory = getSettings("langHistory") || [];
+    langHistory.push(lang);
+    if (langHistory.length > 30) langHistory = langHistory.slice(-30);
+    setSettings("langHistory", langHistory);
+    this.setState({ langHistory: langHistory });
+  };
+
   handleLangChange = lang => {
     log.info(logDir, "handleLangChange()", lang);
     this.setState({ targetLang: lang });
     const inputText = this.state.inputText;
     if (inputText !== "") this.translateText(inputText, lang);
+    this.setLangHistory(lang);
   };
 
   translateText = async (text, targetLang) => {
@@ -162,6 +179,7 @@ export default class PopupPage extends Component {
         <Footer
           tabUrl={this.state.tabUrl}
           targetLang={this.state.targetLang}
+          langHistory={this.state.langHistory}
           handleLangChange={this.handleLangChange}
         />
       </div>