Adding detection and storing of selected language

frontend/package-lock.json

@@ -20,6 +20,7 @@
         "date-fns": "^2.24.0",
         "http-proxy-middleware": "^2.0.1",
         "i18next": "^20.6.0",
+        "i18next-browser-languagedetector": "^6.1.2",
         "i18next-http-backend": "^1.3.1",
         "react": "^17.0.2",
         "react-datepicker": "^4.2.1",
@@ -10098,6 +10099,25 @@
         "@babel/runtime": "^7.12.0"
       }
     },
+    "node_modules/i18next-browser-languagedetector": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-6.1.2.tgz",
+      "integrity": "sha512-YDzIGHhMRvr7M+c8B3EQUKyiMBhfqox4o1qkFvt4QXuu5V2cxf74+NCr+VEkUuU0y+RwcupA238eeolW1Yn80g==",
+      "dependencies": {
+        "@babel/runtime": "^7.14.6"
+      }
+    },
+    "node_modules/i18next-browser-languagedetector/node_modules/@babel/runtime": {
+      "version": "7.15.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+      "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/i18next-http-backend": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-1.3.1.tgz",
@@ -29612,6 +29632,24 @@
         "@babel/runtime": "^7.12.0"
       }
     },
+    "i18next-browser-languagedetector": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-6.1.2.tgz",
+      "integrity": "sha512-YDzIGHhMRvr7M+c8B3EQUKyiMBhfqox4o1qkFvt4QXuu5V2cxf74+NCr+VEkUuU0y+RwcupA238eeolW1Yn80g==",
+      "requires": {
+        "@babel/runtime": "^7.14.6"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.15.4",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+          "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
+      }
+    },
     "i18next-http-backend": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-1.3.1.tgz",

frontend/package.json

@@ -15,6 +15,7 @@
     "date-fns": "^2.24.0",
     "http-proxy-middleware": "^2.0.1",
     "i18next": "^20.6.0",
+    "i18next-browser-languagedetector": "^6.1.2",
     "i18next-http-backend": "^1.3.1",
     "react": "^17.0.2",
     "react-datepicker": "^4.2.1",

frontend/src/i18n.ts

 import i18n from 'i18next'
 import { initReactI18next } from 'react-i18next'
 import Backend from 'i18next-http-backend'
+import LanguageDetector from 'i18next-browser-languagedetector'
 
 i18n
   .use(Backend)
+  .use(LanguageDetector)
   .use(initReactI18next)
   .init({
     fallbackLng: {
@@ -13,7 +15,6 @@ i18n
     },
     supportedLngs: ['nb', 'en', 'nn'],
     debug: process.env.NODE_ENV !== 'production',
-    lng: 'nb',
     backend: {
       loadPath: '/locales/{{lng}}/{{ns}}.json',
     },
@@ -23,6 +24,10 @@ i18n
     react: {
       useSuspense: false,
     },
+    detection: {
+      order: ['cookie'],
+      caches: ['cookie'],
+    },
   })
 
 export default i18n