remove autodetect language feature and add url parameter.

Author: rubenlangius

src/i18n.ts

@@ -3,12 +3,9 @@ import { initReactI18next } from 'react-i18next';
 import en from './locales/en.json';
 import nl from './locales/nl.json';
 
-import LanguageDetector from 'i18next-browser-languagedetector';
-
 i18n
-    // detect user language
-    // learn more: https://github.com/i18next/i18next-browser-languageDetector
-    .use(LanguageDetector)
+    // currently not using the language detector, since we are using url params.
+    //.use(LanguageDetector)
     // pass the i18n instance to react-i18next.
     .use(initReactI18next)
     // init i18next

src/routes/BiasDetection.tsx

@@ -52,15 +52,17 @@ export default function BiasDetection() {
         fileName: '',
         demo: false,
     });
-    const { t } = useTranslation();
-    // Select the content to print
+    const { t, i18n } = useTranslation();
 
     const contentRef = useRef<HTMLDivElement | null>(null);
     const reactToPrintFn = useReactToPrint({
         contentRef: contentRef,
         pageStyle: PAGE_STYLE,
     });
 
+    const params = new URLSearchParams(window.location.search);
+    const lang = params.get('lang');
+
     const {
         loading,
         initialised,
@@ -89,11 +91,12 @@ export default function BiasDetection() {
     };
 
     useEffect(() => {
-        console.log(
-            'document.referrer and is nl',
-            document.referrer,
-            document.referrer?.includes('/nl/')
-        );
+        if (lang) {
+            i18n.changeLanguage(lang);
+        }
+    }, [i18n]);
+
+    useEffect(() => {
         if (pythonCode) {
             initialise({ code: pythonCode, data: '' });
         }
@@ -135,7 +138,7 @@ export default function BiasDetection() {
 
     return (
         <main ref={contentRef} className="gap-4 p-4 flex flex-col">
-            <LanguageSwitcher />
+            {!lang && <LanguageSwitcher />}
             <div className="relative flex-1 flex-col items-start">
                 <BiasSettings
                     onRun={onRun}

src/routes/SyntheticData.tsx

@@ -52,7 +52,7 @@ export default function SyntheticDataGeneration() {
         contentRef: contentRef,
         pageStyle: PAGE_STYLE,
     });
-    const { t } = useTranslation();
+    const { t, i18n } = useTranslation();
     const {
         loading,
         initialised,
@@ -66,6 +66,9 @@ export default function SyntheticDataGeneration() {
         isDemo: false,
     });
 
+    const params = new URLSearchParams(window.location.search);
+    const lang = params.get('lang');
+
     const onFileLoad: csvReader['onChange'] = (
         data,
         stringified,
@@ -75,6 +78,12 @@ export default function SyntheticDataGeneration() {
         setData({ data, stringified, fileName, demo });
     };
 
+    useEffect(() => {
+        if (lang) {
+            i18n.changeLanguage(lang);
+        }
+    }, [i18n]);
+
     useEffect(() => {
         if (pythonCode) {
             initialise({ code: pythonCode, data: '' });
@@ -106,7 +115,7 @@ export default function SyntheticDataGeneration() {
 
     return (
         <main ref={contentRef} className="gap-4 p-4 flex flex-col">
-            <LanguageSwitcher />
+            {!lang && <LanguageSwitcher />}
             <div className="relative flex-1 flex-col items-start">
                 <SyntheticDataSettings
                     onRun={onRun}