Merge pull request #534 from BloomBooks/BL-12947_language_order_on_bo…

…ok_card

BL-12947 Show L1 first by default (after any page context lang)

src/components/LanguageFeatureList.tsx

@@ -12,7 +12,7 @@ import {
 import { getUniqueLanguages } from "./LanguageLink";
 import { useTheme } from "@material-ui/core";
 import TruncateMarkup from "react-truncate-markup";
-import { getDisplayNamesForLanguage } from "../model/Language";
+import { ILanguage, getDisplayNamesForLanguage } from "../model/Language";
 import { commonUI } from "../theme";
 import { useShowTroubleshootingStuff } from "../Utilities";
 
@@ -34,16 +34,24 @@ export const LanguageFeatureList: React.FunctionComponent<IProps> = (props) => {
     // Figure out what to show in the language list area.
     // It's a mix of simple text nodes and possibly feature icons.
     const uniqueLanguages = getUniqueLanguages(props.basicBookInfo.languages);
-    // if contextLangTag is present, put it first in the list.
-    if (props.contextLangTag) {
-        const contextLang = uniqueLanguages.filter(
-            (language) => language.isoCode === props.contextLangTag
-        )[0];
-        if (contextLang) {
-            uniqueLanguages.splice(uniqueLanguages.indexOf(contextLang), 1);
-            uniqueLanguages.unshift(contextLang);
+
+    function moveLanguageToFront(langList: ILanguage[], frontLangTag?: string) {
+        if (frontLangTag) {
+            const frontLangIndex = langList.findIndex(
+                (language) => language.isoCode === frontLangTag
+            );
+            if (frontLangIndex >= 0) {
+                const frontLang = langList.splice(frontLangIndex, 1)[0];
+                langList.unshift(frontLang);
+            }
         }
     }
+    // First, put L1 at the front of the list
+    moveLanguageToFront(uniqueLanguages, props.basicBookInfo.lang1Tag);
+
+    // If contextLangTag is present, put it first in the list, even before L1
+    moveLanguageToFront(uniqueLanguages, props.contextLangTag);
+
     function getLanguageElements(showOneNamePerLanguage: boolean) {
         const languageElements: any[] = [];
         for (const language of uniqueLanguages) {