Merge pull request #9 from NGO-Algorithm-Audit/rl/i18n-param

Added language url param

Author: rubenlangius

src/App.tsx

@@ -19,6 +19,15 @@ export default function App() {
   const [activeForm, setActiveForm] = useState<RJSFSchema | null>(null);
   let formsMenu = [{ id: 0, title: t("no forms") }];
 
+  const params = new URLSearchParams(window.location.search);
+  const lang = params.get("lang");
+
+  useEffect(() => {
+    if (lang) {
+      i18n.changeLanguage(lang);
+    }
+  }, [i18n]);
+
   if (forms[i18n.language] && forms[i18n.language].length > 0) {
     formsMenu = (forms[i18n.language] as RJSFSchema[]).map((item, index) => {
       return { id: index, title: item.JSONSchema.title ?? t("no forms title") };
@@ -80,6 +89,7 @@ export default function App() {
             <Intro
               forms={formsMenu}
               onStart={(id: number) => onFormActivate(id)}
+              activeLanguage={lang ? true : false}
             />
           )}
         </Col>

src/components/Intro.tsx

@@ -5,9 +5,11 @@ import LanguageSwitcher from "./LanguageSwitcher";
 export default function ({
   forms,
   onStart,
+  activeLanguage = false,
 }: {
   forms: { id: number; title: string }[];
   onStart: (index: number) => void;
+  activeLanguage?: boolean;
 }) {
   const { t } = useTranslation();
 
@@ -16,28 +18,29 @@ export default function ({
       <Card.Body className="d-flex flex-column justify-content-between">
         <div className="d-flex flex-row justify-content-between align-items-top mb-2">
           <Card.Title>{t("cardTitle")}</Card.Title>
-          <LanguageSwitcher />
+          {!activeLanguage && <LanguageSwitcher />}
         </div>
 
         <div className="mb-4">
           <p>{t("description1")}</p>
-          <p>{t("description2")} 
+          <p>
+            {t("description2")}
             <a
               href="https://eur-lex.europa.eu/eli/reg/2024/1689/oj"
               target="_blank"
             >
               {t("source1")}
             </a>
-            {t("description2_1")} 
+            {t("description2_1")}
             <i>{t("description2_2")} </i>
-            {t("description2_3")} 
+            {t("description2_3")}
             <a
               href="https://algoritmes.pleio.nl/attachment/entity/f1a35292-7ea6-4e47-93fa-b3358e9ab2e0"
               target="_blank"
             >
               {t("source2")}
             </a>
-            {t("description2_4")} 
+            {t("description2_4")}
           </p>
           <p>
             {t("feedback")}{" "}

src/i18n/config.ts

@@ -2,10 +2,10 @@ import i18next from "i18next";
 import { initReactI18next } from "react-i18next";
 import enTranslation from "./en/translation.json";
 import nlTranslation from "./nl/translation.json";
-import LanguageDetector from "i18next-browser-languagedetector";
 
 i18next
-  .use(LanguageDetector) // Add the language detector
+  // currently not using the language detector, since we are using url params.
+  //.use(LanguageDetector)
   .use(initReactI18next)
   .init({
     fallbackLng: "en", // Default language if detection fails