feat: add browser language detector to automatically switch to defaul…

…t browser lang (#2022) Co-authored-by: Akshat Nema <[email protected]>
asyncapi · Aug 7, 2023 · 7eda8a3 · 7eda8a3
1 parent 9f5f7d3
commit 7eda8a3
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 5 deletions.
diff --git a/components/navigation/NavBar.js b/components/navigation/NavBar.js
@@ -20,6 +20,7 @@ import {
   languages,
   useTranslation,
 } from "../../lib/i18n";
+import browserLanguageDetector from "../../lib/browserLanguageDetector";
 
 const isMobile = isMobileDevice();
 const uniqueLangs = [...new Set(["EN", "DE"])].map((repo) => ({
@@ -35,10 +36,15 @@ export default function NavBar({
   const { pathname, query, asPath } = router;
   const [open, setOpen] = useState();
   const [mobileMenuOpen, setMobileMenuOpen] = useState();
-  const [lang, setLang] = useState("en");
   const { i18n } = useTranslation();
 
-  const changeLanguage = async (locale) => {
+  const changeLanguage = async (locale, langPicker) => {
+
+    // Verifies if the language change is from langPicker or the browser-api
+    if(langPicker){
+      localStorage.setItem('i18nLang', locale);
+    }
+
     // Detect current language
     const slug = asPath.split("/")[1];
     const langSlug = languages.includes(slug) && slug;
@@ -66,6 +72,11 @@ export default function NavBar({
     router.push(href);
   };
 
+  // To be enabled on the last PR
+  // useEffect(() => {
+  //   changeLanguage(browserLanguageDetector(), false);
+  // }, []);
+
   function outsideClick(menu) {
     if (open !== menu) return;
     setOpen(null);
@@ -172,8 +183,7 @@ export default function NavBar({
             {/* <LanguageSelect
               options={uniqueLangs}
               onChange={(value) => {
-                setLang(value.toLowerCase());
-                changeLanguage(value.toLowerCase());
+                changeLanguage(value.toLowerCase(), true);
               }}
               className=""
               selected={i18n.language.toLocaleUpperCase()}

diff --git a/lib/browserLanguageDetector.js b/lib/browserLanguageDetector.js
@@ -0,0 +1,36 @@
+const { i18n } = require("./../next-i18next-static-site.config");
+
+// Converts languages like 'en-US' to 'en'
+const convertLanguageCode = (code) => {
+    const baseLanguageCode = code.split('-')[0];
+    return baseLanguageCode;
+};
+
+function browserLanguageDetector() {
+
+    // Fetch the language stored inside localStorage
+    const localStorageLanguage = localStorage.getItem('i18nLang');
+
+    if (localStorageLanguage) {
+        return localStorageLanguage;
+    }
+
+    // Load available languages from i18n object
+    const availableLanguages = i18n.languages;
+
+    // Load user's default languages from browser settings
+    const browserDefaultLanguages = navigator.languages;
+
+    const convertedLanguages = browserDefaultLanguages.map((code) => convertLanguageCode(code));
+
+    // Check if the top priority language is available inside i18n object
+    for (var i = 0; i < convertedLanguages.length; i++) {
+        if (availableLanguages.includes(convertedLanguages[i])) {
+            return convertedLanguages[i];
+        }
+    }
+    // Default to 'en' in all other cases
+    return 'en';
+}
+
+export default browserLanguageDetector;
diff --git a/pages/index.js b/pages/index.js
@@ -27,7 +27,8 @@ import NewsroomSection from '../components/newsroom/NewsroomSection'
 import { languageDetection } from "../lib/i18n";
 
 function HomePage() {
-  languageDetection();
+  //To be enabled in a future PR
+  //languageDetection();
   return (
     <>
       <Head />