Merge branch 'main' into classificatie

Author: jfparie

README.md

@@ -1,11 +1,3 @@
-# AI Act Questions
-
-AI Act questions based on AI Act defintions and the definition of High Impact Algorithm in the Algorithm Registery guidance by the Dutch Ministry of the Interior (https://algoritmes.pleio.nl/attachment/entity/f1a35292-7ea6-4e47-93fa-b3358e9ab2e0).
-
-The questions are developed in collaboration with the Muncipality of Amsterdam.
-
-The templates are available in JSON format and can be easily customized to fit the specific needs of an organization.
-
 # How it works
 
 The JSON schema's use the [React JSON Schema Form (RJSF) library](https://github.com/rjsf-team/react-jsonschema-form), this library is built on top of: [Json schema's](https://json-schema.org/) which should make it easy to implement the schema's in your own tech stack.

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") };
@@ -63,7 +72,7 @@ export default function App() {
   }, []);
 
   return (
-    <Container className="vh-100">
+    <Container fluid className="vh-100 mx-0">
       <Row className="justify-content-center align-items-center h-100">
         <Col xs={12} className="">
           {activeForm ? (
@@ -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