I18next should use default lang (#943)

This fixes the logic for the language system, so it uses the default
language when no language match is found in the URL. It is needed when
the default language should not be in the URL.

It does this by adding a new, custom detector that always returns the
default language, from the config file. This is put behind the URL
matching, so it will only be used when no language matches.

Author: SjurSutterudSagen

packages/pxweb2/src/i18n/config.ts

@@ -4,8 +4,14 @@ import HttpApi from 'i18next-http-backend';
 import LanguageDetector from 'i18next-browser-languagedetector';
 
 import { pxNumber } from './formatters';
+import pxDetector from './pxDetector';
 import { getConfig } from '../app/util/config/getConfig';
 
+// Add custom language detector to handle default language from config,
+// so we can handle no language in path as default language.
+const languageDetector = new LanguageDetector();
+languageDetector.addDetector(pxDetector);
+
 export const defaultNS = 'translation';
 const config = getConfig();
 
@@ -19,7 +25,7 @@ const lookingForLanguagePos =
 const initPromise = i18n
   .use(HttpApi)
   .use(initReactI18next)
-  .use(LanguageDetector)
+  .use(languageDetector)
   .init({
     backend: {
       loadPath: `${config.baseApplicationPath}locales/{{lng}}/translation.json`,
@@ -34,7 +40,7 @@ const initPromise = i18n
       escapeValue: false,
     },
     detection: {
-      order: ['path'],
+      order: ['path', 'pxDetector'],
       lookupFromPathIndex: lookingForLanguagePos,
       caches: [], // Do not cache the language in local storage or cookies.
     },

packages/pxweb2/src/i18n/pxDetector.spec.ts

@@ -0,0 +1,16 @@
+import pxDetector from './pxDetector';
+import { getConfig } from '../app/util/config/getConfig';
+
+const config = getConfig();
+
+describe('pxDetector', () => {
+  it('should return the default language from config', () => {
+    const result = pxDetector.lookup();
+
+    expect(result).toBe(config.language.defaultLanguage);
+  });
+
+  it('should have the correct name', () => {
+    expect(pxDetector.name).toBe('pxDetector');
+  });
+});

packages/pxweb2/src/i18n/pxDetector.ts

@@ -0,0 +1,16 @@
+import { getConfig } from '../app/util/config/getConfig';
+
+const config = getConfig();
+
+/**
+ * Custom i18next language detector to always return the default language from config.
+ * This is used to handle the case where there is no language in the path,
+ * and we want to use the default language from config in that case.
+ */
+export default {
+  name: 'pxDetector',
+
+  lookup() {
+    return config.language.defaultLanguage;
+  },
+};